HTML从这里开始
一. 什么是HTML?
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
二. HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如
<html> - HTML 标签通常是成对出现的，比如
<b>和</b> - 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
三. HTML语法结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
四. HTML 语法执行顺序
从上至下
五. HTML 基本标签
1. 标题标签
<h>系列
<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
页面展示：
2. 段落标签
<p></p>
<p>这是段落标签</p>
<p>这是段落标签</p>
页面展示：
3. 行内标签
<span></span>
<span>这是一行！</span>
<span>这是一行！</span>
页面展示：
4.换行标签
<br/>
<span>这是一行！</span>
<br/>
<span>这是一行！</span>
页面展示：
5. 水平线分割标签
<hr/>
<hr/>
页面展示：
6. 上标，下标
上标：<sup></sup>
下标：<sub></sub>
M<sup>2</sup>
<br/>
H<sub>2</sub>O
页面展示：
7. 加粗标签
<strong></strong>
<p>未加粗</p>
<strong>加粗</strong>
页面展示：
8. 标记标签
<em></em>
<em>标记标签</em>
页面展示：
9. 引用标签
<q></q>
<q>引用标签</q>
页面展示：
10.块级标签
<div></div>
<div>块级标签</div>
<div>块级标签</div>
页面展示：
11. 有序列表
<ol>
<li>标签</li>
<li>标签</li>
</ol>
页面展示：
12. 无序列表
ul无序列表变迁默认类型为type="disc",黑色实心圆点
type="circle"，黑色空心圆点
type="square"，黑丝实心方块
<ul>
<li>标签</li>
<li>标签</li>
</ul>
页面展示：
13. 定义列表
<dl>
<dt>一级</dt>
<dd>二级</dd>
<dd>二级</dd>
<dt>一级</dt>
<dd>二级</dd>
<dd>二级</dd>
</dl>
页面展示：
14. 文本显示方向
<bdo></bdo>
<bdo dir="ltr">从左开始</bdo>
<br/>
<bdo dir="rtl">从右开始</bdo>
页面展示：
15. 常用特殊符号
空格
>大于号（>)
<小于号（<）
"引号（"）
©版权号（©）
16. 注释
<!---->
<!--内容-->
不会在页面进行显示
六. a 超链接标签
1. 超链接
<a href="" target="">跳转</a>
- href：链接指向的页面的 URL。
- target：打开链接的方式。默认为_sel。
_self：在本页面打开链接。
_blank：在新的页面打开链接。 - download：下载超链接目标。
2. 锚点设置
- 回到页面顶部
<a href="#top">顶部</a>
- 回到页面指定位置
<p id="aaa">跳到这里</p>
<a href="#aaa">指定位置</a>
七. img 图片标签
<img src="" alt="">
- src：必需的属性。它的值是图片的URL地址，也就是图片路径地址。
- alt：图像的替代文本。如果图片因为某些原因无法显示，浏览器将显示代替文本。
- title：鼠标放上去显示的文字。
- width：设置图片的宽度。
- height：设置图片的高度。
- align：图片的对其方式。
top：以顶部对其。
right：以右面对其。
buttom：以底部对其。
left：以左边对其。
middle：中间显示。
八. 媒体标签
1. audio 音频标签
<audio src=""></audio>
- src：必需的属性。它的值是音频的URL地址，也就是音频路径地址。
- autoplay：自动播放
autoplay=“autoplay” - controls：控制台
controls=“controls” - hidden：隐藏控制台
hidden=“hidden” - loop：每当音频结束时重新开始播放
loop=“loop”
2. video 视频标签
<video src=""></video>
- src：必需的属性。它的值是视频的URL地址，也就是视频路径地址。
- autoplay：自动播放
autoplay=“autoplay” - controls：控制台
controls=“controls” - hidden：隐藏控制台
hidden=“hidden” - loop：每当音频结束时重新开始播放
loop=“loop” - height：视频播放器的高度
- width：视频播放器的宽度
3. embed 嵌入标签
<embed src="" type=""></embed>
- src：嵌入内容的 URL
- type：嵌入内容的类型
- height：嵌入内容的高度
- width：嵌入内容的宽度
九. marquee 飘动标签
用来插入一段滚动的文字。目前此标签已经过时，不推荐使用。
<marquee>飘动内容</marquee>
- loop：飘动的次数
- scrollamount：飘动的速度
- direction：飘动方向
left：从右向左
right：从左向右 - direction：飘动方向
- behavior：滚动方式
scroll：循环滚动，默认。
slide：滚动一次
alternate：两端来回滚动
十. table 表格标签
<table>
<caption>表头</caption>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>一行一列</td>
<td>一行二列</td>
<td>一行三列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
</tr>
</table>
- caption：表头
- th：文本自动居中、加粗
- tr：控制表格的行
- td：控制行中的单元格（列）
- border：表格的边框线
- bgcolor：背景颜色
- width：表格的宽度
- height：表格的高度
- cellpadding：单元格的内容与单元格之间的距离
- cellspacing：单元格与单元格之间的距离
- rowspan：设置单元格所占的行数（设置 td）
- colspan：设置单元格所占的列数（设置 td）
- align：设置文本的对齐方式（设置 td）
left：左对齐
center：居中对齐
right右对齐
十一. form 表单标签
<form action="http://www.baidu.com">
<input type="submit" value="提交">
</form>
- action：表单提交的URL地址
- method：表单的提交方式
get：默认的提交方式。提交的数据会显示在地址栏上。
post：提交的数据不会显示在地址栏上，传送的数据一般不受限制。 - name：表单的名称
十二. input 输入标签
<input type="">
- type： input 元素的类型
- value：input 元素的初始值
- placeholder：帮助用户填写输入字段的提示
- maxlength：输入字段中的字符的最大长度
- size：输入字段的宽度
- name：input 元素的名称
1. text 文本框
<input type="text">
2. password 密码框
<input type="password">
以小黑点形式显示输入的内容，比较安全。
3. file 文件上传
<input type="file">
- multiple：多选
multiple=“multiple”
4. radio 单选框
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
name名称相同情况下，只能单选
5. checkbox 多选框
<input type="checkbox" name="fruits">西瓜
<input type="checkbox" name="fruits">香蕉
<input type="checkbox" name="fruits">葡萄
- checked：默认选择的
checked=“checked” - disabled：不可选的，禁止选择
disabled=“disabled”
6. image 图片
<input type="image" src="" alt="错误" />
- src：图片的URL地址
- alt：图片无法显示情况，提示的文字
7. submit 提交按钮
<input type="submit" value="提交">
提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。
8. reset 重置按钮
<input type="reset" />
重置按钮会清除表单中的所有数据。
9.普通按钮
<input type="button" onclick="to()" />
定义可点击的按钮，但没有任何行为。可以结合onclick事件使用。
十三. textarea 文本域
<textarea rows="3" cols="20">
这是一个文本域。。
</textarea>
- rows：文本区内的可见行数
- cols：文本区内的可见宽度
- maxlength：文本区域的最大字符数
- placeholder：文本区域预期值的文字提示
- readonly：文本区为只读
十四. select 选择列表
1.选择列表
select>
<option>葡萄</option>
<option>香蕉</option>
<option>西瓜</option>
</select>
- size：下拉列表中可见选项的数目
- name：下拉列表的名称
- disabled：禁止该下拉列表项（设置option）
- selected：选项（在首次显示在列表中时）表现为选中状态
2.选项组
<select>
<optgroup label="一组"></optgroup>
<option>A</option>
<option>B</option>
<option>C</option>
<optgroup label="二组"></optgroup>
<option>D</option>
<option>E</option>
<option>F</option>
</select>
- label：定义当使用 时所使用的标注，选项组的名称。
十五. 行内标签、块级标签、行内块标签、行标签与块标签相互转换
1. 行内标签
可以多个标签存在一行，不能直接设置行内标签的宽、高，完全靠内容撑开宽和高。
常用的行内标签：
<span>、 <a>、 <big>、 <em>、 <i>、 <lable>、 <input>、 <select>、 <small> 、<strong>、 <sub> 、<sup>、 <u>、 <textarea>、 <img>
2. 块级标签
独占一行，可以设置宽、高。
如果不给宽度，块级标签的宽度将默认为浏览器的宽度，即100%。
常用的块级标签
<div>、 h系列、 <li>、 <p>、 <form>、 <ul>、 <ol>、 <table>、 <hr>、 <address>、 <dl>、 <dt>、 <dd>
3. 行内块标签
结合行内和块级标签的优点，不仅可以对宽、高属性生效，还可以多个标签存在一行显示。
常用的行内块标签：
<img>
4. 行标签与块标签相互转换
- 行标签转块标签：
display:block;
- 块标签转行标签：
display:inline;
- 转换为行内块标签：
display:inline-block;
十六. HTML三种常见页面布局方式
1. Frameset 布局
一些常见的后台管理系统大部分是用 Frameset 来布局的，所以固定了结构类的布局用 Frameset 来实现比较好。
2. Table 布局
是一种旧的布局方式，在现在的项目中还是很常见，Table 实际上它更适合做数据的展示，而非布局。但在 DIV + CSS 布局还没有流行起来之前，大量的网站是 Table 来布局。包括现在依然有人在使用。
缺点：
Table布局的话，只有把Table内的所有内容加载完成了，才会加载样式，所以加载速度要慢一些。Table布局属于表格形式，不利于SEO优化。Table对于页面布局来说，从语法上看是不正确的。
3. DIV 布局
现在最流行的一种布局方式，它相比比 Table 更灵活，定位比 Table 更好用，简单，修改起来也方便。