HTML5标签

问天翼三 發表於 2019-7-20 17:44:00

<h1>HTML标签</h1>
HTML是标记语言，里面的所有功能都是通过标签来实现的，可以说标签就像一个个“砖块”，H5前端开发工程师就像是建筑工人，用这些“砖块”按照一定规则组合起来建造成网页。
想要造一栋HTML大楼，不了解各个标签是不行的。下面就让我们来简单认识这些常用标签。
HTML5标签总表
<img src="https://img2018.cnblogs.com/blog/1743728/201910/1743728-20191021143237502-112832518.png" alt="">
 
 
<h2 class="md-end-block md-heading">1、标签的简单介绍</h2>
<h3 class="md-end-block md-heading">1.1 单标签、双标签</h3>
单标签：单个出现，以⾃身单个标签标识结束
双标签：成对出现，以自身第二个标签标识结束
 
<h3 class="md-end-block md-heading">1.2 ⾏内标签、块级标签、行内块标签</h3>
行内标签：可与其他行内元素并列一行；不能设置宽度和高度，高度是行高（line-height：100px；可设置），宽度是内容的总宽度；默认文字会被放在中间显示。例：<a>
块级标签：拥有⾃身宽⾼，通常独⾃占据⼀⾏独占一行；如果不设置宽度，会默认占满父元素的百分之百；可以当做容器包含其他标签。例：<div>
行内块标签：可以设置宽度高度等样式；可以和其他元素并排显示，现在只有input标签符合行内块元素；
 
<h3 class="md-end-block md-heading">1.3 单⼀标签、组合标签</h3>
单⼀标签：单独出现，表示具体的功能或展示具体的内容。
组合标签：配合使⽤，才能产⽣相应的内容与效果。例：
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <table>      <tr>          <td>          </td>      </tr>  </table></pre>
 
<h3 class="md-end-block md-heading">1.4 标签大小写书写规范</h3>
html5中的标签不区分大小写，都可以识别，不过这里建议标签全部小写。
因为js只能识别小写，为了之后对接js，标签最好全部小写。
 
<h2 class="md-end-block md-heading">2、head 中的标签</h2>
head是网页的头部，里面放置的代码是用来对网页进行相关设置
<h3 class="md-end-block md-heading">meat 标签</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <meta charset="UTF-8"></pre>
在网页中meat标签最常用的设置是用来设置字符集，字符集设置错误将会导致网页打开乱码。
<h3 class="md-end-block md-heading">title 标签</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <title>网页标题</title></pre>
title 标签里是网页的标题，如下图所示：
 
显示在浏览器标签栏中
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <title></title> 需要写在  <meta charset="UTF-8">标签后  meta 标签设置字符集，若title写在前，则网页运行title时还没有设置字符集导致标题乱码。</pre>
<h3 class="md-end-block md-heading"> </h3>
<h3 class="md-end-block md-heading">style 标签</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <style>   *{   margin:0;   padding:0;   }  </style></pre>
style标签是用来在head标签中设置CSS样式，美化修饰网页。
 
<h3 class="md-end-block md-heading">script 标签</h3>
script 标签可以在其中写入js代码
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <script>   var a = 10;   var b = 20;   console.log(a+b);  </script></pre>
当然也可以通过 script 标签来引入外部的js文件
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <script  src="01.js"></script></pre>
 
<h3 class="md-end-block md-heading">link 标签</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <link rel="stylesheet" href="style.CSS"></pre>
通过 link 标签可以引入外部的 CSS 样式文件
<h3 class="md-end-block md-heading"> </h3>
<h3 class="md-end-block md-heading">ico 图标</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <link rel="shortcut icon" href=""/images/favicon.ico"></pre>
在网页标题前引入ico图标，如下图标签栏前的百度小图标
<img alt="image" data-local-refresh="true">
 
<h2 class="md-end-block md-heading">3、body 中的标签</h2>
body是网页的主体，网站上所能见到的内容基本都在body中，大部分标签也都是在body中使用。
<h3 class="md-end-block md-heading">h1-h6 标题标签</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <h1></h1>  <h2></h2>  <h3></h3>  <h4></h4>  <h5></h5>  <h6></h6></pre>
h1-h6 标签是标题标签。数字表示标题的大小，1最大，6最小。
 
