换行：
水平线：
块标签（块元素）
特点：
1)独占一行空间（100%）
2) 高度默认为0，高度由内容决定
3) 可以指定宽、高
4) 用来搭建页面框架
5）块标签中可用放置块元素和行内元素
元素：
h4：div、body、p、ul>li（无序列表）、ol>li（有序列表）、dl>dt、dd（自定义列表）、h1~h6（标题）
h5：header（头部）、footer（底部）、nav（导航）、section（部分）、article（主页面区）、aside（侧边栏次要信息）、address（地址）（语义化标签）
语义化标签显示特点与div一致，比div多了语义
标题标签h1~h6
<h1>标题</h1>
<h4>标题</h4> //h4为正常字体大小
标题表示重要，会显示加粗
默认换行
段落标签p
<p>段落 </p>
会根据窗口大小自动换行
段与段之间存在空隙
p标签内不能嵌套div，p，h等块级元素
无序列表ul
<ul>
<li>列表项1 </li>
<li>列表项2 </li>
</ul>
无序列表可以用来布局，整齐有序。
- < ul >中只能放置< li >标签。
- < li >标签中可以放任意标签。
- < li >标签自带样式（列表项前带有项目符号），可以通过设置 list-style 属性为none去掉样式。
有序列表ol
<ol>
<li>列表项1 </li>
<li>列表项2 </li>
</ol>
-
< ol >中只能放置< li >标签。
-
< li >标签中可以放任意标签。
自定义列表dl-
列表标题
- 列表项1
- 列表项2
-
dl 自定义列表的整体
-
dt 自定义列表主题
-
dd 自定义主题的每一项内容
-
dd 前会默认缩进
-
dl标签只能放dd和dt
-
dd/dt里面可以放任何标签
行内标签（行内标签）
特点：
1)行内与其他行内元素共享一行空间
2) 宽高都由内容决定
3) 无法指定宽、高
4) 用来填充，行内元素需要嵌套在块元素中，但是块元素不能嵌套在行内元素中。
元素：
span、a、img
装饰类型标签：strong（加粗） b em i sub sup …
span标签
<span> 内容 </span>
小盒子，一行可以放置多个
图像标签
单标签
img标签可以有多个属性（属性不分先后，属性之间用空格隔开）：
- src（必须属性）：图像文件的路径
1） 网络资源
2） 相对路径
3）绝对路径
4） base64格式值 - alt ：替换文本，当图片无法正常显示时，文本会代替图片显示（图片加载成功时不会显示）
- title ：提示文本，当光标悬浮在图片上时，会有提示文字悬浮显示在图片上（title不仅可以用在img标签上，也可以用在其他标签上）
- width： 设置图片的宽，单位默认为px（不用写单位）,需要加双引号
- height：设置图片的高，一般来说宽和高只设置一个，保证图片等比例缩放
- border：设置图片边框
文本装饰标签
加粗 :（< strong >标签语义会更加强烈（语义化标签））
<strong> </strong>
<b> </b>
倾斜：
<em> </em>
<i> </i>
删除线：
<del> </del>
<s> </s>
下划线：
<ins></ins>
<u></u>
功能标签（功能元素）
除了布局之外，还有额外功能
超链接a
从一个页面链接跳转到另一个页面
a标签内可以嵌套任意元素，但是不能嵌套a标签
<a href = "url （跳转目标）" target = "目标弹出方式"> 文本或图像</a>
href （必须属性）:(要跳转的地址）url为统一资源定位符，链接到网络中的唯一资源，不知道需要跳转到哪里的时候为#（空链接）
<a href="#"></a>
-
相对路径：相对于当前代码所在文件的路径
. 当前目录下
… 当前目录下的上一级目录 -
绝对路径：相对于基准点
linux操作系统中，/ 操作系统根目录 也就是 /
/var/www/html 是apache2部署目录， index.html 中 / 代表apache的根部署目录 即 /var/www/html
target （链接页面的打开方式 ）:
- _self为默认值，在本窗口打开（覆盖原网页）；
- _blank表示在新窗口打开（原网页存在）；
- _parent表示在父窗口打开；
- _top在当前窗体打开链接，并替换当前的整个窗体(框架页)
链接的分类
-
外部链接：
<a href = "www.baidu.com" target = "_blank"> 百度</a> -
内部链接：（在同一目录下）网页内部相互链接，直接写页面名称
-
空链接：无确定目标
<a href = "#" > 空链接 </a> -
下载链接：href中为文件或者压缩包地址，点击链接直接下载文件
-
网页元素链接：可以给网页中各种元素添加链接（不只是文字和图片）
-
锚点链接：点击链接，可以跳转到页面的其他位置
<div id = "id名"> </div> //1.定义锚点 <a href = "#id名" > </a> //2.跳转 -
邮件标签：点击链接即可发邮件给指定邮箱
收件邮箱可以有多个，用逗号隔开<a href="mailto:收件邮箱"？subject=主题？body=内容 >发邮件</a>
表格标签table
table 标签通常不用来布局，而是用来展示数据的
<table>
<!-- 表格大标签-->
<caption><strong>表格标题</strong></caption>
<!-- 表格头部 -->
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<!-- 表格体 -->
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
<!-- 表格底部 -->
<tfoot></tfoot>
</table>
给表格设置结构，代码执行效率会变高
table 为表格
caption 表格标题，表格标题
thead表格头部
tbody表格体
tr行
td,th单元格（单元格中可以为其他任何标签）
th表头单元格（内容居中加粗显示）
- 表格属性
-
align: 对齐方式，left,right,center
-
border:表格边框宽度，默认无
-
cellpadding:内容到边框的距离，默认为1
-
cellspacing:单元格之间的空白距离，默认为2
-
bgcolor：添加背景色
-
background：添加背景图片
-
frame：添加在table标签内，控制表格外边框。
void：不显示外侧边框 ；
above：显示上部的外侧边框；
below： 显示下部的外侧边框；
hsides：显示上部和下部的外侧边框；
vsides：显示左边和右边的外侧边框；
lhs：显示左边的外侧边框；
rhs：显示右边的外侧边框；
box：在所有四个边上显示外侧边框；
border：在所有四个边上显示外侧边框； -
rules ：添加在table标签内，控制表格外边框。
none：没有线条；
groups 位于行组和列组之间的线条；
rows：位于行之间的线条；
cols：位于列之间的线条；
all：位于行和列之间的线条； -
width: 表格的宽度
-
height: 表格的高度
-
行中的列数在经过计算后应该是相同的
- 合并单元格
跨行合并：rowspan=“合并单元格个数”
跨列合并：colspan=“合并单元格个数”
目标单元格：
跨行合并，目标单元格位于最上侧的单元格
跨列合并，目标单元格位于最左侧的单元格
注意：只有同一个结构标签中的单元格才能和并，不能跨结构标签和并（跨thead,tbody,tfooter）
表单标签form
表单用来进行前后端的交互（默认情况下同步交互）
表单由表单域，表单元素，提示信息组成
<form action="url地址" method="提交方式" name="表单域名称" enctype="编码方式">
表单元素
</form>
form属性：
-
action 后端处理接口，
-
method请求方法：
get 用于查询操作，参数携带在url后面 ；
post 用于更新（保存、修改、删除）操作，参数携带在请求报文请求体中 -
name表单域名称，
-
enctype 表示编码方式：
application/x-www-form-urlencoded：查询字符串（表单编码）将特殊字符转换为16进制（默认情况下使用） key=val&key=val&… schoolName=太原理工大学&userName=陈明
multipart/form-data： 用于表单中有附件提交的时候，二进制，无需进行编码
text/plain： 纯文本提交
表单控件
input表单元素
当input元素中的type属性值为text，password，radio，checkbox时input必须添加name属性，当type的属性值为radio，checkbox时input必须添加value属性。
<input type="属性值" name="名字" value="值" maxlength=" " checked="checked">
type的属性值:
-
text: 单行文本框
<input type=text name="username" maxlength=10 /> -
password：密码框（不显示文字 *）
<input type="password" name="password"/> -
radio：单选按钮，name属性必须相同，设置checked属性为checked默认选中
<input type="radio" name="sex" value="woman" checked/>女 <input type="radio" name="sex" value="man" />男 -
checkbox:复选按钮，name属性必须相同，设置checked属性为checked默认选中
<input type="checkbox" name="hobby" value="run" checked="checked"/>跑步 <input type="checkbox" name="hobby" value="swim" />游泳 <input type="checkbox" name="hobby" value="dance" />跳舞 -
file：上传文件，form标签中enctype属性必须设置为multipart/form-data
<input type="file" multiple/> 上传文件
按钮标签
-
button：按钮
<input type="button" value="提交" /> -
submit：提交按钮
<input type="submit" value="提交" /> -
reset：重置按钮
<input type="reset" value="重置"/>
以上按钮功能需要配合form标签使用
button标签按钮
<button type="submit" >提交按钮</button>
<button type="reset" >重置按钮</button>
<button type="button" >普通按钮</button>
textarea文本域元素
放置多行文本
<textarea name="description" cols="50" rows="4">文本内容</textarea>
cols：文本域内可见宽度
rows：文本域内可见行数
select下拉菜单
下拉列表
<select name="address">
<option value="js" selected>江苏</option>
<option value="sx">山西</option>
<option value="hn">河南</option>
</select>
将name属性放在select标签中
将value属性放在option标签中
selected表示下拉菜单默认选中的选项
label标签
为input元素定义标注，增加用户体验，点击对应提示信息时也会出现相应效果
<label for="sex">男</label>
<input type="radio" name="sex" value="man" id="sex" />
<label for="sex">女</label>
<input type="radio" name="sex" value="woman" id="sex" />
将提示信息放在label标签中，设置for属性，在input标签中添加id属性，id 属性值等于for属性值
<label> 女 <input type="radio" name="sex" value="woman" /> </label>
也可以直接将label标签包裹单选input，不需要使用id和for
媒体标签
img
audio
<audio src="../audio/1.mp3" controls autoplay></audio>
video
谷歌浏览器在静音情况下才可以自动播放（muted）
视频标签支持格式有：MP4，WebM，Ogg
iframe
将已有的完整网站嵌入网页中
<iframe width="100%" height="300" frameborder="0" scrolling="no" hspace="0"
src="https://i.tianqi.com/?c=code&a=getcode&id=55&icon=1">
</iframe>
优点：
（1）解决加载缓慢的第三方内容如图标和广告等的加载问题；
（2）Security sandbox；
（3）并行加载脚本。
缺点：
（1）iframe会阻塞主页面的Onload事件；
（2）即时内容为空，加载也需要时间；
（3）没有语意。
行内块元素
特点：
- 一行显示多个
- 可以设置宽高
input，textarea，button，select等
标签显示模式转换
使用display，可以改变元素的默认显示特点，让元素符号布局要求。
HTML嵌套规范注意点
面试题：
如何理解语义化？
利用标签表达出来的含义（而不利用标签表达的样式）来表达页面结构
换句话说，就是在合适的页面位置上使用合适的标签
1470
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
