学习HTML时简单做的笔记，上传记录一下。第一遍是看狂神的视频跟着敲代码写注释，隔几天之后再开2倍速看了老杜的视频，复习了一下，顺便补了一下markdown笔记。
视频链接在文末，如有错误请指正。
文章目录
1、系统结构
B/S架构 ：Browser / Server (浏览器/服务器的交互形式)
Browser支持的语言：HTML，CSS，Javascript
B/S架构的系统优缺点：
优点：升级方便，只升级服务器端代码即可。维护成本低。
缺点：速度慢、体验不好、界面不炫酷。
企业内部的解决方案一般都是采用B/S架构的系统，因为内部办公只需要能够做数据的增删改查即可，不需要好的用户体验，且企业内部更加注重维护的成本。
C/S架构：Client / Server (客户端/服务器端的交互形式)
C/S架构的系统优缺点：
优点：速度快，体验好，界面炫酷。
缺点：升级麻烦，维护成本高。
2、HTML介绍
W3C制定了HTML的规范，浏览器生产厂家都会遵守规范，HTML程序员也会按照这个规范去写代码。
目前最新规范是HTML5.0。
3、基本标签
<!--段落标记-->
<p></p>
<!--标题字-->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<!--换行,独目标记-->
<br/>
<!--水平线-->
<hr/>
<!--预留格式-->
<pre>
1
23
456
</pre>
<del>删除字</del>
<ins>插入字下划线</ins>
<!-- 粗体、斜体标签 -->
<strong>粗体</strong>
<em>斜体</em>
<b>粗体字</b>
<i>斜体字</i>
<!--上标-->
10<sup>2</sup>
<!--下标-->
10<sub>a</sub>
4、实体符号
<!--实体符号：以 & 开头，以 ; 结尾-->
a小于b：a<b <br/>
a大于b：a>b <br/>
空格：a b
5、表格
<!--表格table 行tr 列td-->
<table>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</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>
6、合并单元格 以及th标签
<!--合并单元格
1.row合并时，删除下方的单元格，rowspan="(合并单元格数)"
2.col合并时，对删除哪个没有要求，colspan="(合并单元格数)"
-->
<table border="1px">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td rowspan="2">2-3</td>
</tr>
<tr>
<!-- <td colspan="2">3-1</td>-->
<td colspan="2">3-2</td>
<!-- <td>3-3</td> -->
</tr>
</table>
<!--th标签也是单元格标签，比td多的是居中和加粗-->
<table border="1px" width="300px">
<tr>
<th>1</th>
<th>2</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
7、thead、tbody、tfoot
<!--三个标签的作用是便于JS可以灵活调用
（可自定义框取范围）
-->
<table>
<thead>
<tr>
<td>1-1</td>
</tr>
</thead>
<tbody>
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</tfoot>
</table>
8、图片
<!-- 单独设置width或height可等比例缩放图片 -->
<img src="图片地址" alt="图片加载失败时显示的提示信息" title="鼠标悬停文字" width="100px">
9、超链接
<!--
href：hot references 热引用
href属性后面一定是一个资源的地址，可以是网络中资源的路径，也可以是本地资源的路径
-->
<a href="https://www.baidu.com/">百度</a>
<a href="../resources/image/三三.jpg">百度</a>
超链接的作用：
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据（请求，request）
服务器向浏览器发送数据（响应，response）
B/S结构的系统，每一个请求都会对应一个响应。
用户点击超链接和用户在浏览器上直接输入URL，有什么区别？
本质上没有区别，都是向服务器发送请求。
从操作上来讲，超链接使用更方便。
10、列表
<!--有序列表order list-->
<ol type="I">
<li>水果
<ol type="a">
<li>苹果</li>
<li>葡萄</li>
</ol>
</li>
<li>蔬菜
<ol>
<li>土豆</li>
</ol>
</li>
</ol>
<!--无序列表unordered list-->
<ul>
<li>内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
<!--定义列表definition list
定义项:definition term
定义描述:definition description
-->
<dl>
<dt>内容</dt>
<dd>内容一</dd>
<dd>内容二</dd>
<dd>内容三</dd>
<dt>是内容</dt>
<dd>是内容一</dd>
<dd>是内容二</dd>
<dd>是内容三</dd>
</dl>
11、表单
<h1>注册</h1>
<!--表单form
action:表单提交的位置，网站或请求处理地址
method:post,get 提交方式
get:可以在url中看到要提交的信息，不安全，高效
post:比较安全，传输大文件
-->
<form action="1.基本标签+图片.html" method="get">
<!--文本输入框 ： input type="text"
value="默认初始值"
maxlength="5" 输入的最大字符数
size="30" 文本框的长度
-->
<p>名字 <input type="text" name="username"></p>
<!--密码输入框 ： input type="password"-->
<p>密码 <input type="password" name="pwd"></p>
<!--input 一定要在form中，否则无法提交-->
<!--单选框标签
input type="radio"
value:单选框的值提交给服务器
name:表示组，同一个组才能单选
-->
<p>
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!--多选框标签
input type="checkbox"
value:多选框的值
name:表示组
-->
<p>
<input type="checkbox" value="a" name="hobby"/>a
<input type="checkbox" value="b" name="hobby"/>b
<input type="checkbox" value="c" name="hobby"/>c
<input type="checkbox" value="d" name="hobby"/>d
</p>
<!--下拉框，列表框
-->
<p>国家
<select name="nation" id="1">
<option value="china" selected>中国</option>
<option value="usa">美国</option>
<option value="jap">日本</option>
</select>
</p>
<!--下拉框多选
multiple="multiple"表示支持多选，size表示显示的条数
需要按住ctrl进行多选
-->
<p>国家
<select name="nation1" multiple="multiple" size="2">
<option value="china" selected>中国</option>
<option value="usa">美国</option>
<option value="jap">日本</option>
</select>
</p>
<!--文本域-->
<p>是个文本域
<textarea name="textarea" id="2" cols="30" rows="10" disabled>文本内容</textarea>
</p>
<!--文件域
input type="file"
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!--邮箱验证email-->
<p>邮箱:
<input type="email" name="email">
</p>
<!--网址url-->
<p> url:
<input type="url" name="url">
</p>
<!--数字number step：步长-->
<p>数字:
<input type="number" name="num" id="3" max="1000" min="0" step="5">
</p>
<!--滑块
input type="range"
-->
<p>滑块:
<input type="range" name="range" min="0" max="100" step="5">
</p>
<!--搜索框-->
<p>搜索:
<input type="search" name="search">
</p>
<!--按钮
input type="button" 普通按钮
input type="image" 图像按钮（自动提交）
input type="submit" 提交按钮
input type="reset" 重置
-->
<!--hidden隐藏
disable禁用(不可选中),且不会提交
readonly只读-->
<!--增强鼠标可用性
点击label 可以直接选中for对应的id处的内容
-->
<p>
<label for="mark">点啊</label>
<input type="text">
<!-- <input type="text" id="mark">-->
</p>
<p>
<input type="text" id="mark"/>
</p>
<!--表单初级验证
placeholder 提示信息
required 非空判断
pattern 正则表达式(按需搜索填入)
-->
<p>
<input type="text" placeholder="提示信息" required>
<input type="text" name="diymail" pattern="">
</p>
<p>按钮
<input type="button" name="btn1" value="初始文字"/>
<!-- <input type="image" src="../resources/爱吃早餐的LuLu.jpg"/>-->
<!--提交按钮 提交至action： input type="submit"-->
<input type="submit"/>
<!--重置按钮 ： input type="reset"-->
<input type="reset"/>
</p>
</form>
12、DOM树
13、锚链接
<!--锚链接
1.需要一个锚标记
任意元素的id值都可以当作锚点
<any id=“id值”> </any>
2.跳转到标记
使用a标签
<a href=“#id值”>点击</a>
注意#的使用
-->
<!--超链接标签 a
href:链接路径(必填)
可以是网址，也可以是html文件，也可以做锚标记跳转
target:链接在哪个窗口打开，
_self:覆盖当前窗口（默认） _blank:在新窗口打开
<a href="">
之中可放置文本或图像用于链接
</a>
-->
<a href="https://www.baidu.com" target="">链接文本或图像</a>
<a href="基本标签+图片.html" target="">
<img src="../resources/爱吃早餐的LuLu.jpg" alt="图片加载失败返回内容" title="鼠标悬停文字" width="220" height="150">
</a>
<!--使用id作为标记-->
<a id="#12down">down</a>
<p><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/>👇<br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</p>
<!--锚链接
1.需要一个锚标记
任意元素的id值都可以当作锚点
<any id=“id值”> </any>
2.跳转到标记
使用a标签
<a href=“#id值”>点击</a>
注意#的使用
-->
<a id="top1">顶部</a>
<a href="#top1">去顶部</a>
<a href="基本标签+图片.html#top">另外一个网页的锚标记</a>
<a href="#12down">去down标签</a>
<p><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/>
<br/><br/><br/>👇<br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</p>
<a href="##top1">去顶部</a>
14、媒体元素-音视频
<!--音频和视频
src:资源路径
controls:控制条
-->
<video src="../resources/video/鞋子1.mp4" controls></video>
<hr/>
<audio src="../resources/audio/Loving%20Strangers.mp3" controls></audio>
15、内联框架
<!--内联框架iframe
src:地址
w-h:宽度高度
-->
<!--<iframe-->
<!-- src="https://www.bilibili.com" name="123" width="1500" height="1500">-->
<!--</iframe>-->
<iframe
src="" name="123" width="1500" height="1500">
</iframe>
<a href="1.基本标签+图片.html" target="123">点击在内联框架中跳转</a>
16、行内元素和块元素
块元素
无论内容多少，该元素独占一行
p，h1，h2，div，…
行内元素
内容撑开宽度，左右都是行内元素
a，strong，em，span,…
学习链接
【狂神说Java】HTML5完整教学通俗易懂
https://www.bilibili.com/video/BV1x4411V75C?spm_id_from=333.999.0.0
HTML全套基础教程-html实战开发-深入浅出HTML
https://www.bilibili.com/video/BV11t411K74Q?p=1
