Html标签⼤全
HTML标签不区分⼤⼩写，<h1>和<H1>是⼀样的，但建议⼩写，因为⼤部分程序员都以⼩写为准。所⽤编辑器是Visual Studio Code.
1.HTML基本结构
<html>
<head>...</head>
<body>...</body>
</html>
代码讲解：
（1） <html></html>称为根标签，所有的⽹页标签都在<html></html>中。
（2） <head> 标签⽤于定义⽂档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下⼀⼩节中会有详细介绍。下⾯这些标签可⽤在 head
部分：
<span ><head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head></span>
<title>标签：在<title>和</title>标签之间的⽂字内容是⽹页的标题信息，它会出现在浏览器的标题栏中。⽹页的title标签⽤于告诉⽤户和搜索引擎这个⽹页的主要内容是什么，搜索引擎可以通过⽹页标题，迅速的判断出⽹页的主题。每个⽹页的内容都是不同的，每个⽹页都应该有⼀个独⼀⽆⼆的title。
例如：
<span ><head>
<title>hello world</title>
</head></span>
（3） 在<body>和</body>标签之间的内容是⽹页的主要内容，如<h1>、<p>、<a>、<img>等⽹页内容标签，在这⾥的标签中的内容会在浏览器中显⽰出来。
2.<!--注释⽂字-->，可⽤ctrl+/调出。
3.<p>标签，添加段落。
语法：<p>段落⽂本</p>
4.<hx>标签，为⽹页添加标题。标题标签⼀共有6个，h1、h2、h3、h4、h5、h6分别为⼀级标题、⼆级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最⾼的等级，且字号也是最⼤的。
语法：<hx>标题⽂本</hx> (x为1-6)
5.加⼊强调语⽓，使⽤<strong>和<em>标签。但两者在强调的语⽓上有区别:<em> 表⽰强调，<strong> 表⽰更强烈的强调。并且在浏览器中<em> 默认⽤斜体表⽰，<strong> ⽤粗体表⽰。两个标签相⽐，⽬前国内前端程序员更喜欢使⽤<strong>表⽰强调，。
语法：<em>需要强调的⽂本</em>
<strong>需要强调的⽂本</strong>
6.使⽤<span>标签为⽂字设置单独样式。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨⽐</title>
<style>
span{
color:blue; //为美国梦三个字设置颜⾊
}
</style>
</head>
<body>
<p>1922年的春天，⼀个想要成名名叫<em>尼克•卡拉威</em>（托⽐•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是⼀个道德感渐失， <p>菲茨杰拉德，⼆⼗世纪美国⽂学巨擘之⼀，兼具作家和编剧双重⾝份。他以诗⼈的敏感和戏剧家的想象为"<strong>爵⼠乐时代</strong>"吟唱华丽挽歌，其诗⼈</body>
</html>
7.<q>标签，短⽂本引⽤
语法：
<q>引⽤⽂本</q>
8.<blockquote>标签，长⽂本引⽤
语法:
<blockquote>引⽤⽂本</blockquote>
9.使⽤<br/>标签分⾏显⽰⽂本，在需要加回车换⾏的地⽅加⼊<br />，<br />标签作⽤相当于word⽂档中的回车。
10.“ ”为⽹页中添加⼀些空格。
11.<hr/>标签，添加⽔平横线.
12.<address>标签，为⽹页加⼊地址信息
语法：
<address>联系地址信息</address>
例如：：<address>北京市西城区德外⼤街10号</address>
13.使⽤<code>标签加⼊⼀⾏代码。
语法：
<code>代码语⾔</code>
例如：<code>var i=i+300;</code>
14.使⽤<pre>标签为⽹页加⼊⼤段代码。
语法：
<pre>语⾔代码段</pre>
例如：
<pre>
var message="欢迎";
for(var i=1;i<=10;i++)
{
alert(message);
}
</pre>
15.使⽤ul，添加新闻信息列表，ul-li在⽹页中显⽰的默认样式⼀般为：每项li前都⾃带⼀个圆点。
语法：
<ul>
<li></li>
<li></li>
......
</ul>
举例：
<ul>
<li></li>
<li></li>
<li></li>
</ul>
16.使⽤ol，添加图书销售排⾏榜，<ol>在⽹页中显⽰的默认样式⼀般为：每项<li>前都⾃带⼀个序号，序号默认从1开始。
语法：
<ol>
<li></li>
<li></li>
......
</ol>
举例：
下⾯是⼀个热点课程下载排⾏榜：
<ol>
<li>前端开发⾯试⼼法 </li>
<li></li>
<li>JavaScript全攻略</li>
</ol>
17.认识div在排版中的作⽤，在⽹页制作过程过中，可以把⼀些独⽴的逻辑部分划分出来，放在⼀个<
div>标签中，这个<div>标签的作⽤就相当于⼀个容器。什么是逻辑部分？它是页⾯上相互关联的⼀组元素。如⽹页中的独⽴的栏⽬版块，就是⼀个典型的逻辑部分。
语法：
<div>…</div>
18.给div命名，使逻辑更加清晰，⽤id属性来为<div>提供唯⼀的名称，这个就像我们每个⼈都有⼀个⾝份证号，这个⾝份证号是唯⼀标识我们的⾝份的，也是必须唯⼀的。
语法：
<div id="版块名称">…</div>
19.table标签，认识⽹页上的表格。
创建表格的四个元素：
table、tbody、tr、th、td
（1）<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
（2）<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显⽰。加上这些表格结构， tbody包含⾏的内容下载完优先显⽰，不必等待表格结束后在显⽰，同时如果表格很长，⽤tbody分段，可以⼀部分⼀部分地显⽰。（通俗理解table 可以按结构⼀块块的显⽰，不在等整个表格加载完后显⽰。）
（3）<tr>…</tr>：表格的⼀⾏，所以有⼏对tr 表格就有⼏⾏。
（4）<td>…</td>：表格的⼀个单元格，⼀⾏中包含⼏对<td>...</td>，说明⼀⾏中就有⼏列。
（5）<th>…</th>：表格的头部的⼀个单元格，表格表头。
（6）表格中列的个数，取决于⼀⾏中数据单元格的个数。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
textarea中cols表示</head>
<body>
<table>
<tbody>
<tr>
<th>班级</th>
<th>学⽣数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>⼀班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>⼆班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
</body>
</html>
20.⽤css样式，为表格加⼊边框
如下代码：
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
21.<table summary="表格简介⽂本"> 为表格添加摘要
22.为表格添加标题：
<table>
<caption>标题⽂本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
23.使⽤<a>标签，链接到另⼀个页⾯。使⽤<a>标签可实现超链接，它在⽹页制作中可以说是⽆处不在，只要有链接的地⽅，就会有这个标签。
语法：
<a href="⽬标⽹址" title="⿏标滑过显⽰的⽂本">链接显⽰的⽂本</a>
title属性的作⽤，⿏标滑过链接⽂字时会显⽰这个属性的⽂本内容。这个属性在实际⽹页开发中作⽤很⼤，主要⽅便搜索引擎了解链接地址的内容（语义化更友好）
例如：
<a href="www.baidu" title="点击进⼊百度">click here!</a>
<a>标签在默认情况下，链接的⽹页是在当前浏览器窗⼝中打开，有时我们需要在新的浏览器窗⼝打开。
如下代码：
<a href="⽬标⽹址" target="_blank">click here!</a>
注：页⾯只显⽰<a></a>之间的内容。
24.使⽤mailto在⽹页中链接Email地址
<a>标签还有⼀个作⽤是可以链接Email地址，使⽤mailto能让访问者便捷向⽹站管理者发送电⼦邮件。我们还可以利⽤mailto做许多其它事情。下⾯⼀⼀进⾏讲解，请看详细图⽰：
注意：如果mailto后⾯同时有多个参数的话，第⼀个参数必须以“?”开头，后⾯的参数每⼀个都以“&”分隔。
下⾯是⼀个完整的实例:
<a href="=内容">发送</a>
在浏览器中显⽰的结果：
发送
25.认识<img>标签，为⽹页插⼊图⽚
语法：
<img src="图⽚地址" alt="下载失败时的替换⽂本" title = "提⽰⽂本">
举例：
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
讲解：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论