HTML中常用标签–详解

5,679次阅读
没有评论

共计 5014 个字符,预计需要花费 13 分钟才能阅读完成。

目录

1.b/strong 标签

2.i/em 标签

3.u 标签

4.del 删除线

5.br 换行

6.p 标签 *

7.pre 预处理标签

8.span 标签 **

9.div 标签 ***

10.sub 标签

11.sup 标签

12.hr 标签

13.hn 标签

14.HTML5 中语义标签

特殊字符

15. 多媒体标签

img***

a 标签 ***

第一种用法:超链接

第二种用法:锚点

audio 标签

video 标签

16. 表格标签 **

基本表格

带标题的表格

跨行跨列表格

表格嵌套

17. 列表标签 ***

ul

ol

dl

18. 表单标签 ***

form 标签

input

select

textarea


1.b/strong 标签

这个标签是用于加粗文字的,一般用于强调某个部分的作用。

   
    b/strong 标签的使用


2022 年 3 月 23 日 HTML文档也叫做 web 页面 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词, 比如 HTML 标签通常是成对出现的

在以后使用中,推荐使用 strong 标签。

2.i/em 标签

它们的使用是让 文字变为斜体

   
    b/strong 标签的使用


2022 年 3 月 23 日  HTML 文档也叫做 web 页面  HTML 标签 HTML  标记  标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词, 比如 HTML 标签通常是成对出现的

3.u 标签

它的作用是给文字 添加下划线

   
    b/strong 标签的使用


2022 年 3 月 23 日  HTML 文档也叫做 web 页面  HTML 标签 HTML  标记  标签  通常  被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词, 比如 HTML 标签通常是成对出现的

4.del 删除线

它的使用是给文字 添加删除线

   
    b/strong 标签的使用


2022 年 3 月 23 日  HTML 文档也叫做 web 页面  HTML  标签  HTML  标记  标签  通常  被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号包围的关键词, 比如 HTML 标签通常是成对出现的

5.br 换行

不需要

   
    b/strong 标签的使用


2022 年 3 月 23 日  HTML 文档也叫做 web 页面  HTML  标签  HTML  标记  标签  通常  被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词, 比如 HTML 标签通常是成对出现的

6.p 标签 *

这个标签是一个段落标签,它本身就自带了 行间距。在这个标签中的文件会独占一行。

   
     p 标签的使用


HTML 不是编程语言,是一种超文本标记语言,用来制作网页的一门语言,由标签组成的,比如:图片标签、链接标签、视频标签...   所谓超文本,有两层含义:

html 可以加入图片、声音、动画、多媒体等内容(超越了文本的限制)

html 可以从一个文件跳转到另一个文件,与世界各地主机的文件连接(超级链接文本)

HTML 页面也称为 HTML 文档

HTML 文档的后缀名必须是.html 或 .htm,浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们   HTML 文档里按下多次空格,在网页中只会显示一个空格,并且在 HTML 文档里按下回车键,在网页中也不会进行换行

7.pre 预处理标签

        这个标签的作用是 书写的内容与显示的样式内容相同

   
    pre 标签


           静夜思
        床前明月光,疑是地上霜。举头望明月,低头思故乡。

这个标签 一般用于显示源码 的。

8.span 标签 **

        它是一个行内标签,它没有什么特殊的意义,但是在使用中却比较多。一般会接合 css 样式来修饰文本。

   
    span 标签
    


静夜思版本说明  明代版本  这是目前流传比较广泛的版本。

9.div 标签 ***

它是一个块状标签,一般用于页面布局。

   
    div 标签


div 标签是一个块状标签,一个 div 标签会独占一行,
它没有任意的属性,但是我们可以给它自定义一个属性,例如,id、class 等。

10.sub 标签

这个标签的作用是指定下标,一般用于数字方面。

   
    sub


log2

11.sup 标签

这个标签的作用是指定上标,一般用于数字方面。

   
    sup


23=8

12.hr 标签

这个标签用于给页面划水平线。不需要

       hr静夜思 
