HTML简单知识点整理+CSS
1. 简介
1.1 什么是HTML
Hyper Text Markup Language(超文本标记语言)
超文本包括：文字，图片，音频，视频，动画等
1.2 w3c标准
WOrld Wide Web Consortium(万维网联盟)，成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构
W3C标准包括：
- 结构化标准语言（HTML、XML）
- 表现标准语言（CSS）
- 行为标准（DOM、ECMAScript）
2. 网页基本标签
2.1 标题标签
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
2.2 段落标签
<p>
段落文字
</p>
2.3 换行标签
每一行的内容<br/>
2.4 水平线标签
<hr/>
2.5 字体样式标签
<strong>粗体文本</strong>
<em>斜体文本</em>
2.6 注释和特殊符号
<!--注释:这里说一下空格这个特殊字符： -->
&特殊符号；
固定格式：开头是& 结尾是；
中间是特殊符号的转义字符，使用的时候可以直接百度，或者用自动补全提示。
3. 列表标签
3.1 有序列表(ol)
<ol>
<li>有序列表元素1</li>
<li>有序列表元素2</li>
<li>有序列表元素3</li>
</ol>
3.2 无序列表(ul)
<ul>
<li>无序列表元素1</li>
<li>无序列表元素2</li>
<li>无序列表元素3</li>
</ul>
3.3 自定义列表(dl)
<dl>
<dt>自定义列表1</dt>
<dd>自定义列表1的元素1</dd>
<dd>自定义列表1的元素2</dd>
<dd>自定义列表1的元素3</dd>
<dt>自定义列表2</dt>
<dd>自定义列表2的元素1</dd>
<dd>自定义列表2的元素2</dd>
<dd>自定义列表2的元素3</dd>
</dl>
<!--
标签说明：
<dl></dl>：自定义列表
<dt></dt>：自定义列表名称
<dd></dd>：自定义列表元素
-->
4. 表格标签
<!--标签说明：
<table></table>：表格标签；
<tr></tr>：行标签；
<td></td>：列标签；
border：参数，用来表示表格的边框大小，是<table></table>标签的参数；
bgcolor：参数，用来表示具体单元格的填充颜色，可以是<table></table>、<tr></tr>和<td></td>标签的参数，当三个标签都设置了该参数时，优先级顺序从高到底依次为：<td></td>、<tr></tr>、<table></table>。
标签说明：
colspan：是标签<td></td>的参数，后面跟数字，代表当前行当前列的单元格要跨几个列；
-->
<table border="1px">
<tr>
<td colspan="2">1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
5. 图像标签
src是必选项，其他为可选项；src建议使用相对路径；
6. 音视频标签
<video src="资源的相对路径" controls autoplay height="300" width="300"></video>
<audio src="资源的相对路径" controls autoplay height="300" width="300"></audio>
<!--
标签和参数说明：
<video></video>：视频标签；
src：video标签参数，视频资源的相对路径；
controls：video标签参数，网页对应处可现实播放控件；
autoplay：video标签参数，自动播放视频；
height，width：视频界面的长宽。
-->
7. 超链接标签
7.1 页面间链接
<body>
<a href="hello.html" target="_self">点击我打开hello页面</a>
<br/>
<a href="https://www.baidu.com" target="_blank">点击我打开百度页面</a>
</body>
<!--
<a></a>：超链接标签；
href：<a></a>标签的参数，后面的path参数填写链接的路径，表示要跳转哪个页面，可以是html文件，也可以是域名；
target：<a></a>标签的参数，表示链接在哪个窗口打开，可选的参数主要有以下两个：
_blank：点击链接后跳转页面在新的窗口打开；
_self：点击链接后跳转页面在当前窗口打开；
链接文本或图像：这一部分是点击链接文本或者图像可以跳转到另一个页面，相当于一个入口。
-->
7.2 锚链接
- 通过锚链接我们可以实现页面内的跳转，比如我们想选定目录树中某个章节时，可以通过点击目录树中章节对应的位置直接跳转到对应内容，也可以应用在网页中返回顶部这个功能。
- 锚链接意思是预先设置好一个锚点，即本页面中要跳转过来的地方，再后面要跳转时直接通过a标签即可。
锚点：
<a name="锚点名称">锚点描述性文字</a>
抛向锚点：
<a href="页面#锚点名称">抛锚描述性文字</a>
注意这里可以不只是局限在本页面，也可以抛向其他页面的特定位置，格式为"其他页面#锚点名称"，锚点名称前用#标记
7.3 功能性链接
<!--邮件链接-->
<a href="mailto:1169784508@qq.com">点击联系我</a>
<!--QQ链接-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::51" alt="加我带你看电影" title="加我，带你看电影"/></a>
8. 块内元素和行内元素
块内元素和行内元素是一元素的一种组织布局方式。
块内元素:比如行标签、标题标签等;
行内元素:比如字体标签等。
9. 页面结构分析
10. iframe内联架构
frame内联结构用在在一个网站中打开另一个网站。
<body>
<iframe src="https://www.baidu.com" width="1000" height="800"></iframe>
</body>
11. 表单post提交和get提交(form)
post和get的区别：
get：我们可以在url中看到我们提交的信息，比如用户名和密码，不安全；
post：适合传输大文件，在url中看不到我们提交的信息，但是在审查元素里的header信息里还是可以看到；
<body>
<h1>登录</h1>
<form method="get" action="hello.html">
<p>用户名：<input type="text" name="userName"></p>
<p>密码：<input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
12. 多选框和单选框
12.1 单选框（radio）
参数说明：
每一个input是一个单选框的选项，要想真正只能同时勾选1个单选项，其他的勾选不了，几个单选框的name必须是同一个；
checked：默认是哪个选项被勾选；
选项值在标签外面。
<P>
<input type="radio" value="men" name="sex"/>男
<input type="radio" value="women" name="sex"/>女
</P>
12.2 多选框(checkbox)
<p>
兴趣
<input type="checkbox" value="coding" name="hobby">编程
<input type="checkbox" value="LOL" name="hobby">LOL
<input type="checkbox" value="eating" name="hobby">吃饭
<input type="checkbox" value="sleeping" name="hobby">睡觉
</p>
12.3 按钮(button)
<p>
按钮
<input type="button" value="这是个按钮">
</p>
13. 列表框、文本域和文件域,搜索框、滑块和简单验证
<body>
<!--表单登录-->
<form action="hello.html" method="get">
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
<p>密码：<input type="password" name="pwd" required></p>
<!--单选框radio-->
<p>性别：
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框checkbox-->
<p>爱好：
<input type="checkbox" value="sleep" name="hobby">睡觉
<input type="checkbox" value="code" name="hobby">敲代码
<input type="checkbox" value="game" name="hobby">玩游戏
<input type="checkbox" value="basketball" name="hobby">打篮球
</p>
<!--列表框select-->
<p>国家：
<select name="列表名称">
<option value="China">中国</option>
<option value="USA">美国</option>
<option value="Portugue">葡萄牙</option>
<option value="Brazil">巴西</option>
</select>
</p>
<!--文本域textarea-->
<p>文本域：
<textarea name="textarea" cols="30" rows="10">输入内容</textarea>
</p>
<!--文件域file-->
<p>上传文件：
<input type="file" name="files">
<input type="button" name="upload" value="上传">
</p>
<p>邮箱：
<input type="email" name="email">
</p>
<p>URL:
<input type="url" name="url">
</p>
<!--滑块(range)-->
<p>数量：
<input type="number" name="num" min="0" max="100" step="5">
</p>
<p>音量：
<input type="range" name="voice" min="0" max="100" step="2">
</p>
<!--搜索框(search)-->
<p>搜索：
<input type="search" name="search">
</p>
<p>
<input type="button" name="btn1" value="点击变长">
<input type="image" src="../resources/img/yy.jpeg" height="160" width="160">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
14. div标签
<!--
<div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。
-->
<body>
<div id="1" style="background-color: blue">
这是div蓝色区域
</div>
<div id="2" style="background-color: red">
这是div红色区域
</div>
<div id="3" style="background-color: green">
这是div绿色区域
</div>
</body>
