Web前端之HTML标签总结
Posted Huang_xianlong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端之HTML标签总结相关的知识，希望对你有一定的参考价值。
Web前端之html标签总结
一、HTML基本原理
网页的原理：用户输入网址之后，对应的服务器就发现有人请求我的网页了，所以这个服务器就会把网页和相关的图片、js文件、css文件、flash文件都通过HTTP协议传输到用户的电脑里面。HTML页面在用户的电脑里面进行渲染。HTTP协议指的是超文本传输协议。每一个网址，都对应了服务器上面的确定的文件。
纯文本文件：只有内容，没有样式。常见的纯文本文件有：.txt、.html、.js、.css、.java。没有语义，即使你这个文件中的内容排版再清晰，那也是人认为的，实际上纯文本文件中的所有的文字生而平等，没有任何的语义。
HTML：超文本标记语言，HyperText Markup Language。就是通过标签对儿，给纯文本增加语义。也就是说，用文本给文本增加语义，所以这个叫做“超文本”。而有一对儿对儿标签，也成为“标记”，所以就是“超文本标记语言”。
二、HTML标签
1. 单标签：
注释：<!--注释信息--> 快捷键：Ctrl+/
换行标签：<br>
横线标签：<hr>
2. 双标签：
- 标题标签：<h1></h1>;<h2></h2>;<h3></h3>;<h4></h4>;<h5></h5>;<h6></h6>(从大到小)
注意：一个网页中1号标题标签最好出现一次
- 段落标签：<p></p>
- 强调标签：
文本标签:<font color="颜色属性" size="大小">改变属性</font>
加粗标签:<strong>加粗</strong>或者<b>加粗</b>
文字斜体:<em>斜体</em>或者<i>斜体</i>
下划线:<ins>下划线</ins>或者<u>下划线</u>
删除线:<del>删除线</del>或者<s>删除线</s>
- 没有语义的双标签：
<div>实现网页布局</div> <!-- 自己独占一行（块元素），可以包含任何标签-->
<span>在网页布局过程中使用</span> <!-- 不会发生换行（行元素） -->
3. 多媒体标签
图片标签:<img src="设置一个图片的路径" title="显示鼠标悬停文字提示" alt="图片显示不出来时，显示对图片的描述信息，并不是给用户看的，给搜索引擎提供搜索服务" width="宽度(有一个宽高比，防止图片失真，改变一个属性就可以)" height="高度">
4. 路径问题
- 绝对路径：
* 带有磁盘目录的路径
* 带有具体网址
- 相对路径：
* 如果资源文件(img)和当前文件(html)文件在同一个文件夹中，只要写文件的名称即可
* 如果资源文件(img)在当前文件的下一级目录:src='image/1.png'
* 如果资源文件(img)在当前文件的上一级目录:src='../../image/1.png'
5. 超链接
<a href="涉及到相对路径和绝对路径问题" title="显示文字提示">不跳转到任何页面写"#"</a>
<a href="#" target="默认值'_self':在当前页面中显示跳转页面，'_blank':跳转到新的窗口中打开页面">不跳转到任何页面</a>
超链接跳转页面的其他写法：在<head><base target="_blank"></head>，跳转到新的窗口中（对当前页面的任何超链接都有效）
6. 锚链接(超链接的另外一种用法，实现的是本页面的内部的跳转)
<a href="#">跳转到顶部</a>
<a href="#ID值">跳转到固定部分</a>
使用时需要给需要跳转的标签设定ID值
7. meta标签的用法;
<meta charset="UTF-8">:防止页面乱码
<meta name="keywords" content="女装、男装">：设置网页关键字，不是给用户用的，对搜索引擎提供帮助
<meta name="discription" content="设置网页描述信息">：设置网页描述信息，不是给用户看的，是给搜索引擎看的
<!-- 网页重定向 -->
<meta http-equiv="refresh" content="3;https://www.baidu.com/">:三秒后重新定位新的域名
8. link用法：
<link rel="icon" href="favicon.ico">:设置网页图标
注意;最好将图标放到网页的跟目录下，IE浏览器不支持这种方式，若果把网页放在服务器上，IE浏览器就支持这种方式
9. 列表标签
- 无序列表
<ul type="circle">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
注意：* 无序列表中的列表项(li)可以包含任何标签
* 使用场景
- 有序列表
<ol type="I">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
- 自定义列表
<dl>
<dt>标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
注意：* 在dt列表中只能包含行内元素（span,a）
* 在dd列表中可以包含任何元素、标签
10. 表格
行：<tr></tr>
列：<td></td>
表格：<table></table>
表格的作用：显示数据、网页布局
属性;
border:设置边框,默认为0,无边框
cellspacing="0"：设置td与td之间的距离，默认值为2
width="400"
cellpadding="10"：设置内容与td左侧之间的距离
align="center":移动标签的位置，默认值left，设置对齐方式,如果给table设置align属性，智能让整个标签居中，内容不会居中，如果给tr或者td设置align属性，可以使内容居中
bgcolor="red"：设置背景颜色
例子：
<table border="1" width="400" height="50" cellpadding="10" cellspacing="0" align="center">
aption><strong>人员信息表</strong></caption>
<tr align="center" bgcolor="red">
<th>姓名</th>
<th>年龄</th>
<th>体重</th>
<th>职业</th>
<th>性别</th>
</tr>
<tr align="center" bgcolor="green">
<td>张三</td>
<td>22</td>
<td>58kg</td>
<td>bigdata</td>
<td>male</td>
</tr>
<tr align="center" bgcolor="green">
<td>李四</td>
<td>21</td>
<td>58kg</td>
<td>deeplearning</td>
<td>female</td>
</tr>
</table>- 表格中的标签：
表头标签：<th></th>，用法与<td></td>相同
标题标签：<caption>标题</caption>
表格结构：
table[border="1" width="400"cellspacing="0"]>tr*4>td*4直接按tab键，产生表格
<table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
注意：表格一般就是这种结构，但是一般现在不采用这个了，浏览器可以自动产生<tbody></tbody>结构
合并单元格：
横向合并：<td colspan="2"></td>
纵向合并：<td rowspan="2"></td>
注意：会自动寻找下一行进行合并，所以必须要把相关的<td></td>标签删掉
细线表格的绘画：
<table align="left" cellspacing="1" cellpadding="10" width="400" bgcolor="green">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
11. 表单：收集用户的信息
- 表单组成：
提示信息
表单控件(重点)
表单域
- 表单域：
<form action="" method=""></form>
action:设置后台处理数据的后台程序
method：提交数据给后台程序的方式
get提交数据:将数据显示在地址栏中，具有数据大小的限制
post提交数据:会通过后台异步提交数据，安全性好
- 表单控件：
文本输入框：<input type="text" name="" maxlength="6" readonly="readonly" value="">
maxlength：设置最大程度
readonly="readonly":设置控件为只读模式
disabled="disabled":禁止用户输入
value="":设置默认值
name="":控件名称，后台程序通过这个属性获取对应的数据
id="":设置ID编号，也可以通过这个获取
密码输入框：<input type="password" name="pwd">
该控件的属性和文本输入框相同
单选输入按钮：<input type="radio" name="" checked="checked">
name=""：备选值的name属性要设置一致
checked="checked":设置默认选中项
下拉列表：
<select multiple="">
<option value="hb">北京</option>
<option>广东</option>
<option>上海</option>
<option selected="selected">湖南</option>
</select>
属性：
selected="selected"：设置默认选中项
multiple="":实现多选效果
其他写法：
<select>
<optgroup label="河北省">
<option>张家口</option>
<option>石家庄</option>
<option>邯郸</option>
<option>张北</option>
</optgroup>
</select>
多选控件：<input type="checkbox" checked="checked" name="">
checked="checked":默认选中项
上传资源控件：<input type="file" name="">
文本域：<textarea></textarea><br>
隐藏控件：<input type="hidden" name="" value="123">
按钮：
提交按钮：<input type="submit" name="submit">
普通按钮：<input type="button" name="" value="取消">：不能提交表单数据
重置按钮：<input type="reset" name="" value="重置">
分组控件和标题：<fieldset><legend></legend></fieldset>
12. 特殊符号
"空格字符":  :
"<": <
">": >
"&":&
"￥":¥
"版权":©
"注册商标":®
"摄氏度":°
"正负号":±
"乘号":×
"除号":÷
"平方2":²
"平方3":³
13. HTML5里面的标签(补充):
- 版本介绍;
html:4s+tab或者4t+tab或者xt=tab：产生不同的HTML版本，过渡版本和严格版本
过渡版本Transitional：可以包含所有的html元素(标签)和属性
严格版本strict：可以包含所有的html元素(标签)和属性，但是不包含已经废弃掉的标签，例如font、i和属性（align属性）
- 新标签：
<header>头部标签</header>
<nav>导航标签</nav>
<section>区域</section>
<footer>底部</footer>
<aside>侧边栏</aside>
<article>文章</article>
<!-- 注意:以上的标签和div的用法一样，如果在IE浏览器中无法显示上面的标签，只需要CSS样式中动态的写一个相同名字的标签即可 -->
<!-- 视频标签 -->
<video src="movie.mp4" controls="显示控制面板" autoplay="自动播放" loop="循环播放"></video>
<video src="movie.mp4" controls autoplay loop width="500"></video>
<!-- 宽度高度只设置一个即可 -->
<!-- 多种视频格式 -->
<video controls >
<source src="movie.mp4" type="">
<source src="movie.rmvb" type="">
</video>
<!-- 音频标签 -->
<audio src="See You Again.mp3" controls autoplay loop></audio>
<audio src="See You Again.mp3"></audio>
以上是关于Web前端之HTML标签总结的主要内容，如果未能解决你的问题，请参考以下文章