床前明月光,疑是地上霜。举头望明月,低头思故乡。

标签属性说明:

size:用于指定线的粗线,值越大线越粗
width:用于指定线的宽度,值越大越宽
align:用于指定线的对齐方式,有以下三个值:left:居左对齐
   center:居中对齐,它是默认值
   right:居右对齐

13.hn 标签

这个标签中的 n 是 1 ~ 6 的数字,一般用于标题。

   
    hn


h1

h2

h3

h4

h5
h6

14.HTML5 中语义标签

这个标签是 HTML5 中定义的新的语义标签,有以下几个:

  • header:用于定义页面的顶部

  • article:用于表示文章的内容

  • section:用于定义内容的分块信息

  • nav:用于定义页面的导航部分

  • aside:用于定义页面的侧边栏

  • footer:用于定义页面的页脚部分

  • address:用于定义用户邮件、地址等信息

   
    html5 新标签的使用


这是头部信息
@copyright; 2024

特殊字符

在 HTML 中有很多特殊字符,如下表所示

特殊字符 转义码
空格  
> >
版权 ©

15. 多媒体标签

img***

这个标签的作用是在页面中引入图片

   
    img 标签


 这是图片 

标签属性说明:

src:这个属性非常重要,用于指定图片显示的路径,可以是相对路径,也可以是绝对路径。(简单来        说,在 windows 中带了盘符,在 Linux 中以 / 开头的路径,在链接中以 http:// 开头的就是绝对路径,其他都是           
相对路径。相对路径的参考点就是这个对象本身。)width:用于指定图片显示的宽度,如果只指定宽,则高会根据宽度来等比例绽放
height:用于指定图片显示的高度,如果只指定高,则宽度会根据高度来等比例绽放。注意:width 和 height 两个属性不要同时指定。border:用于指定力图片显示的边框粗细,默认是无边框
alt:是在图片不能正常显示时才会显示这个文字内容
title:用于当鼠标移动到图片上时显示的提示信息。一般用于搜索引擎优化。

a 标签 ***

这个标签是用于作链接的标签。

第一种用法:超链接
   
     a 标签


百度
打开百度

属性说明:

href:这个属性是一个必须属性,用于指定要打开的目标地址
target:链接打开的方式,有以下几个值:- _blank:在新窗口打开
   - _self:在本窗口打开,默认值
   - _top:在父窗口打开,一般用于 frame 框架时
   - _parent:在父窗口打开,一般用于 frame 框架时
第二种用法:锚点
   
    锚点


底部 | demo2.html

   
    demo2


demo1.html

audio 标签

这个标签是用于播放音乐的标签。常用支持格式为 mp3 格式。

   
    audio


标签属性说明:

1. controls:它是用于对播放器进行控制器的,即显示播放器的控制按钮
2. src:用于指定音频文件的路径
3. autoplay:指定是否自动播放
4. loop:指定是否循环播放

video 标签

   
    video


标签属性说明:

1. src:指定要播放的视频地址,可以是相对路径,也可以是绝对路径。这个标签所支持的视频格式不多,目前只把持 mp4、ogg 两种
2. controls:显示播放控制按钮
3. autoplay:自动播放
4. loop:自动循环
5. width:设置播放器的宽度
6. height:设置播放器的高度

16. 表格标签 **

在我们进行数据展示时,很多时候都会用到表格,特殊是在后台进行数据管理时,或者显示列表数据时,就会用表格。

要使用表格就需要用到 table 标签,而表格是由行和列组成。行的标签是 tr,而列的标签是 td 或 th。

基本表格

   
    简单表格
   

       

       

       

   

   

       

       

       

   

1 2 3
4 5 6

表格的标签和属性说明:

table:用于绘制表格
tr:用于绘制表格的行
td:用于绘制表格的列(单元格)width:指定表格的宽度,也可以是 td 的属性
border:指定表格的边框粗细
cellspacing:指定单元格之间的间距
cellpadding:指定单元格边框与单元格中内容的距离
align:用于指定表格对齐方式:- left:左对齐,默认值
   - center:居中对齐
   - right:右对齐
   
   align 属性可以是 table,也可以是 tr,还可以是 td。如果是 table 的,表示对整个表格有效;如果是 tr 的,表示对当前行有效;如果是 td 的表示只对当前的单元格有效。​

