---恢复内容开始---

学习网站：W3School

一、HTML的认识

纯文本语言：只显示内容，不显示样式，也不能描述语义的文档，但是也不会乱码

语义：数据的含义就是语义，数据是符号，在这表示标签

文件格式：txt只保存内容，不显示样式，而doc不仅显示内容，也显示样式，两者在保存相同的内容时，doc的文件占用内存比较大

常见纯文本：记事本、Java、HTML、CSS、JavaScript等

二、 HTML的基础知识点

HTML是负责描述文档语义的一种标记语言

HTML有文本、图片、链接、视频、音乐等

注意：html没有样式，是用来添加语义的排版，实际上就是文本的嵌套使用，而CSS是用来定义样式的

HTML (hyperText Markup Language):  也叫超文本标记语言

超文本：是因为它可以导入超链接，将空间中不同的数据进行连接，所以叫超文本

基本骨架：

<html>

<head>

<meta charset="UTF-8">

<!-- 浏览器的标题 -->

<title></title>

</head>

<body>

</body>

</html>

<!DOCTYPE html>:文档声明头，声明使用的是html的文档类型  (DocType Declaration)，任何一个标准的HTML页面，第一行一定是文档声明头

我们大多数学的是HTML4.01版本，这版本从IE6浏览器兼容，HTML5兼容从IE9开始的浏览器。但是IE6，7，8版本还没有淘汰，所以这几年用该还是使用HTML4.01版本来制作网页。

HTML和XHTML的区别：XHTML严格体现在小写标签、闭合、引号

Strict：表示当前模式的要求更加严格，指定有些标签不能使用，如U标签（是指加上下划线的标签，也就是样式，这和HTML就产生了冲突，HTML只负责语义，不负责样式的）

我们使用的一般是Transitional(普通的)的版本，没有严格要求

(U标签：)

基本标签：

<body></body>：里面显示文本、图片内容、链接等网页内容

<h1></h1>一级标题(主标题) <h2></h2>二级标题…  h1->h6定义标题语义，显示不同的标题(headline)大小

<p></p>段落。里面的是内容

<a></a> 指向链接

<img src="" alt=“这里用来调用图片失败的识别说明”>图片

<br>换行

字符集（Character Set）：当前计算机不能识别汉字，而是通过二进制来存储编码，计算机记录的实际是根编码

eg：  <meta charset="UTF-8">     meta(便签定义)--> 表示“元”，“元”配置  ：表示基础的配置项目

第一种：UTF—8

<meta http-equiv="content-type" content="text/html;charset=utf-8">

第二种：gb2312

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

第三种：gb2312的简写 gbk

<meta http-equiv="Content-Type" content="text/html; charset=gbk">

其中UTF-8全球通用，涵盖了人类的所有语言

Gb2312是国标，是中国的字库，涵盖了汉语和常见的英文

UTF-8中的一个汉字存储3个字节，而gb2312存储两个字节，一般情况下使用的是UTF-8.但是有时在用户体验上要考虑到是否使用国标

2.3关键字和页面描述

mata除了可以设置字符集，还可以设置关键字和页面描述

页面描述（description：描述）

设置页面描述，在百度搜索，可显示当前页面描述的内容，这个技术叫做SEO（SEO：英文Search Engine Optimization， 中文叫“搜索引擎优化”）

eg：<meta name = “名字 ” content =“图片加载失败后显示的提示内容”>

关键字：告诉搜索引擎，这个网页是做什么，提高搜索的效率，让人快速的找到想要的信息，keyword就是“关键字”

保存编码格式：File--> Save With Encoding

CM(Command) ＋ S保存   CM ＋ N新建文件(File--> New)    Tab点击出html的各种格式

HTTP协议：也叫超文本传输协议，个人的认识：用于Web浏览器和网站服务器之间的数据传输。它是以明文发送内容，不提供任何形式进行加密，攻击者很容易截取数据信息，可以直接看懂，所以它不适合传如卡号、密码等敏感信息

三、HTML的基本语法

<1、 html对换行（Tab键）、回车以及大小写都不敏感

    • <div>这是一个div的盒子！
    • <h3>这是一个三级标题</h3>
    • <p>这是一个段落</p>    </div>

等价于：

    • <div>这是一个div的盒子！
    • <h3>这是一个三级标题</h3>
    • <p>这是一个段落</p>
    • </div>

<div></div>存放内容或者嵌套其它标签使用，对换行不敏感

代码规范：<div>标签的嵌套的内容要依次缩进，增强代码的可读性

