Web前端之HTML标签总结

Posted 2021-09-06 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)可以包含任何标签
* 使用场景

有序列表

自定义列表

<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>

13. HTML5里面的标签(补充):

版本介绍;

html:4s+tab或者4t+tab或者xt=tab：产生不同的HTML版本，过渡版本和严格版本
过渡版本Transitional：可以包含所有的html元素(标签)和属性
严格版本strict：可以包含所有的html元素(标签)和属性，但是不包含已经废弃掉的标签，例如font、i和属性（align属性）

新标签：

以上是关于Web前端之HTML标签总结的主要内容，如果未能解决你的问题，请参考以下文章