- 从这篇笔记开始总结看过的《从0到1 HTML+CSS+JavaScript》书籍笔记，记录HTML以及CSS的相关知识点，为之后从事相关工作打好基础
- 简单介绍
- 基本标签
- 文本
- 列表
- 表格
一.简单介绍
- HTML：超文本标记语言，HTML是一门描述性的标记语言
- CSS：层叠样式表，用来控制网页外观的一种技术
- JavaScript: 嵌入到HTML页面的脚本语言，由浏览器一边解释一边执行
- HTML用于控制网页的结构，CSS用于控制网页的外观，JavaScript用于控制网页的行为
1.1HTML
① 概念：超文本标记语言，是网页的标准语言，并不是一门编程语言，而是一门描述性的标记语言
② 语法：<标签符>内容</标签符>
③ 说明：标签符一般都是成对出现的，包含一个“开始标签”和一个“结束标签”
④ 学习HTML就是学习各种标签，搭建网页的骨架
二.基本标签
2.1 HTML结构
1. 基本结构
- <!DOCTYPE html>:文档声明，表明这是一个html页面
- <html></html> : 告诉浏览器，这个页面是从<html>这个标签开始，然后到</html>这个标签结束
- <head></head> ：网页的头部，用于定义一些特殊的内容，比如页面标题，定时刷新，外部文件等
- <body></body>: 网页的身体
2. head标签
只有6个标签可以放到head中，title标签，meta标签，link标签，style标签，script标签，base标签
① title标签：定义网页的标题
② meta标签：定义页面的特殊信息，比如页面关键字，描述等，不是提供给用户看的，而是提供给搜索引擎蜘蛛看的，meta的作用就是告诉“搜索蜘蛛”这个页面是做什么的
- name属性
（1）name属性的取值
| 属性值 | 说明 |
| keywords | 网页的关键字，可以是多个 |
| description | 网页的描述 |
| author | 网页的作者 |
| copyright | 版权信息 |
（2）name属性的语法
<meta name="viewport" content="width=device-width, initial-scale=1.0">- http-equiv属性
作用1：定义网页所使用的编码
语法：
<meta http-equiv="Contentype-Type" content="text/html; charset=utf-8">在HTML5中的简写形式，必须放在title标签以及其他meta标签前面
<meta charset="utf-8">作用2：定义网页自动刷新跳转
语法：
<meta http-equiv="refresh" content="6;url=http://www.lvyestudy.com">含义：表示当前页面6秒后会自动跳转到url指向的这个页面，很多小广告就是这种方式实现定时跳转的③ style标签
- 定义元素的CSS样式
- 语法
<html>
<head><style>/* 这里写CSS样式 */</style>
</head>
<body>
</body>
</html>
④ script标签
- 定义页面的JavaScript代码，也可以引入外部的JavaScript文件
- 语法
<html>
<head>
</head>
<body><script>/*这里写JavaScript代码*/</script>
</body>
</html>⑤ link标签
- 引入外部样式文件（CSS文件）
- 语法
<link type="text/css" rel="stylesheet" href="css/index.css">3.body标签
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body></html>4.注释
三. 文本
3.1 标题标签
① 在html中，共有6个级别标签：h1, h2, h3, h4, h5, h6, h1标签的重要性最高，h6标签的重要性最低
② 一个页面只能有一个h1标签，而h2到h6可以有多个
③ title和h1标签的区别
- title标签是用于显示地址栏的标题
- h1标签是显示文章的标题
3.2 段落标签
① <p></p> ：段落标签，用来显示一段文字，段落标签会自动换黄，并且段落和段落之间有一定的间距
②<br/>: 换行标签，对文字进行换行处理，br标签是自闭和标签
3.3 文本标签
作用：对文字进行修饰，比如粗体，斜体，上标，下标(下面红色标签需要重点掌握)
① 粗体标签： <strong></strong> 或 <b></b>，尽量使用strong标签，更加具有语义化
② 斜体标签：<i></i> <em></em> <cite></cite>, 尽量使用em标签，语义化更好
③ 上标标签：<sup></sup>标签，比如表示平方，次方等,把数字或某些文字放到这个标签中，就可以变成上标
④ 下标标签：<sub></sub>,比如表示一些化学物质，硫酸分子等
⑤ 中划线标签：<s></s>标签，也成为删除线，常用于商品促销的标价
⑥ 下划线标签：<u></u>, 实现文本的下划线效果
⑦ 大字号标签和小字号标签：<big></big> <small></small>
3.4 水平线标签
① hr标签实现水平线效果
3.5 div标签
- div标签来划分HTML结构，配合CSS来整体控制某一块样式
3.6 自闭合标签
- 一般标签：有开始符号和结束符号，可以在内部插入其他标签或文字
- 自闭合标签：只有开始符号没有结束符号，不可以在内部插入其他标签或文字
| 标签 | 说明 |
| <meta/> | 定义网页的信息（供搜索引擎查看） |
| <link/> | 引入“外部CSS文件” |
| <br/> | 换行标签 |
| <hr/> | 水平线标签 |
| <img/> | 图片标签 |
| <input/> | 表单标签 |
3.7 块元素和行内元素
① 块元素
- 在浏览器显示状态下将独占一整行，排斥其他元素与它在同一行
- 一般情况下，块元素内部可以容纳其他块元素和行内元素
② 行内元素
- 行内元素只能容纳其他行内元素，不可以容纳块元素
3.8 特殊符号
① 空格：
② 特殊符号：以&开头，以;结尾，需要通过代码实现（本书42页可以查阅）
四.列表
列表分为三种：有序列表，无需列表，定义列表
- 有序列表：列表项有先后之分
- 无序列表：列表项之间没有先后顺序之分
- 定义列表：一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分
4.1 有序列表
① 有序列表中各个列表项是有顺序的
② 语法：
<ol><li>列表项</li><li>列表项</li><li>列表项</li>
</ol>③ ol表示有序列表，li表示列表项，一个有序列表可以包含多个列表项
④ ol的子标签只能是li标签，不能是其他标签
⑤ type属性
语法：
<ol type="属性值"><li>列表项</li><li>列表项</li><li>列表项</li>
</ol>type属性的取值：
| 属性值 | 列表项符号 |
| 1 | 阿拉伯数字：1 2 3 4 |
| a | 小写英文字母：a, b, c, ... |
| A | 大写英文字母：A，B, C... |
| i | 小写罗马数字：i, ii, iii... |
| I | 小写罗马数字：I， II， III... |
4.2 无序列表
① 无序列表的列表项是没有顺序的
② 语法
<ul type="属性值"><li>列表项</li><li>列表项</li><li>列表项</li>
</ul>③ ul 无序列表，li 列表项
④ ul和li标签需要配合一起使用，不可以单独使用，ul标签的子标签只能是li标签，不能是其他标签
⑤ ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加
⑥ type属性
语法：
<ul type="属性值"><li>列表项</li><li>列表项</li><li>列表项</li>
</ul>取值：
| 属性值 | 列表符号 |
| disc | 实心圆 |
| circle | 空心圆 |
| square | 正方形 |
4.3 定义列表
① 定义列表由两部分组成：名词和描述
② 语法
<dl><dt>添加要解释的名词</dt><dd>添加该名词的具体解释</dd>
</dl>③ dl 定义列表，dt 定义名词， dd定义描述
五.标签语义化
目的：不是为了记住所有标签，而是在你需要的地方能使用正确的语义化标签，学会把标签用在对的地方
六.表格
6.1 表格基本结构
① 表格的组成部分
- 表格：table标签
- 行：tr标签
- 单元格：td标签
② 语法：
<table><tr><td></td><td></td><td></td><td></td></tr></table>③ 说明
- tr表示行，td表示表格单元格
- 有多少组tr，就有多少行
6.2 表格完整结构
① caption 表格标题：一个表格只能有一个标题，默认情况下，标题位于整个表格第一行
② 默认情况下表格是没有边框的
③ 表头单元格 th:
- 单元格有两种，表头单元格（th）和表格单元格(td)
- 浏览器会以“粗体”和“居中” 来显示th标签的内容，td不会
- th用于表头，td用于表行
6.3 语义化
HTML引入了thead, tbody, tfoot三个标签，把表格划分成三部分，表头，表身，表脚
使代码更加语义化，方便用分块控制表格CSS的样式
6.4 合并行
① rowspan 属性来合并行：纵向合并n个单元格
② 语法： <td rowspan="跨域的行数"></td>
6.5 合并列
① colspan属性来合并列: 横向的N个单元格
② 语法：<td colspan="跨域的行数"></td>
七.图片
7.1 图片标签
① 图片标签用来显示一张图
② <img src="" alt="" title="" />
1. src属性
① 用于指定这个图片所在的路径，路径可以是相对路径，也可以是绝对路径
② 语法：<img src="img/picture.png">
③ 任何一张图必须指定src属性才可以显示，src属性是img不可缺少的属性
2. alt属性和title属性
- alt属性用于图片描述，这个描述文字是给搜索引擎看的，当图片无法展示时，页面会显示alt 中指定的文字
- tiltle属性用于图片描述，这个描述文字是给用户看的，当鼠标指针移到图片上时，会显示title中的文字
7.2 图片路径
① 绝对路径：图片在计算机中的完整路径
② 相对路径：图片相对当前页面的为止
③ 在实际开发中，不管是图片还是超链接，一般都使用相对路径，几乎不会使用绝对路径
③ 在使用图片时，建议图片名或者文件夹名都使用英文名
7.3 图片格式
① 位图
- 又称为像素图，它是由像素点组成的图片，放大图片后，图片会失真
- 缩小图片后，图片同样也会失真
- 最常见的位图格式 jpg, png, gif
- jpg格式可以很好的处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片，高清，图片等，jpg格式的图片体积比较大，不支持保存透明背景
- png格式是一种无损格式，可以无损压缩以保证页面打开速度，png格式的图片体积较小，并支持保存透明背景，不过不适合存储颜色丰富的图片
- gif格式的图片效果最差，不过它适合制作动画
- 如果想要展示颜色丰富的高质量图片，就使用jpg格式；如果是一般图片，为了减少体积或者想要透明效果，可以使用png图片，如果是动画图片，可以使用gif格式
② 矢量图
- 又称为向量图，以一种数学描述的方式来记录内容的图片格式
- 优点是无论图片放大，缩小或者旋转都不会失真
- 最大缺点就是难以表现色彩丰富的图片
- 常见格式：.ai .cdr .fh .swf swf的格式比较常见，它指的是flash动画
③ 矢量图和位图的区别
- 位图适用于展示色彩丰富的图片，矢量图不适合展示色彩丰富的图片
- 位图的组成单位“像素”， 矢量图的组成单位是“数学向量”
- 位图受分辨率影响，当图片放大时会失真，而矢量图不受分辨率影响，图片放大时不会失真
- 网页中的图片绝大多数都是位图，而不是矢量图
八. 超链接
1.超链接简介
超链接能够在各个独立的页面之间方便地跳转
① a标签
- 语法： <a href="链接地址">文本或图片</a>
- href: 表示你想要跳转到的页面的路径，可以是相对路径，也可以是绝对路径
- 将文本设置成超链接称为“文本超链接”， 将图片设置为超链接称为“图片超链接”
- 不管是哪种超链接，都是把文字或者图片放到a标签内部来实现的
② target属性
- 用来定义超链接打开窗口的方式
- 语法：<a href="链接地址" target="打开方式">文本或图片</a>
- target的属性取值
| 属性值 | 说明 |
| _self | 在原来窗口打开链接（默认值） |
| _blank | 在新窗口打开链接 |
| _parent | 在父窗口打开链接 |
| _top | 在顶层窗口打开超链接 |
2.内部链接
① 外部链接：“外部网站”的页面
② 内部链接：自身网站的网页
3.锚点链接
① 锚点链接：内部链接的一种，链接地址指向的是当前页面的某个部分
② 单击某一个超链接，就会跳到当前页面的某一部分
③ 实现方式
- 目标元素的id
- a标签的href指向该id
- 给a标签的href属性赋值时，需要在id前面加上"#", 用来表示这是一个锚点链接
<a href="#article">推荐文章</a>
<a href="#music">推荐音乐</a><div id="music"><h3>推荐音乐</h3><ul><li>歌曲1</li><li>歌曲2</li><li>歌曲3</li></ul>
</div>九.表单
9.1 简单介绍
① 表单的主要作用：在浏览器端收集用户信息，将数据交给服务器来处理
② 表单标签：form input textarea select option
③ 外观：
- 单行文本框
- 密码文本框
- 单选框
- 复选框
- 按钮
- 文件上传
- 多行文本框
- 下拉列表
9.2 form标签
① 将所有表单标签放在form标签内部
② form标签属性
| 属性 | 说明 |
| name | 表单名称 |
| method | 提交方式 |
| action | 提交方式 |
| target | 打开方式 |
| enctype | 编码方式 |
- name属性
作用：为了区分页面中的表单，可以使用name属性给表单命名
<form name="myForm"></form>- method属性
作用：用于指定表单数据使用哪一种http提交方法，一种是get; 一种是post, get的安全性较差，post的安全性较好，大多数情况下使用post
<form method="post"></form>- action 属性
作用：指定表单数据提交到哪个地址进行处理
<form action="index.php"></form>- target属性
作用：指定窗口的打开方式，与a标签的target属性值是一样的，一般情况下只会用到_blank这一个属性
<form target="_blank">- enctype属性
作用：指定表单数据提交的编码方式，一般情况下，不需要设置，除非用到上传文件功能
9.3 Input标签
① input 是自闭合标签，没有结束符号
<input type="表单类型"/>② type的属性值
| 属性值 | 说明 |
| text | 单行文本框 |
| password | 密码文本框 |
| radio | 单选框 |
| checkbox | 多选框 |
| button submit reset | 按钮 |
| file | 文件上传 |
9.4 单行文本框
- 语法： <input type="text" value="hello">
- 属性：
| 属性 | 说明 |
| value | 设置单行文本框的默认值，在默认情况下单行文本框显示的文字,如果没有设置，文本框就是空白的 |
| size | 设置单行文本框长度，一般不会使用，都是使用css属性控制 |
| maxlength | 设置单行文本框中最多可以输入的字符数 |
9.5 密码文本框
① 在密码文本框中输入的字符不可见
② 语法： <input type="password">
③ 密码文本框属性
| 属性 | 说明 |
| value | 设置密码文本框的默认值，在默认情况下密码文本框显示的文字,如果没有设置，文本框就是空白的 |
| size | 设置密码文本框长度，一般不会使用，都是使用css属性控制 |
| maxlength | 设置密码文本框中最多可以输入的字符数 |
9.6 单选框
① 单选框是使用input标签来实现的，type属性值为"radio"
② 语法：<input type="radio" name="组名" value="取值">
③ name属性表示单选按钮所在的组名，value属性表示单选按钮的取值，这两个属性必须设置
④ 举例
<input type="radio" name="gender" value="男">男<input type="radio" name="gender" value="女">女⑤ 对于这一组单选按钮，只能选中其中一项，不能同时选中两项
⑥ 默认让一个选中：使用checked属性，没有属性值是因为采用的是简写形式
<input type="radio" name="gender" value="男" checked>男<input type="radio" name="gender" value="女">女⑦ 对于同一组的单选框，name的值必须相同
9.7 复选框
① type的属性为checkbox
② 复选框可以选择多项
③ 语法：<input type="checkbox" name="组名" value="取值">
④ name属性表示复选框所在的组名，value属性表示复选框的取值，这两个属性都必须要设置
⑤ 让复选框选中也可以使用checked属性来实现
9.8 按钮
常见按钮：普通按钮（button） 提交按钮（submit） 重置按钮（reset）
value 就是按钮上的文字
① 普通按钮：<input type="button" value="取值"/>
② 提交按钮：<input type="submit" value="取值"/>
③ 重置按钮：<input type="reset" value="取值"/>
- 点击重置按钮之后，表单中的内容被清空了，但是重置按钮只能清空它 “所在form标签” 内表单的内容，对于当前所在form之外的表单清除是无效的
④ 三种按钮的区别
- 普通按钮一般情况都是配合JavaScript来进行各种操作的
- 提交按钮一般都是用来给服务器提交数据的
- 重置按钮一般是用来清空用户在表单中输入的数据的
button标签 <button></button>
9.9 文件
① 通过input标签来实现，type的属性取值为file
<input type="file">9.10 多行文本框
① 多行文本框可以输入多行文字，多行文本框使用的是textarea标签
② 语法：
<textarea rows="行数" cols="列数" value="取值">默认文本<textarea>③ 多行文本框的默认显示文本是在标签对的内部设置，而不是在value属性中设置的
9.11 下拉列表
① 使用select和option两个标签来配合使用
<select><option>选项内容</option><option>选项内容</option>
</select>② select标签属性
- multiple 设置下拉列表可以选择多项，使用ctrl + 鼠标左键 来进行选取
- size 设置下拉列表显示几个列表项，取值为整数
<select multiple><option>选项内容</option><option>选项内容</option>
</select>③ option标签属性
- selected: 是否选中
- value: 选项值
<select multiple><option selected>选项内容</option><option value="选项值">选项内容</option>
</select>十.框架
① iframe标签：实现一个内嵌框架，内嵌框架是指在当前页面再嵌入另外一个网页
② 语法：<iframe src="链接地址" width="数值" height="数值"></iframe>
③ src是必选的，用于定义链接页面的地址，width和height这两个属性是可选的，分别用于定义框架的高度和宽度
④ 也可以同时嵌入多个页面