<h3 class="md-end-block md-heading">p 段落标签</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <p></p></pre>
块级元素。段落标签，内部通常放置文本
 
<h3 class="md-end-block md-heading">span 标签</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <span></span></pre>
行内元素。类似 p 标签，span 里同样用来放置文本，。
注意，span标签可以放在 p 标签内，但 p 标签里不能放 span 标签
 
<h3 class="md-end-block md-heading">hr 水平线</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <hr></pre>
hr 标签在网页中产生一条水平线
 
<h3 class="md-end-block md-heading">del 删除线</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <del></del></pre>
del标签中的文字字中间会被划上一条横线
 
<h3 class="md-end-block md-heading">b 加粗</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <b></b></pre>
b 标签中的文字会被加粗
 
<h3 class="md-end-block md-heading">strong 加粗强调</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <strong></strong></pre>
strong 标签中的文字会被加粗，并且强调
 
<h3 class="md-end-block md-heading">I 倾斜文本</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <i></i></pre>
I 标签中的文字会被倾斜，在网页中显示斜体
 
<h3 class="md-end-block md-heading">em 倾斜强调</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <em></em></pre>
em 标签中的文字会被倾斜，并且强调
 
<h3 class="md-end-block md-heading">pre 预格式文本</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <pre></pre></pre>
pre标签表示预格式文本。由于在html会有多个空格会被合并成一个，回车换行会失效等问题，导致网页布局混乱。
pre标签内的内容可以原样显示到网页中
<h3 class="md-end-block md-heading"> </h3>
<h3 class="md-end-block md-heading">br 换行</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <br></pre>
br标签表示换行，相当于enter回车键
 
<h3 class="md-end-block md-heading">ul li 无序列表</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <ul>   <li></li>   <li></li>  </ul></pre>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> type:属性值:定义了无序列表序号的类型   disc:实心圆   circle:空心圆   aquare:实心方块   none:什么都没有</pre>
ul li 标签表示无序列表，类似于表格，可以使文字等以清单的方式显示
<h3 class="md-end-block md-heading"> </h3>
<h3 class="md-end-block md-heading">ol li 有序列表</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <ol>      <li></li>      <li></li>  </ol></pre>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> type:属性值:定义有序序号的类型   数字:（默认）   a:小写英文字母   A:大写英文字母   i:小写的罗马数字   I:大写的罗马数字</pre>
ol li 标签表示有序列表，类似于表格，可以时文字等以清单的方式显示，并且会在最前面标注序号，1、2、3、4等
 
<h3 class="md-end-block md-heading">img 图片</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <img src="./img/01.jpg" alt="图片"></pre>
img标签表示在网页中引用图片
<h3 class="md-end-block md-heading"> </h3>
<h3 class="md-end-block md-heading">a 超链接</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <a href="https://www.cnblogs.com/"></a></pre>
a 标签表示在网页中添加超链接，a标签中点内容就会有超链接效果
 
<h3 class="md-end-block md-heading">div 盒子</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <div></div></pre>
div标签常用于切割划分网页，把网页切割成各个部分，方便网页开发。
 
<h3 class="md-end-block md-heading">table tr th td 表格标签</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <table>      <tr>          <td></td>          <td></td>          <td></td>      </tr>  </table></pre>
table标签是在网页中插入表格。tr表示行，td表示单元格。表格还常用于网页的布局
 
<h3 class="md-end-block md-heading">form 标签 & input标签</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <form action=" " method="get" >      <input type="text"  placeholder="请输入用户名">  </form></pre>
表单标签：用于收集用户输入的信息，并提交到服务器。
input标签：可设置为输入框，按钮等
 下划线:u
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <u></u></pre>
上标:sup
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <sup></sup></pre>
下标:sub
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <sub></sub></pre>
 
