目录
一、基础知识
1.浏览器内核
- 浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
| 浏览器 | 内核 | 备注 |
| IE | Trident | IE、猎豹安全、360极速、百度 |
| firefox | Gecko | 火狐 |
| Safari | Webkit | apple浏览器 |
| chrome/Opera | Blink | 谷歌、欧朋，Blink为Webkit分支 |
| 国内 | Webkit/Blink | 360、UC、QQ、搜狗等 |
2.Web标准
- 由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
a).浏览器不同，显示页面或排版有差异；
b).好处：广泛的设备访问；广阔web发展前景；易被搜索引擎搜索；降低网站流量费；易于维护；提高浏览速度；
- Web标准的构成
a). 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面
| 标准 | 说明 |
| 结构 | 用于对网页元素进行整理和分类，现阶段主要为html |
| 表现 | 用于设置网页元素的板式、颜色、大小等外观样式，主要指CSS |
| 行为 | 指网页模型的定义及交互的编写，现阶段主要是JavaScript |
b). 最佳体验方式：结构、样式、行为相分离
结构写在HTML文件中，表现写在CSS文件中，行为写到JavaScript文件中
二、HTML（上）
1.语法规范
- 基本语法概述
a). 尖括号<html>
b). 成对出现<html></html>为双标签
c). 单个出现<br />为单标签
- 标签关系
a). 双标签关系分为包含关系和并列关系
2.基本结构标签
- 骨架标签
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 根标签 |
| <head></head> | 文档头部 | 必须要设置title |
| <title></title> | 文档标题 | 页面的网页标题 |
| <body></body> | 文档主题 | 包含文档的所有内容，页面内容 |
3.开发工具
- DW、Sublime、WebStorm10、Builder、Visual Studio Code
a). vscode 创建html文件，快捷键“！”可以直接生成骨架标签（！+tab）；
ctrl+加号：放大，ctrl+剪号：缩小
b).VScode生成骨架新增代码：<!DOCTYPE>标签、lang语言、charset字符集
- 文档类型声明标签
a). <!DOCTYPE>告诉浏览器使用哪种HTML版本来显示网页
b). 不属于html标签
- lang语言种类
a). 定义当前文档显示语言
b).en为英语网页
c). zh-CN为中文网页
d).对内容无影响，对某些浏览器可能会引起翻译功能
- 字符集
a). 字符集是多个字符的集合，以使计算机能够识别和存储各种文字
b).在<head>标签内，可通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
c)UTF-8 万国码，基本包含了全世界所有国家需要用到的字符（必须写，否则会乱码）
4.HTML常用标签
- 标题标签<h1> —— <h6>，独占一行。
- 段落和换行标签
a). <p></p>段落：会根据窗口大小自动换行，段落之间保有空隙。
b). <br /> 换行：无缝隙。
- 文本格式化标签
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者<b></b> | 推荐strong |
| 倾斜 | <em></em>或者<i></i> | 推荐em |
| 删除线 | <del></del>或者<s></s> | 推荐del |
| 下划线 | <ins></ins>或者<u></u> | 推荐ins |
- <div>和<span>标签
| div | span |
|---|---|
| 大盒子 | 小盒子 |
| 独占一行 | 一行可以有多个span |
- 图像标签和路径
a). 图像标签<img src="图像URL" />
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 路径 | 必须属性 |
| alt | 文本 | 图像不显示的文字提示 |
| title | 文本 | 鼠标悬浮在图片上显示的文字 |
| width | 像素 | 图像宽度 |
| height | 像素 | 图像高度 |
| border | 像素 | 图像边框粗细 |
b). 路径
| 相对路径 | 绝对路径 |
|---|---|
| 以引用文件所在位置为参考基础而建立出的目录路径（图片相对于HTML的路径） | 目录下的绝对位置，通常是从盘开始的。（或者图片存在网络中，引用网址） |
| 同级、下一级（/）、上一级（../） |
- 超链接标签
a). <a>
| 属性 | 作用 |
|---|---|
| href | 指定链接目标的url地址（必须属性），超链接功能 |
| target | 指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。 |
b). 外部链接/内部链接/空链接（#）/下载链接（压缩包或文件等）
c). 锚点链接：点击链接可快速定位到页面的某个位置。
· href属性中设置属性值为 #名字<a href="#one">
· 在目标位置标签中加一个id属性=名字<h1 id="one">
5.注释和特殊字符
- 注释
<!-- xxx -->
快捷键ctrl+/
- 特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格 | | |
| < | 小于 | < |
| > | 大于 | > |
| & | 和 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
三、HTML（下）
1. 表格标签--展示数据
- 表格
<table>
<tr>
<td>单元格内的文字</td>
</tr>
</table>
<table>定义表格，<tr>定义行，<td>定义单元格
- 表头单元格
a). 一般位于表格第一行或第一列，加粗居中显示
b). <th>标签表示表格的表头部分
<table>
<tr>
<th>姓名</th>
</tr>
</table>
- 表格属性
a). 不常用，后续通过CSS设置
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 表格相对周围元素对齐方式 |
| border | 1或"" | 表格是否有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认为1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认为2像素。 |
| width | 像素值或百分比 | 表格宽度 |
b). 写在table标签中
- 表格结构标签
a). 适用于长表格，分为表格头部和表格主体；
b). <thead> 表格头部 ，<tbody>表格主体
c). 放在table标签中
- 合并单元格
a). 跨行合并： rowspan="合并单元格个数"，最上侧为目标单元格
b). 跨列合并： colspan="合并单元格个数"，最左侧为目标单元格
2.列表标签--整理布局
- 无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
a). ul中只能放li标签，不能直接输入文字或其他标签
b). li相当于一个容器，可以放任何标签
c). 无序列表带有自己的样式属性（小黑点），实际开发中会用CSS设置
- 有序列表
<ol>
<li>列表1</li>
<li>列表2</li>
</ol>
a). ol中只能放li标签，不能直接输入文字或其他标签
b). 无序列表带有自己的样式属性（1,2,3），实际开发中会用CSS设置
- 自定义列表
<dl>
<dt>名词1</dt>
<dd>名词解释1</dd>
<dd>名词解释2</dd>
</dl>
a).无任何样式
b). dl中只能有dt和dd
c).可以有多个dt或dd，经常是一个dt对应多个dd
3.表单标签--收集用户信息
- 表单的组成
表单域、表单控件（表单元素）、提示信息三个部分组成
- 表单域
a). 表单域是一个包含表单元素的区域
b). <form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 指定表单的名称，区分同页面多表单 |
- 表单控件-input
<input type="属性值" />
| 属性值 | 描述 |
|---|---|
| button | 点击按钮（多数情况通过Javascript启动脚本） |
| checkbox | 复选框 |
| file | 输入字段和“浏览”按钮，供文件上传 |
| hidden | 隐藏的输入字段 |
| image | 图像形式的提交按钮 |
| password | 密码字段，字段被掩码 |
| radio | 单选 |
| reset | 重置，清除表单所有数据 |
| submit | 提交，把表单数据发到服务器 |
| text | 输入字段，默认宽度为20字符 |
a) 除了type以外，input还有其他属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | input的名称 |
| value | 由用户自定义 | input的值 |
| checked | checked | 规定此input首次加载时应当被选中（主要针对单选和复选按钮） |
| maxlength | 正整数 | 规定输入的字符最大长度 |
· name和value是每个表单元素都有的属性值，主要给后台人员使用
· name要求单选按钮和复选框要有相同的name值
b). <label>标签
· 为input元素定义标签（标注）
· 用于绑定一个表单元素，当点击<label>标签内文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
<label for="input的id名">用户名</label>
- 表单控件--select
<select>
<option>选项1</option>
<option>选项2</option>
</select>
a). 默认选中：selected="selected"
- 表单控件--teaxtarea
内容较多的情况，利用<textarea>，例如留言板、评论
<textarea rows="3" cols="20">
文本内容
</textarea>
a). cols="每行中的字符数",rows="显示行数"，实际开发中不会使用，使用css
来源：CSDN
作者：PP_zi
链接：https://blog.csdn.net/Zhou_ZiZi/article/details/103990397