HTML不是编辑语言，是标记性语言
快捷方式(易忘)
a.纵向全选：shift+alt+光标下拉
b.创建多个标签同时class有改变 div.t$aa$*3+Tab（$表示可以更改的数字）
c.标签的嵌套: ul>li+Tab (>表示父子关系)
d.兄弟标签： div+p +Tab（+表示兄弟关系）
e.编辑标签文本内容{ }：div{123}*2+Tab
一.标签
1.文本标签
(1)h1~h6：文字都加粗，1~6标题大小逐步减小，独占一行
<small></small>：一般用在h标记里面，比对应的h标记小一号
(2)换行标签(单标签) : <br/>
(3)水平标签(单标签) ： <hr/> --分割线
(4)段落标签：<p>段落</p>
(5)<pre>预处理，会保留原有的格式</pre> --不推荐使用
特点：独占一行，段落之间存在间隙
<cite>李白</cite>：引用的内容出自某处或某人
<blockquote>朝辞白帝彩云间</blockquote>：表示引用一段话(如名人名言等),单独占一行，有 默认外边距
<q>引用</q>：显示效果是"" 把内容包裹
<time>2020-05-03</time>:表时间、日期
<data value="500">10%</data>：数据文本
<address>地址：xxx小区</address>：用于地址文本，内容显示斜体
<abbr title="html 网页编写标记语言">HMTL</ abbr>：用于专业术语文本
<code>var age=10</code> ：表示内容是一段代码，显示为等宽字体
1.1行标签，不独占一行:
<span>有间隔的问字段</span>
strong/b:加粗字体
ins/u:下划线
em/i:倾斜
del/s:删除
标红更强调语义
<mark>文本中关键词的标记，背景为黄色</mark>
<sup>上标</sup> <sub>下标</sub>
img标签
<img src="图片路径" alt="图片加载有误的提示内容" title="鼠标悬停的提示文字"
loading = "lazy">
loading = "lazy":图片懒加载，用户可视区的图片在加载显示，看不见的区域先不加载。
可以提高网页速度，节省带宽(流量)。
<!-- figure和figcaption都是块级元素，包裹图片可用(取代div) -->
<figure>
<img src="" alt="">
<figcaption>图片的描述</figcaption>
</figure>iframe标签：
iframe 是一个网页容器，在一个区域显示其他网页内容。
src属性值可以是网页地址(url地址或者相对路径)，也可以是图片、视频地址
<!-- frameborder="0" 默认边框为0 -->
<!-- allowfullscreen 一般用于视频，表示全屏按钮 -->
<iframe src="https://youku.com" width="800" frameborder="0" allowfullscreen></iframe> (1)视频标签 video
目前只支持三种格式：MP4 WebM Ogg
<!-- controls 视频控件 -->
<!-- autoplay 自动播放(有些浏览器会限制自动模仿，影响用户体验)
muted 静音，和autoplay搭配使用，可以实现静音自动播放
-->
<!-- loop 循环播放视频 -->
<!-- poster="图片路径" 设置封面图片 -->
<!-- preload = "auto" 省略不写 自动加载缓冲 -->
<video src="视频路径" controls autoplay muted loop poster="图片路径"></video>(2)音频标签 audio
目前只支持三种格式：MP3 Wav Ogg
<!-- controls：显示播放的控件 -->
<!-- autoplay：自动播放 -->
<!-- muted：静音 -->
<!-- loop：循环播放 -->
<audio src="音频路径" controls autoplay muted loop></audio>(3)链接标签
<a href="链接"></a>
href：跳转地址（内部链接、外部链接、空链接 #/javascript:;）
target:目标属性（_self：默认当前窗口打开 _blank:新窗口打开）
锚链接：在长篇文章中，可以使用它快速跳转
<a href="#art">目录</a>
<p id="art">文章</p>
2.网页布局元素
<div>普通盒子</div>
<header>网页头部</header>
<nav>网页导航</nav>
<main>网页主体部分,一个网页就一个 </main>
<section>独立主体,取代div </section>
<aside>侧边栏</aside>
<article>文章或帖子</article>
<footer>网页底部</footer>
二.转义符
一个空格
  半角符合，一个英文字母的宽度，半个中 文字符的宽度
  全角符合，2个字母的宽度，一个中文字 符的宽度。
