介绍几个常用的HTML5标签

2023-02-28 09:25:02html-css09

介绍几个常用的HTML5标签,第1张

一、Html的基本结构：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

网页的文本、图片等信息；

</body>

</html>

二、Head部分：用于表示网页的元数据即描述网页的基本信息

其常用标签及属性有：

1、title标签：浏览器标签页显示的标题

2、meta标签：其常用属性

①charset:设置文档的字符集编码格式。HTML5中设置字符集编码：<meta charset="UTF-8">

常见的字符集编码格式：

a.GB-2312:国标码，简体中文

b.GBK：扩展的国标码

c.UTF-8：万国码 Unicode 常用

②http-equiv属性:将我们的信息写给浏览器看，让浏览器按照这里面的要求执行，可选属性值：Content-Type(文档类型) refresh(网页定时刷新) set-cookie(设置浏览器cookie缓存) 需要配合content属性使用。（http-equiv属性只是表明需要设置哪一部分，具体的设置内容，放到content属性中）

③name属性：使用方法同“http-equiv”。将我们的信息写给搜索引擎看

常用且需要掌握的属性值：author（作者） keywords（网页关键字） description（网页描述）这两个属性设置，网页必不可少。

3、link标签：链接网页图标（title前的小logo），其常用属性有：

①rel属性：声明链接文件的类型，此处选icon

②type属性：可以省略

③href属性：表示图片的路径地址

三、body部分：网页的文本、图片等信息

标签的分类：

块级标签：显示为块，前后隔一行（自动换行）

行级标签：按行从左往右逐一显示。

1、常见的块级标签：

①<h1></h1>......<h6><h6>：标题标签，自动加粗，h1最大，h6最小。

②<hr/>：水平线标签，添加一条水平线。

③<p></p>:段落标签，

④<br/>:换行标签，

⑤<blockquote/></blockquote>:引用标签，cite属性，表明引用的来源，一般引用网址

浏览器默认首行缩进。

⑥<pre></pre>:预格式标签，用于重载代码。浏览器默认显示样式：1、显示为等宽字体。 2、代码中的换行、

空格等元素能在浏览器中显示。

【补充】html 文件中空格的表示：&nbsp

2、基于布局的块级标签

列表：无序列表、有序列表、定义列表

①有序列表：<ol></ol>列表项：<li></li>

②无序列表：<ul></ul>列表项：<li></li>

③定义列表（实现图文混排）:<dl></dl>

列表标题：<dt>一般只有一项</dt>

列表描述项：<dd>可以有很多项</dd>

3、组合标签：<figure></figure>用于显示图片及图片标题

他有两个子标签：<img />图片

<figcaption></figcaption>图片的标题

例如：<figure>

<figcaption>探险家伊泽瑞尔</figcaption>

</figure>

4、分区标签：<div></div>

5、常见的行级标签

<1>span（文本）:无实际意义，用于包裹某部分文字，修改特定样式，例如：

这是<span style="color: redfont-size: 36px">span</span>中的文字

img（图片）：其常用属性：①src:表示引用图片的地址。

路径地址的写法：相对路径：以当前文件为最准，去寻找图片地址

a、与文件处于同一层的图片，直接写图片名

b、图片在当前文件下一层：文件名/图片名

c、图片在当前文件上一层：../图片名

绝对路径:file:///盘符：/文件夹/图片名，但是严禁使用

图片网址：网络上的图片链接，但是一般不用

②height和width：图片的高度和宽度。可以用CSS样式代替

③title：图片标。当鼠标指上之后显示的文字

④alt:当图片无法显示的时候，显示的文字

<2>em（倾斜强调）

<3>strong（加粗强调）

<4>b（加粗）

<5>i（倾斜）

Strong、em、b、i的区别

1、Strong、em都表示强调，Strong为粗体，em为斜体，而Strong的强调程度逗比em高

2、Strong和b都能加粗，em和i都能倾斜，，但是Strong和em多了一层强调的语义。H5要求标签尽可能实现语义化。

<6>q（短引用）

<7>small/big（缩小/放大字体）：small和big分别是缩小和扩大字体，都可以多层嵌套直至上限或下限

<8>a（超链接）

1、href:超链接的路径，可以是网络链接，也可以是本地文件。

2、target:跳转页面打开的位置。_self自身页面，_blank新页面。

3、title:鼠标指在超链接上显示的名称。

4、Rel（被链接是当前的前/后一篇）:指定被链接文档与当前文档的关系,搜索引擎会利用该属性获取更多的有关链接的信息：

rel="prev"被链接文档是当前文档的前一篇文档，

rel="next"被链接文档是当前文档的后一篇文档,

rel="icon"被链接文档是当前文档的图标

rel="stylesheet"被链接文档是当前文档的样式表

5、Rev（当前是被链接的前/后一篇）

锚链接：

①本页面锚链接:a、设置锚点：<a name="top"></a>

b、跳转锚点：#name名

①页面间锚链接:a、在即将跳转页面的指定位置设置锚点

b、跳转锚点：页面地址.html#name名

<a href="02_常见的块级标签.html#Hbuilder">页面间锚链接</a><br/>

功能性链接： mailto用于给指定邮箱发送邮件

file：///e:/aaa.png打开本地文件

tencent://message/?uin=1315618220 给指定QQ发送息

<9>s标签，有误文本：删除线

<s>这是S标签中的文字</s><br />

<10>cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用

<cite>这是cite中的文本</cite><br />

<11>code:计算机代码，不保留代码格式

<pre>

</pre>

<12>bdo:表示文本方向，属性：dir="ltr"表示从左往右，dir="rtl"表示从右往左

