HTML
一、 网页的结构：
- 一个网页由三部分组成：
- 结构
结构是页面的整体结构，哪里是标题，哪里是段落，哪里是图片。
结构使用HTML来编写。 - 表现
表现是页面的外在的样式，比如字体，字体大小，字体颜色，背景等等。
使用CSS来设置页面中元素的样式。 - 行为
页面和用户之间的交互行为。
使用JavaScript来设置页面的行为。
- 一般网页要求结构、表现、行为三者分离
- 在开发中面临一个问题—程序之间的耦合，三者分离就是为了解耦合
二、HTML，超文本标记语言。
三、负责页面中的结构，定义出页面中的各个组成部分。
四、HTML是采用纯文本的形式的编写，采用HTML标签来标识出页面中的不同部分。
五、标签
- 成对出现：
- <标签名></标签名>
- 自结束标签：
- <标签名/>
六、属性
- 通过属性可以设置标签的效果
- 属性需要定义在开始标签中或这自结束标签中
- 属性实际上是一组一组名值对结构
- 例子：
- <标签名 属性名=“属性值” 属性名=“属性值”></标签名>
- <标签名 属性名=“属性值” 属性名=“属性值” />
七、HTML页面的基本结构
八、文档声明
- <!doctype html>
- 用来标识当前页面的html的版本
- 该声明用来告诉浏览器，当前的页面是使用HTML5的标准编写的
九、常用标签
- <html>
- 网页的根标签
- 一个页面中有且只有一个根标签
- 网页中的所有内容都需要写在html标签的内部
- <head>
- 网页的头部
- 该标签中的内容不会在网页中直接显示
- 该标签用于帮助浏览器解析页面
- 子标签
（1） <title>
a. 用来设置网页的标题
b. 默认会在浏览器的标题栏中显示
c.搜索引擎检索网页时，会主要检索title中的内容，它会影响到页面在搜索引擎中的排名
（2） <meta>
a.用来设置网页的元数据，比如网页使用的字符集
<meta charset=“utf-8” />
b.设置网页的关键字
<meta name=“keywords” content=“关键字,关键字,关键字,关键字”/>
c.设置网页的描述
<meta name=“description” content=“网页的描述”/>
d.请求的重定向
<meta http-equiv=“refresh” content=“秒数;url=地址” />
- <body>
- 网页的主体
- 网页中所有的可见部分都需要在body中编写
- <h1> ~ <h6>
- 标题标签
- 在html中一共有六级标题
- 六级标题中，h1最重要，h6最不重要，一般页面中只会使用h1~h3
- h1的重要性仅次于title，浏览器也会主要检索h1中的内容，以判断页面的主要内容
- 一般一个页面中只能写一个h1
- <p>
- 段落标签
- <br/>
- 换行标签
- <hr />
- 水平线标签
- 内联框架
- 可以向一个页面中引入其他的外部页面
- <iframe></iframe>
- 属性:
a.src
外部页面的地址，可以使用相对路径
b.width和height
可以设置框架的宽度和高度
c.name
可以为内联框架指定一个名字
可以将该属性值设置为超链接的target属性的值
这样当点击超链接时，页面将会在相应的内联框架中打开 - 内联框架中的内容不会被搜索引擎所检索，所以开发中尽量不要使用内联框架
- 超链接
- 可以使当前页面跳转到其他的页面
- <a>链接的文字</a>
- 属性
a.href
指向链接跳转的目标地址，可以是一个相对路径
还可以是#id属性值，这样当点击超链接以后，将会跳转到当前页面的指定位置
可以使用mailto:来创建一个发送电子邮件的超链接
b.target
指定在哪个窗口中打开链接
可选值
十、注释
- 语法：
- <!-- 注释内容 -->
- 注释中的内容不会在页面中显示，但是会在源码中显示，我们可以通过注释来说明网页的代码。
- 也可以通过注释隐藏一些页面中不想显示的内容
十一、实体
- 在HTML页面中一些特殊符号是不能直接使用，需要使用实体来代替这些特殊符号
- 实体也可以称为转义字符
- 实体的语法
- &实体名;
- 常用的实体
- 空格:
- <:<
- >:>
- 版权符号:©
十二、图片标签
- <img />
- 使用图片标签可以向页面中引入一个外部图片
- 属性
a.src
指向一个外部图片的路径，可以使用相对路径
b.alt
指定一个在图片无法加载时对图片的描述
搜索引擎主要通过该属性来识别图片的内容
如果不写该属性则搜索引擎会对图片进行收录
c.width
设置图片的宽度
d.height
设置图片的高度 - 图片的格式
a.JPEG:颜色丰富的图片，如，照片
b.GIF:颜色单一，简单透明的图片，动态图
c.PNG:颜色丰富，复杂透明的图片
d.图片选择的原则:
效果一致，用小的
效果不一致，用效果好的
十三、相对路径
- 相对于当前资源所在的目录的路径
- 可以使用…/返回一级目录，返回几级使用几个…/
十四、xHtml语法规范
- HTML中不区分大小写，但是尽量使用小写
- HTML的注释不能嵌套
- 标签必须结构完整（成对出现或者自结束标签）
- 标签可以嵌套但是不能交叉嵌套
- 属性必须有值，且值必须加引号，单引号双引号都可以
十五、文本标签
- <em>：表示语气上的强调
- <strong>:表示内容的重要性
- <i>:表示单纯的斜体
- <b>:表示单纯的加粗
- <small>:表示细则一类的内容
- <cite>:表示参考的内容，凡是加书名号的都可以使用cite
- <q>:短引用，行内引用
- <blockquote>:长引用，块级引用
- <sup>:上标
- <sub>:下标
- <ins>:插入的内容
- <pre>:预格式标签，可以保留代码中空格换行这些格式
- <code>:表示程序代码
十六、列表
- 无序列表：
- 使用ul来创建一个无序列表，在列表中使用li来表示一个列表项
（以下三个分别为1.无序列表、2.有序列表、 3. 定义列表） - 无序列表使用符号作为项目符号
- 有序列表：
- 使用ol来创建一个无序列表，在列表中使用li来表示一个列表项
- 使用有序的序号作为项目符号
- 定义列表
- 列表相关的元素都是块元素，他们之间可以互相嵌套
- 去除项目符号：list-style:none
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