<2、html的空白折叠效果：html中的文字之间进行空格、换行、tab键都会折叠成一个空格

<3、标签要严格封闭(<>)

HTML、CSS实际上就是写代码，不是真正意义上"编程"，基本上不实现业务逻辑，但是思想和很多内容在编程上是相同的

四、标签的使用

HTML的标签分等级的，有二种类型：容器级、文本级

容器级的标签可以存放任何东西

文本级的标签只能放置文字、图片、表单元素

1、h标签

<h1></h1>一级标题(主标题) <h2></h2>二级标签…<h6></h6>六级标题

h1->h6定义标题语义，显示不同的标题大小    headline

p标签：<p></p>段落(Paragraph)  里面输入的是内容，p里面只能存放文字、图片、表单元素，其他一律不能放

eg：当源代码是

<p>

我是段落

<h1>我是主标题</h1>

</p>

但是在浏览器检查的时候显示的是

<p>

我是段落

</p>

<h1>我是主标题</h1>

<p> </p>

浏览器自己把P标签封闭，不让你去包裹h1

浏览器在p标签中遇到其它标签时，会自动添加</p>进行封闭，在另一个结束标签前面补上开始标签<p>，

3、 img标签

<img>插入图片    img(image：图片)     Src (Source: 资源)

eg:  <img src="" alt=“1.png”/>

能够插入的图片类型：jpg(jpeg)、gif、png、bmp，不能往网页里面插入的图片格式有：psd、ai

img的标签不需要反标签，是自封闭标签，也叫单标签

如：<img src="1.jpg"/>  ，Src是img的标签属性，1.png是属性值(网址或文件路径)

alt属性：alt(altemate : 替代) 图片无法显示的时候，用文字来代替文件（但是有些浏览器不支持）

HTML页面不是直接插入图片的，而是插入引用的地址，所以也要把图片上传到服务器上

如果一直显示不出图片，最直接有效的办法是输入全路径加图片名，但是只能在自己的电脑上能看到，不推荐这样用。

HTML中插入图片，有二个文件，一个html文件，一个jpg文件

我们关心就是当前这二个文件的相对位置，即是这个网站项目，那U盘拷贝给别人，只要相对路径不变，图片就一定能正常显示，图片和html文件要在同一层级上

如果在上一个文件里，要加“../”如果在上二个文件里，就添加“../../”，以此增加或者输入全路径

如果图片在html文件里面，则输入“thml/”

4、a标签超级链接

写法：<a href=""  title="这是什么样的title" targe="_blank"  >这是一个超链接</a>

一个网站，是由多个html网页组成，html网页键通过超级链接相互跳转，形成一个“网”

如：<a href="08.html" title="这是什么样的title">title属性</a>

target属性

target：目标的意思

如：<a href="08.html" title="这是title" target="_blank ">target属性</a>

blank（空白）：块状的意思，代表新建一个新的空白窗口

如果没有target="_blank "，那么在相同的标签页打开，如果写了target="_blank "，就是在新的空白标签页中打开，并且跳转的标签页还是存在的

5、页面中锚点

锚点：就是一个小小的标记，用来实现页面跳转，不容易被用户察觉

a （anchor）  是"锚"的意思  a标签

title    鼠标悬停时的文本显示

target(属性)    如果有这行代码，就会在新的空白标签页打开，并且在跳转的标签页中还是存在的

页面中的锚点作用：当前内容很多的时候，想直接返回首页，用来跳转页面

如：锚点可以用name和id来设置属性

<a name="BWHL">这是第一个锚点</a>

<a name="second">这是第二个锚点</a>

如何点击跳转（前提是有一个超级链接，指向页面中的锚点，才能在页面内跳转）

<a herf="#BEHL">点击第一个锚点</a>   #BEHL就是锚点

<a herf="#second">点击第二个锚点</a>

6、<br>换行标签

7、列表：

它会自动空格，分为：

有序列表：<ol><li>

无序列表：<ul><li>

可以在浏览器中检查代码：检查--> Console，有些浏览器可能不支持，常用的是Chrome和Firefix(有很多实用的插件，个人经常实用Firebug来检查元素)