<h3 class="md-end-block md-heading">表格：table</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <table>   <tr>   <td></td>   <td></td>   </tr>  </table></pre>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> table属性：   border:边框   rules:边框显示规则   width:宽度   height:高度   cellpadding:内边距:边框与内容之间的宽度   cellspacing:外边距:单元格与单元格之间的宽度  表格的行：tr   align:   设置该行内容的水平对齐方式   left/center/right   valign:   设置该行内容的水平对齐方式   top/middle/bottom  表格的标题：th   行标题或者列标题，字体具有加粗效果，放在tr中  表格的单元格：td   align: 水平对齐   valign:垂直对齐   width:宽度   heiht:高度   colspan：横向合并   rowspan：纵向合并  注意：   每行中指定列的宽度，都是以最宽的决定   每行中指定列的高度，都是以最高的决定  表格的标题：    标记：        <caption>标题</caption>    注意：        cation一定是紧跟table属性后        一个表格最多只有一个标题</pre>
 
 
浮动框架:iframe 在网页中嵌套别的网页
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <iframe src="此处是网站地址"></iframe></pre>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> 语法：<iframe   src="规定在 iframe 中显示的文档的 URL(默认的显示页面)" width="" height=""   frameborder="1/0"  name="iframe名称"     scrolling="yes/no/auto">   </iframe></pre>
 
 
结构标记 HTML5推出的专门用来布局的一组标记 目的： 取代div，提升整体代码的可读性和语意性 <header></header>与<div id="header"></div>一模一样基本没有区别 常用的结构标记
<h3 class="md-end-block md-heading">header:</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <header></header></pre>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> 定义网页的页眉部分或者其他部分的顶部内容</pre>
<h3 class="md-end-block md-heading">aside:</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <aside></aside></pre>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> 定义网页的导航部分</pre>
<h3 class="md-end-block md-heading">nav:</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <nav></nav></pre>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> 编写网页的导航部分</pre>
<h3 class="md-end-block md-heading">section:</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <section></section></pre>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> 整个网页的主体</pre>
<h3 class="md-end-block md-heading">footer:</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <footer></footer></pre>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> 表示网页底部，一般情况下是用户不太关注的部分</pre>
<h3 class="md-end-block md-heading">article:</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <article></article></pre>
用来表示文章内容部分 论坛帖子，微博，说收，朋友圈，新闻等
 
<h3 class="md-end-block md-heading">flash插件:</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <object>  <embed width="value" height="value" wmode="transparet" src="flash路径"></embed>  </object></pre>
<h3 class="md-end-block md-heading">滚动字幕:</h3>
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> </marquee></pre>
 
多媒体标签
<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded"> <atudio></pre>
 
<h2 class="md-end-block md-heading">4、实体字符</h2>
由于标签字符的特殊性，<、>、空格、等特殊符号。会被浏览器误认成html语言的标签，不会在网页中显示。
所以为了在网页中正常使用这些字符则需要用到实体字符
下面介绍一些常用实体字符
 
<table class="md-table">
<thead>
<tr class="md-end-block"><th>实体字符</th><th>字符含义</th><th>网页中显示效果</th></tr>
</thead>
<tbody>
<tr class="md-end-block">
<td>&nbsp;</td>
<td>空格符号</td>
<td> </td>
</tr>
<tr class="md-end-block">
<td>&lt;</td>
<td>小于号</td>
<td><</td>
</tr>
<tr class="md-end-block">
<td>
<div>&gt;</div>
</td>
<td>大于号</td>
<td>></td>
</tr>
<tr class="md-end-block">
<td>
<div>&copy;</div>
</td>
<td>版权符号</td>
<td>@</td>
</tr>
<tr class="md-end-block">
<td>
<div>&yen;</div>
</td>
<td>人民币符号</td>
<td>¥</td>
</tr>
<tr class="md-end-block">
<td>
<div>&amp;</div>
</td>
<td>和</td>
<td>&</td>
</tr>
<tr class="md-end-block">
<td>
<div>&reg;</div>
</td>
<td>注册商标</td>
<td>®</td>
</tr>
<tr class="md-end-block">
<td>
<div>&trade;</div>
</td>
<td>商标</td>
<td>™</td>
</tr>
<tr class="md-end-block">
<td>
<div>&times;</div>
</td>
<td>乘号</td>
<td>×</td>
</tr>
<tr class="md-end-block">
<td>
<div>&divide;</div>
</td>
<td>除号</td>
<td>÷</td>
</tr>
</tbody>
</table>
 实体字符大全 
来源：https://www.cnblogs.com/zhupengcheng/p/11218544.html

頁: [1]

琼殿技术论坛's Archiver

HTML5标签