kbd:表示需要用户用键盘输入的内容，浏览器显示为等宽字体

请输入“<kbd>Esc</kbd>”推迟系统<br />

<13>sup:上标文本，sub:下标文本

x<sub>6</sub><br />

<14>u:下划线

<u>这是下划线</u><br />

mark:高亮或标记文本，浏览器显示为黄色背景

快捷键命令为“<!--

-->”。

1、首先需要打开html5的页面，如图所示，body标签内的内容输入命令“<!--

-->”。

2、script标签内的内容可以用“//”，如图所示，在前面的每一列编写。

3、最后，可以看到实现注释的效果了，如图所示，这样操作就可以解决问题了。

一、文本标签

1.1 标题标记：<hn align=”对齐方式”>标题文本</hn>

注意：

1.标题准备了<h1>----<h6>的标题，按照字号依次递减(块级元素)

2.align表示对齐方式，其值为left,center,right

1.2 字体标记：<font face=”字体名称” size=”字号” color=”字体颜色” >文字</font>

注意：中文网页以黑体，宋体，3号字的效果显示

1.3 段落标记：<p align=”对齐方式” >段落内容</p>

注意：<p>可以作为单标记或双标记：

单标记：段落与上文产生一个空行的间距。

双标记：段落与上下文之间产生一个空行的间距

1.4 换行标记：

注意：<br />表示换行，多次换行多次使用<br />

1.5 预格式化标记：<pre>.....</pre>

注意：预格式化标记可将空格、制表符、回车符等忽略

1.6 转义字符：转义字符让特殊字符显示出来。

语法：&实体名称

二、列表标记

2.1 无序列表

......

</ul>

注意： type表示了项目符号：

disc(默认) 实心圆

circle：空心圆

square：实心方块

2.2 有序列表：

......

</ol>

注意：1. 1:1,2,3,.......

a:a,b,c,d,e.......

A:A,B,C,D,E.......

i:i,ii,iii,iv......

I:I,II,III,IV......

2.start表示起始值,从第几个数开始计算

2.3 嵌套排列

</ul>

</ol>

2.4 分割线标记：<hr align=”对齐方式” size=”水平线高度” width=”水平线宽度”

color=”水平线颜色”>

三、超链接标记

3.1 文本链接：<a href=”目标URL” target=”目标窗口”>指针文本</a>

注意： 1.href表示文本链接的目标资源的URL

绝对地址和相对地址

绝对地址：在任何情况下都可以找到的地址（例如：网址）

相对地址：必须知道当前所在，才能找到（../表示上一级目录，/表示下级目录）例子：../img/baidu.jpg表示在当前位置的上一层目录下的img文件夹中的baidu.jpg 文件。

3.2 图片标记：<img src=”图片文件路径” alt=”提示文本” height=”图片高度” width=”图片宽度”/>

3.3 多媒体标记

3.3.1 滚动字幕标记：marquee可以实现文字或图片的跑马灯效果

marquee的属性：

behavior 指定了跑马灯的效果：scroll(滚动)、slide(滑动)、alternate(交替)

bgcolor:跑马灯的背景颜色

direction:跑马灯的移动方向，left（左）、right(右)、up(上)、down(下)

scrolldelay:每次移动的延迟时间，单位毫秒

loop:跑马灯运行次数，-1表示无限循环

height、width

hspace:左右空白宽度

vspace:上下空白宽度

3.3.2 嵌入音乐文件

3.3.3 嵌入视频文件

四、表格

4.1 表格基本语法：

<table>

<tr>

......

<td>单元格内容</td>

......

</tr>

</table>

注意：

<table>:声明一个表格对象

<tr>:声明一行

<td>:声明一个单元格

4.2 表格的基本属性

1.align 对齐方式：left、center、right

2.border:表格边框

3.bordercolor:边框颜色

4.bgcolor:表格背景颜色

5.background:背景图片

6.height、width

4.3 单元格合并

1.rowspan:所跨的行数

2.colspan:所跨的列数

五、表单

5.1 表单标签：<form action=”URL” method=”get|post” target=”...”></form>

注意：<form>：该标记中包含的数据将被提交到服务器或者电子邮件中

action:指定服务器端处理提交表单信息的程序是什么。URL地址或电子邮件地址

method:get/post:数据传输到服务器的传递方法

target:服务器返回文档结果的显示位置：_blank:在新的浏览器窗口中打开

_self:在当前浏览器中显示

5.2 表单标记

5.2.1 input标签：<input type=”类型” name=”服务器获取用户输入信息的名字” value=”初始值”>

注意：1.type类型（输入类型）:

1. text:单行文本框

2. password:密码输入框

3. radio:单选按钮 checked表示默认

4. checkbox:复选框 checked表示默认

5. submit:提交按钮

6. reset:重置按钮

7. button:普通按钮

2.maxlength：输入的最大长度

5.2.2 select标签

<option value=”选项1” > 选项1

.......

<option value=”选项n” > 选项n

</select>

注意：name:服务器获取用户输入信息的名字

value ：初始值

option：下拉框的内容

multiple:多选，若没有multiple则是单选

selected:表示默认选项

size:表示长度

5.2.3 textarea 标签：<textarea name=”...” cols=”...” rows=”...” wrap=”off/virtual/physical”>

</textarea>

注意: name：多行文本框的名称

cols：一行可容纳的字符数

rows：表示可显示额的行数

wrap:virtual和phycal控制自动换行

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：【转】CSS实现div的高度填满剩余空间

# 下一篇：电脑上的字如何放大

推荐阅读

热门文章

最新发布

标签列表

介绍几个常用的HTML5标签

给您推荐相同类型的内容：