HTML基础笔记-02的更多相关文章

  1. 黑马程序员_java基础笔记(02)...java语言基础组成

    ——————————  ASP.Net+Android+IOS开发..Net培训.期待与您交流!—————————— java语法(1:关键字,2:标识符,3:注释,4:常量和变量,5:运算符,6:语 ...

  2. JavaScript基础第02天笔记

    JavaScript基础第02天 1 - 运算符(操作符) 1.1 运算符的分类 运算符(operator)也被称为操作符,是用于实现赋值.比较和执行算数运算等功能的符号. JavaScript中常用 ...

  3. 《30天自制操作系统》笔记(02)——导入C语言

    <30天自制操作系统>笔记(02)——导入C语言 进度回顾 在上一篇,记录了计算机开机时加载IPL程序(initial program loader,一个nas汇编程序)的情况,包括IPL ...

  4. php代码审计基础笔记

    出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...

  5. OpenCV 学习笔记 02 使用opencv处理图像

    1 不同色彩空间的转换 opencv 中有数百种关于不同色彩空间的转换方法,但常用的有三种色彩空间:灰度.BRG.HSV(Hue-Saturation-Value) 灰度 - 灰度色彩空间是通过去除彩 ...

  6. ASP.NET Identity 2集成到MVC5项目--笔记02

    ASP.NET Identity 2集成到MVC5项目--笔记01 ASP.NET Identity 2集成到MVC5项目--笔记02 继上一篇,本篇主要是实现邮件.用户名登陆和登陆前邮件认证. 1. ...

  7. Java：并发笔记-02

    Java:并发笔记-02 说明:这是看了 bilibili 上 黑马程序员 的课程 java并发编程 后做的笔记 3. 共享模型之管程-1 本章内容-1 共享问题 synchronized 线程安全分 ...

  8. webug4.0 打靶笔记-02【完结】

    webug4.0打靶笔记-02 3. 延时注入(时间盲注) 3.1 访问靶场 3.2 寻找注入点 貌似一样的注入点: ?id=1' --+ 3.3 判断输出位置 同前两关一样的位置,时间盲注应该不是这 ...

  9. 软件测试之loadrunner学习笔记-02集合点

    loadrunner学习笔记-02集合点 集合点函数可以帮助我们生成有效可控的并发操作.虽然在Controller中多用户负载的Vuser是一起开始运行脚本的,但是由于计算机的串行处理机制,脚本的运行 ...

随机推荐

  1. Android数据存储之SharedPreferences存储

    安卓系统为应用提供了系统级的配置存储方案,它就是靠SharedPreferences接口来实现的,该接口存储的所有信息都是以名值对的形式保存,但其保存的数据类型也仅限于基本数据类型,如字符串.整形.布 ...

  2. JAVA里的异常

    一.概念和分类 JAVA程序设计语言中,异常对象都是Throwable类的一个实例.Throwable分为Error和Exception. 其中,Error类层次结构描述了JAVA运行时系统的内部错误 ...

  3. 《python核心编程》笔记——系统限制

    输出当前系统关于数字的范围 import sys l = {} maxint = sys.maxint minint = -maxint maxlong = sys.maxsize minlong = ...

  4. android5.1 for tq335x

    万万没有想到再次编译aosp已经是半年以后了,未完的工作总是要继续进行的. aosp不是通过repo下载的,而是在百度网盘里面找了网友的分享下载的.然后编译的方法直接挂个vpn到谷歌的官网上去看需要什 ...

  5. 创建一个ArcGIS for Android 新项目并显示出本地的地图

    1.准备工作:首先要配置好android的开发环境,然后在Eclipse中安装ArcGIS for Android的开发控件:在ArcCatalog中发布好本地的地图服务. 2.安装完ArcGIS f ...

  6. 团队spring会议1

    一.我们在近期进行了第一次计划会议,会议过程大致如下: 1.确定所做项目的方向: 2.将调查问卷的结果进行统计,做了需求分析,大致了解了用户的想法: 3.确定了团队计划backlog: 4.将任务进行 ...

  7. activity启动模式区别和优化

    初学android的开发人员,可能会经常忽略这个重要的设置. Activity一共有以下四种launchMode:1.standard2.singleTop3.singleTask4.singleIn ...

  8. jmSlip WEB前端滑屏组件

    基于css3的滑屏组件 demo: http://slip.jm47.com 下载: https://github.com/jiamao/jmSlip 功能清单 区域横滚 整屏竖滚 滚动动画效果 区域 ...

  9. UWP中的Direct2D

    介绍 DirectX一直是Windows平台中高性能图形的代名词,自Win7开始,微软又推出了Direct2D技术,包装于Direct3D,但专注于2D图形,并且准备取代GDI这样的传统2D图形技术. ...

  10. Java多线程2：Thread中的实例方法

    Thread类中的方法调用方式: 学习Thread类中的方法是学习多线程的第一步.在学习多线程之前特别提出一点,调用Thread中的方法的时候,在线程类中,有两种方式,一定要理解这两种方式的区别: 1 ...