<: < >:> 换行： \n 回车： \r
三.路径
相对路径：
同级目录：直接写路径
下级目录：文件名/路径
上级目录：../文件名/路径 (往上几层就有几个 ../)
绝对路径：
1.盘符地址 2.完整的网络地址
四.列表
无序列表
默认显示小圆点 没有顺序的列表 edg: 新闻列表
<ul>
<li></li>
</ul>注意：ul只能嵌套li标签，li标签里面可以嵌套其他任意标签
有序列表
默认有顺序的数字标号 有顺序的列表 edg：榜单
<ol type = "1" start = "5" reversed> <-- 从5倒叙排-->
<li></li>
</ol>属性：type='1' type='a' type='A' type='I'
自定义列表
使用在网页的底部导航中
<dl>
<dt>列表的主题</dt>
<dd>列表的内容</dd> -->会自动默认显示缩进效果
</dl>五.表格
<table>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>table: 表格整体，可以包裹多个tr
tr：表示表格行，可以包裹td
td：表格的单元格，可以包裹内容
* border 边框宽度
* widht 表格宽度
* height 表格高度
* cellpadding 定义单元格与内容之间的距离
* cellspacing 定义单元格与单元格之间的距离
以上所设置的属性的值都是数字，单位都是px
* align：单元格水平方向上的对齐方式
<table cellpadding="10" cellspacing="2" border="10">
<caption>表格标题,文字居中</caption>
<thead>
<tr>
<th>表头</th>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<tbody>
<tr>
<td>内容11</td>
<td>内容22</td>
<td>内容33</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>内容11</td>
<td>内容22</td>
<td>内容33</td>
</tr>
</tfoot>
</table>
单元格合并
* rowspan：跨行合并，将多个单元格垂直合并
* colspan：跨列合并，将多个单元格水平合并
注意：
只有同一结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead，tbody，tfoot）
六.表单（重点）
常用于 用户登录页面、问卷调查、门诊预约等。。。
1.form表单
form标签内包含很多表单控件表 单可以允许用户输入数据并通过form 标签传递数据到后端服务器(form表单控件通常 都有一个name属性，通过name属性可以把表单控件获取的值传递到后端)
action：数据传输的地址(传输到后端的一个网址)
method: 传输数据的方法（有两种）
1. get 请求(默认): 数据以查询参数方式传递
优点: 传输速度快
缺点: 1. 直接在url传递数据，不太安全。2. 只能传递字符串，传输大小有限制。
2. post 请求数据通过请求体传递
优点: 数据相对安全，可以传递多种数据格 式,可以传输大量数据。
缺点: 传输速度没有get快,请求的获取相对 get复杂点
enctype：指定post请求数据的传输格式(MIME类 型,后端根据不同的类型，处理方式不一样)
1.application/x-www-form-urlencoded :默认数据类型，控件的name属性和属性值要转义(非数字和字母转义为%**)
2.multipart/form-data :主要用于文件上传，当上传文件时，会把文件分块上传，每一块的http请求信息都有content-disposition属性,值为form-data和一个name属性 如果要上传文件，必需设置为该格式
<form action="http://www.baidu.com" method="post" enctype="multipart/form-data">
....
</form>
action: 将信息提交到的地方(网址)
method：后台请求方式2. input 控件
input 输入框控件
name：一般是form表单内的控件才用，可以重复
value：可设置控件的值
type：决定input标签显示的形态(text、password、radio、checkbox...)
1. password：密码框，输入内容会被隐藏
2. submit：显示为一个按钮，点击按钮，可以把 form表单内的控件的值发送到后端
value的值是按钮显示文本(默认是”提交“)
3. reset：一个重置按钮，可以重置 输入控件未初始值
value 的值是按钮显示文本
4. button：显示一个普通按钮，没有功能
value 的值是按钮显示文本
5. text：文本框
6. number：数字输入框,只能输入数字,可以输入e(e 表示科学计数法里面的次幂)
min 最小值 (递减按钮生效)
max 最大值(递增按钮生效)
step 步长(递增递减按钮每次的长度，默认递增是1)
<form>
<input type="button" value="button" placeholder="这是一个文本输入框">
<input type="reset" value="renew">
<input type="submit" value="确认提交">
<input type="password" value="password">
<input type="text" value="默认文本">
<input type="number" name="" id="">
</form>7. radio：单选按钮
value 表示选中的值，必填
name 属性必填，一组单选框的name属性要一致才能实现单选
checked 表示默认选中
8. checkbox：多选框
value 表示选中的值，必填
name 属性必填，一组单选框的name属性要一致
checked 表示默认选中
label标签：表单控件的文字说明标记，一般用于 form表单里面，可以管理一个输入控件
1. 输入控件设置一个id属性
2. label标签的for属性值为输入控件的id属性值，则会自动关联对应的输入控件
<form>
<input type="radio" value="man" name="sex" id="man" /> <label for="man">男</label>
<input type="radio" value="woman" name="sex" id="woman" /> <label for="woman">女</label>
//name的属性值保持一致时，才能实现多选一
<input type="checkbox" name="" id="">11
<input type="checkbox" name="" id="" checked>22
//checked表示默认选中的属性
</form>其他不常用属性：
color： 颜色选择器
email： 邮箱输入框,如果不是输入的邮箱格式提交 会有提示
tel： 电话号码输入框，一般需要配合正则才行
url： 网址输入框，如果不是网址格式提交会有提示
range： 滑块,可以指定范围里面滑动选择值 min最小值 max最大值 step 每次滑动的步长
hidden： 输入框是隐藏的，用户看不见，元素还是 存在，一般是用于存放数据给js用
file： 文件上传控件,可以选择一个文件，如果要上 传文件必需要用post请求，并且需要设置form表 单数据类型为multipart/form-data
(datetime-local：本地日期和时间，显示年月日 、时分
date：日期选择器
time：时间选择器
month：月份选择器）--时间日期都不常用
<form>
日期框：<input type="date" name="" id="">
颜色框：<input type="color" name="" id="">
文件选择：<input type="file" name="" id="" multiple>
//multiple 可以上传多个文件
</form>3.input 中其他扩充属性
placeholder: 提示用户的输入内容
disabled：禁用，元素置灰，不能选中，不可输入
readonly属性：只读，元素不置灰，可选中，不可输入
autofocus属性：页面加载可以自动获取焦点(光标)
pattern：信息验证（跟正则配合），不符合提交时会有提示
required：(少用)必填校验，如果未填写，submit时会提示
maxlenght: 最大输入的字符量（字符数）
minlenght: 最小输入的字符量（字符数）
min：最小值 max：最大值 （用于type=number属性中）
4. fieldset 表单的集合
fieldset：表示表单的集合,表单元素都可以放在里面 默认有边框
有个 disable属性：禁用控件
<form action="https://www.baidu.com" method="post">
<fieldset>
<!-- legend 是fieldset的标题控件，嵌入到 fieldset的边框上显示-->
<legend>文本样式</legend>
<input type="text">文本1
<input type="text">文本2
</fieldset>
</form>
5.select 下拉选框
<form action="" method="">
<!-- multiple可以多选 -->
<select name="" id="" multiple>
<!-- disabled 表示禁用 -->
<optgroup disabled>
<option value="">分组一</option>
<option value="">武汉</option>
<option value="">苏州</option>
<option value="">成都</option>
</optgroup>
<!-- selected可以默认选中 -->
<optgroup selected>
<option value="">分组二</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</optgroup>
<!-- optgroup内的内容可分为一租 -->
<option value="">111</option>
<option value="">222</option>
<option value="" selected>444</option>
</select>
</form>6. textarea文本域
textarea多行文本输入框,用户可以拖拽其大小,没 有value属性，包裹的内容就是其值
个人简介：<textarea name="resume" required>1111</textarea>7. datalist 容器标签
datalist：可以为指定的控件提供一组数据，通常用于input输入框的提示
注意：与input关联时，datalist 需要设置id属性，input的list属性值= datalist的id值，则会关联，关联一行可以点击选择容器选项 或 输入内容搜索选项
搜索：<input name="search" list="data" />
<datalist id="data">
<option>百度</option>
<option>淘宝</option>
<option>淘宝用户</option>
<option>京东</option>
<option>京.doc</option>
</datalist>8. progress 进度条
progress 进度条，表示完成度
<!-- progress中的 value属性是在最小和最大之间取值 -->
进度条：<progress max="100" min="20" value="60"></progress>9. details 折叠标签
details 折叠标签，浏览器默认折叠包 裹的内容
<details>
<!-- summary是折叠标签的名称 -->
<summary>Web前端</summary>
<ul>
<li>CSS</li>
<li>HTML</li>
<li>JavaScript</li>
</ul>
</details>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
