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标签总结的主要内容,如果未能解决你的问题,请参考以下文章