带标题的表格

   
    带标题的表格


   

   

   

       

       

       

   

   

   

   

       

       

       

   

   

       

       

       

   

   

       

       

       

   

   

   

   

       

       

       

   

   

第二个表格
编号 姓名 年龄
1 2 3
4 5 6
7 8 9
hello

        使用 caption 来指定表格的标题,使用 thead 标签来指定表格的头,tbody 来指定表格数据区,tfoot 指定表格的尾部

td 和 th 的区别:

  1. td 中的内容是普通格式,而 th 中的内容是加粗的格式

  2. td 中的内容是左对齐,而 th 中的内容是居中对齐

跨行跨列表格

   
    跨行跨列的列表
 

   

   

   

 

 

   

   

   

   

 

 

   

   

   

 

1 3 4
5 6 7 8
9 10 11

相关属性说明:

1. colspan:用于指定要跨多少列,它的值是一个数字
2. rowspan:用于指定要跨多少行,它的值是一个数字

表格嵌套

   
    表格嵌套
   

       

       

   

   

       

       

   

1 2
3            

               

                   

                   

               

               

                   

                   

               

           

41 42
43 44

       

17. 列表标签 ***

在 HTML 中,列表标签有以下几种:

ul

它是 无序列 表标签

   
    ul
       

  • 西安
  •    

  • 北京
  •    

  • 重庆
  •    

  •        

                 

    • 1
    •            

    • 2
    •            

    • 3
    •        

       

标签和属性说明:

ul:用于指定无序列表
li:指定列表中的某一项
type:指定无序列表的格式,有以下几个值:(了解)- disc:实心圆形,默认值
    - square:实心方形
    - circle:空心圆形

ol

它是 有序 列表

   
    ol


       
  1. 北京
  2.    
  3. 上海
  4.    
  5. 天津
       
  1. 北京
  2.    
  3. 上海
  4.    
  5. 天津
       
  1. 北京
  2.    
  3. 上海
  4.    
  5. 天津
       
  1. 北京
  2.    
  3. 上海
  4.    
  5. 天津

type 属性有以下值:

1. 数字:默认值
2. a:以小写字母 a 开始
3. A:在大写字母 A 开始
4. i:以罗马字开始

dl

它数据列表

   
    dl
   

陕西地名

   

西安

   

潼关

   

宝鸡

18. 表单标签 ***

form 标签

这个标签是用于表单提交的标签,一般在与用户交互时就会用到 form 标签。

   
    form 表单标签
   

标签属性说明:

name:用于给这个表单取一个唯一的名称,便于后续使用 js 来操作这个表单
action:表单提交的地址
method:表单提交的方式,有以下两个值:- get:表单以 get 方式提交
    - post:表单以 post 方式提交

补充 get 和 post 提交的区别:

  1. get 提交的数据会以参数的形式体现在浏览器地址栏中,而 post 提交的数据是在请求头中

  2. get 提交方式提交的数据不能超过 4k 大小,而 post 提交方式理论上是没有大小限制的

input

这是表单元素中非常重要一组标称,它有很多类型:

   
    form2 表单元素之 input 的使用
   
   
   
   
       
    看书 电影 游戏
   
   
   
   
   

select

select 是下拉列表标签

   
    form 表单之下拉列表
   

   



   

标签属性说明:

name:表单提交时要获取对应元素值是所需要的属性
value:指定 select 中每一个子元素的值
size:指定 select 可看到的元素个数,默认值是 1
multiple:表示可以多选

textarea

这个标签是用于输入大文本内容的标签。

   
    form 表单之 textarea
   

标签属性说明:

name:用于获取元素值的属性
cols:用于指定文本框的宽度
rows:用于指定文本框的高度

原文地址: HTML 中常用标签 – 详解

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-10-23发表,共计5014字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)