html中的标签详解

2020-03-24 16:32:56

字体：大中小

来源：转载

供稿：网友

HTML标签是HTML语言中最基本的单位，HTML标签是HTML最重要的组成部分。网页的内容需在 html 标签中，标题、字符格式、语言、兼容性、关键字、描述等信息显示在 head 标签中，而网页需展示的内容需嵌套在 body 标签中。某些时候不按标准书写代码虽然可以正常显示，但还是应该养成正规编写习惯。

1.文档结构标签:主要用来标识文档的基本结构

a) html /html :标识HTML文档的起始和终止

b) head /head :标识HTML文档的头部区域

c) body /body :标识HTML文档的主体区域

2.文本格式标签:主要用来标识文本区块,并附带一定的显示格式

a) title /title :表识网页标题

b) hi /hi :标识标题文本,其中i表示1~6,分别表示一级、二级等标题

c) p /p :标识段落文本

d) pre /pre :标识预定义文本

e) blockquote /blockquote :标识引用文本

3.字符格式标签:主要用来标识部分文本字符的语义,如加粗/斜体/下划线显示

a) b /b :标识强调文本,以加粗效果显示

b) i /i :标识引用文本,以斜体效果显示

c) blink /blink :标识闪烁文本,以闪烁效果显示(IE浏览器不支持该标签)

d) big /big / small /small :标识放大/缩小文本,以放大/缩小效果显示

e) sup /sup :标识上文本,以上标效果显示

f) sub /sub :标识下文本,以下标效果显示

g) cite /cite :标识引用文本,以引用效果显示

使用各种字符格式标签显示一个数学方程式的解法

!DOCTYPE html
htmllang= en
head
metacharset= UTF-8
title 字符格式标签 /title
/head
body
p 针对下面这个一元二次方程: /p
p i x /i sup 2 /sup - b 5 /b i x /i + b 4 /b =0 /p
p 我们使用 big b 分解因式法 /b /big 来演示解题如下: /p
p small 由: /small ( i x /i -1)( i x /i -4)=0 /p
p small 得: /small br/ i x /i sub 1 /sub =1
br/ i x /i sub 2 /sub =4 /p
/body
/html

4.列表标签:在HTML中列表结构可以分为两种类型:有序列表和无序列表.无序列表使用项目符号来标识列表,而有序列表则是用编号来标识列表的项目顺序.

a) ul li ... /li /ul :标识无序列表. li /li :标识列表项目

b) ol li ... /li /ol :标识有序列表. li /li :标识列表项目

i. 使用无序列表和有序列表分别显示一元二次方程求解的4种方法

!DOCTYPE html
htmllang= en
head
metacharset= UTF-8
title 列表标签 /title
/head
body
h1 解一元二次方程 /h1
p 无序列表列出4种方法: /p
ul
li 直接开平方法 /li
li 配方法 /li
li 公式法 /li
li 分解因式法 /li
/ul
p 有序列表列出4种方法: /p
ol
li 直接开平方法 /li
li 配方法 /li
li 公式法 /li
li 分解因式法 /li
/ol
/body
/html

c) dl dt ... /dt dd ... /dd /dl :自定义列表,包括词条和解释两部分内容.

i. dl /dl 标识定义列表; dt /dt :标识词条; dd /dd :标识解释

ii. 使用定义列表显示两个成语的解释

!DOCTYPE html
htmllang= en
head
metacharset= UTF-8
title 列表标签 /title
/head
body
dl
dt 知无不言,言无不尽 /dt
dd 知道的就说，要说就毫无不保留 /dd
dt 智者千虑,必有一失 /dt
dd 不管多聪明的人,在很多的考虑中,也一定会出现个别错误 /dd
/dl
/body
/html

5.链接标签:实现把多个网页联系在一起

a) a /a :标识超链接.还可以定义锚点.锚点是一类特殊的超链接,它可以定位带网页中某个具体的位置.例如在下面实例中单击超链接文本,就可以跳转到页面的顶部.

!DOCTYPE html
htmllang= en
head
metacharset= UTF-8
title 链接标签 /title
/head
body
spanid= top 底部锚点位置 /span
divid= box > ahref= #top 单击返回顶部 /a
/body
/html

6.多媒体标签:主要用于引入外部多媒体文件进行显示.

a) img /img :嵌入图像

b) embed /embed :嵌入多媒体

c) object /object :嵌入多媒体

7.表格标签:用来组织和管理数据.

a) table /table :定义表格结构

b) caption /caption :定义表格标题

c) th /th :定义表头

d) tr td ... /td /tr : tr /tr 定义表格行; td ... /td 定义表格单元格

!DOCTYPE html
htmllang= en
head
metacharset= UTF-8
title 表格 /title
/head
body
tablesummary= 使用表格结构显示3行2列数据集 border= 1
caption ASCII字符集 /caption
tr
th 十进制 /th
th 十六进制 /th
/tr
tr
td 9 /td
td 9 /td
/tr
tr
td 10 /td
td A /td
/tr
/table
/body
/html

8.表单标签:主要用来制作交互式表单.

a) form /form :定义表单结构

b) input/ :定义文本域、按钮和复选

c) textarea /textarea :定义多行文本框

d) select /select :定义下拉列表

e) option /option :定义下拉列表中选择项目

!DOCTYPE html
htmllang= en
head
metacharset= UTF-8
title 表单 /title
/head
body
formaction= method= post
p 单行文本域: inputtype= text / /p
p 密码域: inputtype= password / /p
p 多行文本域: textareaname= textareafield value= /textarea /p
p 复选框: br 复选框1 inputtype= checkbox name= box1 value= / 跳舞 br
复选框2 inputtype= checkbox name= box2 value= / 唱歌 br
/p
p 单选按钮:
inputtype= radio name= radio value= nan 按钮1
inputtype= radio name= radio value= nv 按钮2 br
/p
p 下拉菜单:
selectname= selectlist
optionvalue= 1 选项1 /option
optionvalue= 2 选项2 /option
optionvalue= 3 选项3 /option
/select
/p
p inputtype= submit name= button id= button value= 提交 / /p
/form
/body
/html