HTML5标签

HTML标签

HTML是标记语言,里面的所有功能都是通过标签来实现的,可以说标签就像一个个“砖块”,H5前端开发工程师就像是建筑工人,用这些“砖块”按照一定规则组合起来建造成网页。

想要造一栋HTML大楼,不了解各个标签是不行的。下面就让我们来简单认识这些常用标签。

HTML5标签总表

 

 

1、标签的简单介绍

1.1 单标签、双标签

单标签:单个出现,以⾃身单个标签标识结束

双标签:成对出现,以自身第二个标签标识结束

 

1.2 ⾏内标签、块级标签、行内块标签

行内标签:可与其他行内元素并列一行;不能设置宽度和高度,高度是行高(line-height:100px;可设置),宽度是内容的总宽度;默认文字会被放在中间显示。例:<a>

块级标签:拥有⾃身宽⾼,通常独⾃占据⼀⾏独占一行;如果不设置宽度,会默认占满父元素的百分之百;可以当做容器包含其他标签。例:<div>

行内块标签:可以设置宽度高度等样式;可以和其他元素并排显示,现在只有input标签符合行内块元素;

 

1.3 单⼀标签、组合标签

单⼀标签:单独出现,表示具体的功能或展示具体的内容。

组合标签:配合使⽤,才能产⽣相应的内容与效果。例:

 <table>
     <tr>
         <td>
         </td>
     </tr>
 </table>

 

1.4 标签大小写书写规范

html5中的标签不区分大小写,都可以识别,不过这里建议标签全部小写。

因为js只能识别小写,为了之后对接js,标签最好全部小写。

 

2、head 中的标签

head是网页的头部,里面放置的代码是用来对网页进行相关设置

meat 标签

 <meta charset="UTF-8">

在网页中meat标签最常用的设置是用来设置字符集,字符集设置错误将会导致网页打开乱码。

title 标签

 <title>网页标题</title>

title 标签里是网页的标题,如下图所示:

 

显示在浏览器标签栏中

 <title></title> 需要写在  <meta charset="UTF-8">  标签后
 meta 标签设置字符集,若title写在前,则网页运行 title 时还没有设置字符集导致标题乱码。

 

style 标签

 <style>
  *{
  margin:0;
  padding:0;
  }
 </style>

style标签是用来在head标签中设置CSS样式,美化修饰网页。

 

script 标签

script 标签可以在其中写入js代码

 <script>
  var a = 10;
  var b = 20;
  console.log(a+b);
 </script>

当然也可以通过 script 标签来引入外部的js文件

 <script  src="01.js"></script>

 

link 标签

 <link rel="stylesheet" href="style.CSS">

通过 link 标签可以引入外部的 CSS 样式文件

 

ico 图标

 <link rel="shortcut icon" href=""/images/favicon.ico">

在网页标题前引入ico图标,如下图标签栏前的百度小图标

image

 

3、body 中的标签

body是网页的主体,网站上所能见到的内容基本都在body中,大部分标签也都是在body中使用。

h1-h6 标题标签

 <h1></h1>
 <h2></h2>
 <h3></h3>
 <h4></h4>
 <h5></h5>
 <h6></h6>

h1-h6 标签是标题标签。数字表示标题的大小,1最大,6最小。

 

p 段落标签

 <p></p>

块级元素。段落标签,内部通常放置文本

 

span 标签

 <span></span>

行内元素 。类似 p 标签,span 里同样用来放置文本,。

注意,span标签可以放在 p 标签内,但 p 标签里不能放 span 标签

 

hr 水平线

 <hr>

hr 标签在网页中产生一条水平线

 

del 删除线

 <del></del>

del标签中的文字字中间会被划上一条横线

 

b 加粗

 <b></b>

b 标签中的文字会被加粗

 

strong 加粗强调

 <strong></strong>

strong 标签中的文字会被加粗,并且强调

 

I 倾斜文本

 <i></i>

I 标签中的文字会被倾斜,在网页中显示斜体

 

em 倾斜强调

 <em></em>

em 标签中的文字会被倾斜,并且强调

 

pre 预格式文本

 <pre></pre>

pre标签表示预格式文本。由于在html会有多个空格会被合并成一个,回车换行会失效等问题,导致网页布局混乱。

pre标签内的内容可以原样显示到网页中

 

br 换行

 <br>

br标签表示换行,相当于enter回车键

 

ul li 无序列表

 <ul>
  <li></li>
  <li></li>
 </ul>
 type:属性值:定义了无序列表序号的类型
  disc:实心圆
  circle:空心圆
  aquare:实心方块
  none:什么都没有

ul li 标签表示无序列表,类似于表格,可以使文字等以清单的方式显示

 

ol li 有序列表

 <ol>
     <li></li>
     <li></li>
 </ol>
 type:属性值:定义有序序号的类型
  数字:(默认)
  a:小写英文字母
  A:大写英文字母
  i:小写的罗马数字
  I:大写的罗马数字

ol li 标签表示有序列表,类似于表格,可以时文字等以清单的方式显示,并且会在最前面标注序号,1、2、3、4等

 

img 图片

 <img src="./img/01.jpg" alt="图片">

img标签表示在网页中引用图片

 

a 超链接

 <a href="https://www.cnblogs.com/"></a>

a 标签表示在网页中添加超链接,a标签中点内容就会有超链接效果

 

div 盒子

 <div></div>

div标签常用于切割划分网页,把网页切割成各个部分,方便网页开发。

 

table tr th td 表格标签

 <table>
     <tr>
         <td></td>
         <td></td>
         <td></td>
     </tr>
 </table>

table标签是在网页中插入表格。tr表示行,td表示单元格。表格还常用于网页的布局

 

form 标签 & input标签

 <form action=" " method="get" >
     <input type="text"  placeholder="请输入用户名">
 </form>

表单标签:用于收集用户输入的信息,并提交到服务器。

input标签:可设置为输入框,按钮等

下划线:u

 <u></u>

上标:sup

 <sup></sup>

下标:sub

 <sub></sub>

 

表格:table

 <table>
  <tr>
  <td></td>
  <td></td>
  </tr>
 </table>
 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属性后
        一个表格最多只有一个标题

 

 

浮动框架:iframe 在网页中嵌套别的网页

 <iframe src="此处是网站地址"></iframe>
 语法:<iframe   src="规定在 iframe 中显示的文档的 URL(默认的显示页面)" width="" height=""   frameborder="1/0"  name="iframe名称"     scrolling="yes/no/auto">   </iframe>

 

 

结构标记 HTML5推出的专门用来布局的一组标记 目的: 取代div,提升整体代码的可读性和语意性 <header></header><div id="header"></div>一模一样基本没有区别 常用的结构标记

header:

 <header></header>
 定义网页的页眉部分或者其他部分的顶部内容

aside:

 <aside></aside>
 定义网页的导航部分

nav:

 <nav></nav>
 编写网页的导航部分

section:

 <section></section>
 整个网页的主体

footer:

 <footer></footer>
 表示网页底部,一般情况下是用户不太关注的部分

article:

 <article></article>

用来表示文章内容部分 论坛帖子,微博,说收,朋友圈,新闻等

 

flash插件:

 <object>
 <embed width="value" height="value" wmode="transparet" src="flash路径"></embed>
 </object>

滚动字幕:

 </marquee>

 

多媒体标签

 <atudio>

 

4、实体字符

由于标签字符的特殊性,<、>、空格、等特殊符号。会被浏览器误认成html语言的标签,不会在网页中显示。

所以为了在网页中正常使用这些字符则需要用到实体字符

下面介绍一些常用实体字符

 

实体字符字符含义网页中显示效果
&nbsp; 空格符号  
&lt; 小于号 <
&gt;
大于号 >
&copy;
版权符号 @
&yen;
人民币符号 ¥
&amp;
&
&reg;
注册商标 ®
&trade;
商标
&times;
乘号 ×
&divide;
除号 ÷

实体字符大全

posted @ 2019-07-20 17:44  DXSIX  阅读(448)  评论(0编辑  收藏  举报