学习笔记之HTML5文档、标签、段落规范

最新推荐文章于 2022-05-09 06:20:00 发布
最新推荐文章于 2022-05-09 06:20:00 发布
阅读量656 收藏 1
点赞数
文章标签： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feng_en_t/article/details/85252129
版权

1. HTML5文档-结构代码

<!DOCTYPE html>          <!--声明文档类型-->
<html lang=zh-cn>        <!--声明文档语言编码-->
	<head>               <!--文档头部区域-->
		<meta charset="utf-8" />  <!--定义字符集，设计字符编码，utf-8是通用编码-->
		<!--[if IE]><![endif]-->  <!--IE专用标签，兼容性写法-->
		<title>test</title>     <!--文档标题-->
		<!--[if IE 9]><meta name=ie content=9><![endif]-->   <!--兼容IE9-->
		<!--[if IE 8]><meta name=ie content=8><![endif]-->   <!--兼容IE8-->
		<meta name="description" content=文档描述信息 >  <!--定义文档描述信息-->
		<meta name="author" content=文档作者>    <!--开发人员署名-->
		<meta name="copyright" content=版权信息 > <!--版权信息-->
		<link rel="shortcut icon" href="favicon.ico" >  <!--网页图标-->
		<link rel="apple-touch-icon" href="custom_icon.png" /> <!--apple设备图标的引用-->
		<!--不同接口设备的特殊声明-->
		<meta name="viewport" content=width=device-width, user-scalable=no />
		<link rel="stylesheet" href="css/main.css" />  <!--引用外部样式文件-->
		
		<!--兼容IE的专用样式表--><!--if IE7-->
		<!--[if IE]--><link rel="stylesheet" href="win-ie-all.css" /><![endif]--> 
		<link rel="stylesheet" type="text/css" href="win-ie7.css" /><![endif]--><!--兼容IE7浏览器-->
		<!--让IE8及早期版本也兼容HTML5的JavaScript脚本-->
		<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"></script><![endif]-->  
        <script src="js/script.js"></script>   <!--调用javascript脚本文件-->	
	</head>
	<body>
		<header>HTML5 文档标题</header>
		<nav>HTML5 文档导航</nav>
		<section>
			<aside>HTML5 文档侧边导航</aside>
			<article>HTML5 文档的主要内容</article>
		</section>
		<footer>HTML5 文档页脚</footer>
	</body>
</html>

2. HTML5标签

HTML5新增了27个标签，废弃了16个标签。

2.1 结构性标签

结构性标签主要负责Web的上下文结构定义，确保HTML文档的完整性。

① <section>：用于表达书的一部分或一章，或者一章内的一节。在Web页面应用中，该元素也可以用于区域的章节表述。

② <header>：页面主体上的头部，注意区别于<head>标签。（<head>标签中的内容是不可见的，<header>标签出现在一对body元素之中。

③ <footer>：页面的底部/页脚。（网站的相关信息）

④ <article>：用于表示一篇文章的主体内容，一般为文字集中显示的区域。

2.2 级块性标签

级块性标签主要完成Web页面区域的划分，确保内容的有效分隔。

① <aside>：用以表达注记、贴士、摘要、插入、侧栏的引用等作为补充主体的内容。

② <figure>：是对多个元素进行组合并展示的元素，通常与<figcaption>标签联合使用。

③ <code>：用于表达人与人之间的对话。还包括<dt>和<dd>这两个组合标签，通常一起使用。<dt>用于表示说话者，<dd>表示说话者说的内容。

2.3 行内语义性标签

行内语义性标签主要完成Web页面具体内容的引用和表述，是丰富内容展示的基础。

① <meter>：表示特定范围内的数据，可用于工资、数量、百分比等。

② <time>：表示时间值。

③ <progress>：用来表示进度条，可通过对其max、min、step等属性进行控制，完成对进度的表示和监视。

④ <video>：视频元素，用于支持和实现视频（含视频流）文件的直接播放，支持缓冲预载和多种视频媒体格式，如MPEG-4、OggV和WebM等。

⑤ <audio>：音频元素，用于支持和实现音频（音频流）文件的直接播放，支持缓冲预载和多种音频媒体格式。

2.4 交互性标签

交互性标签主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。

① <details>：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如点击）与legend交互才会显示出来。

② <datagrid>：用来控制客户端数据与显示，可以由动态脚本即时更新。

③ <menu>：主要用于交互菜单（这是一个曾被废弃现在又被重新启用的元素）。

④ <command>：用来处理命令按钮。

3. 设计段落版式

设置段落样式：HTML语法中可以利用<p>标签来区分段落，换行可以利用<br>标签来完成。

设置对齐和缩进：① <pre>标签：可以让文字按照原始代码的排列方式进行显示。

② <blockquote>标签：用来表示引用文字，会将标签内的文字换行并缩进。该标签包含一个属性cite，该属性取值为URL，定义引用的来源。

添加分割线：<hr>

设置标题样式：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>这几个标签是设置段落标题的大小级别，从大到小。由这些单个的标签标识的文字，将会独占一行。

注意：HTML5不再支持<h1>~<h6>标签的align属性，要想设置标题放置的位置，可以利用CSS进行调整。

设置字形样式：HTML5对<font>标签已经停用。

① <b>标签：将文字设置为粗体。

② <i>标签：将文字设置为斜体。

③ <u>标签：为文字添加下划线。

注意：

1. <b>、<i>、<u>都必须有结束标签。三者可以组合使用。

2. 基本上，HTML5不建议使用这些字形标签，最好使用CSS来代替。

① <b>标签可以用CSS的font-weight属性代替；

② <i>标签可以用CSS的font-style属性代替；

③ <u>标签可以使用text-decoration属性代替。

设置上标、下标：① <sup>标签：将文字设置为上标；

② <sub>标签：将文字设置为下标。通常用于数学公式、化学方程式等。

用法如下：

<p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>

参考书籍：未来科技《HTML5 APP开发从入门到精通》

天然呆ftt
关注
H5语义标签和CSS文件命名规范
impact_factor的博客
04-25 570
H5语义标签和命名规范一、在HTML5中的语义标签：二、命名规范： 一、在HTML5中的语义标签： 1、<thead></thead>：表示表格的头部 2、<tbody></tbody>：表示表格的主体 3、<header></header>：表示页面的头部 4、<nav></nav>：表示导航栏 5、<footer></footer>：表示页面或区域的底部 6、<arti
HTML5学习笔记
m0_61721166的博客
03-08 8996
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
H5的段落标签、图片标签、列表标签与链接标签
weixin_30622107的博客
03-21 926
段落标签 （1）<p>段落标签</p> （2）<nobr>强制不换行标签，会出现滚动条</nobr> （3）<pre>保留原始排版标签</pre> 图片标签 图片标签的常用属性有以下6个： （1）src：路径 （2）alt：提示文字 （3）width,height:宽度与高度 （4）border：边框 （5...
html5段落
bendan233的博客
03-22 248
&lt;html&gt; &lt;head&gt; &lt;title&gt; 故事 &lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;从前有座山 山里有座庙 庙里有个老和尚讲故事 讲的什么呢&lt;/p&gt; &lt;p&gt;从前有座山 山里有座庙 庙里有个老和尚讲故...
8.HTML 教程- (HTML5 段落）
chengsi7614的博客
06-03 428
HTML 教程- (HTML5 段落） 1.HTML文本格式化 HTML 文本格式化标签 标签 描述 <b> 定义粗体...
html5 标签书写的规范
weixin_34038293的博客
07-29 627
标记由以下几部分组成，严格按照下列顺序： 一个 "<" 字符. 元素的标记名称. 可选的，一个或多个属性，其中每一个的前面必须有一个或多个空格字符。（class id data href等顺序） 可选的，一个或多个空格字符。 可选的，一个“/”字符，它可以存在且仅当元素是一个空元素时。 一个 ">" 字符 这意味着“/“”字符在HTML5中是可选的，它不添加任何意...
前端学习之路-html笔记
07-17
一个HTML文档就是一个网页，它包含HTML标签和纯文本。当浏览器读取HTML文档时，它会根据标签的含义来解析和显示内容。例如，`<h1>`标签表示一级标题，`<p>`标签则表示段落。以下是一个简单的HTML文档示例： ```html...
html5学习笔记
HeartdreamX的博客
05-09 256
HTML5的基础框架 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
HTML学习笔记（一）文档结构和基本标签
寒夜客来茶当酒
05-30 132
HTML学习笔记（一）文档结构和基本标签文档结构基本标签运行效果 文档结构 <!DOCTYPE html> <!-- 申明下面的代码以html5规范去解析 --> <!-- 头部,主要完成一个网页的相关设置 --> <head> <meta charset="utf-8"> <!-- 汉字编码--> <meta name="keyword" content=""&
PHP从入门到精通_html+CSS笔记.rar_8V4_PHP从入门到精通 学习文档_php 学习
最新发布
09-24
4. **HTML结构**：HTML文档的结构包括头部（head）、主体（body）等部分，以及各种标签如段落（p）、标题（h1~h6）、链接（a）、表格（table）、图像（img）等。理解这些元素的用途和用法，是构建网页内容的基础。 ...
HTML 段落
Gino的专栏
09-15 484
可以把 HTML 文档分割为若干段落。 HTML 段落 段落是通过 标签定义的。 实例 This is a paragraph This is another paragraph浏览器会自动地在段落的前后添加空行。（ 是块级元素） HTML 折行 如果希望在不产生一个新段落的情况下进行换行（新行），请使用 标签： This isa paragraph with l
HTML 05 段落
武林半侠的博客
10-29 860
HTML 5 段落 这是段落 1.浏览器会自动地在段落的前后添加一行空行。（ 是块级元素） 添加一行空行不用，这是个坏习惯，用换行标签。例如： 这是段落。 这是段落。 结果为： 这是段落。 这是段落。 2.HTML拆行，即不空一空行的情况下，另起一行，例如： 这是一段非常长的段落。 结果为： 这是一段非常 长的段落。 注：的作用相当于
HTML5 第001篇 标签规范
ml_YSY的博客
11-01 172
前言：无规矩，不成方圆。学习任何一门语言，入门都得学习规矩，如同刚上学，老师说道：上课45分钟不能大声喧哗，不得无故离开课堂，不得随意走动等。目的：掌握相应的规则，让自己更少犯错。 <1HTML5文件样式规则 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>页面标题</title> </head&.
HTML5学习笔记三 HTML元素、属性、标题、段落简介
dfgwang1202的博客
04-11 137
一、HTML 元素 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭（以开始标签的结束而结束） 大多数 HTML 元素可拥有属性 嵌套的 HTML 元素 　 HTML 文档由嵌套的 HTML 元素构成。 &...
HTML5——网页的基本标签（标题标签、段落标签、换行标签、水平线标签、字体样式标签、注释、特殊符号
beishanqiye的博客
09-25 900
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本标签</title> </head> <body> <!--标题标签,用来当标题的--> <h1>一级标签</h1> <h2>二级标签</h2> <h3>三级标签</h3&gt.
html标准文档,标准的html5文档
weixin_39565910的博客
06-03 295
说起HTML的结构，很多人都能说得头头是道，一般来说答案可能是这样的：一个DOCTYPE，一个html，里面有head和body元素。这当然不能说是不正确的，但是如果问到一个最小的HTML源文件必须有哪一些东西的话，恐怕很少有人能正确地做出回答。先来回答一下这个问题，一个最简的HTML5源码文件需要的内容如下：是的，就这样，一个字符不多，一个字符不少，除了大小写可任意变化外，其他的任何内容都是不能...
HTML规范文档
CSDN前端知识共享
09-23 370
前言 代码进行统一有效的管理，编码进行规范性要求。统一使用html5标准
html5段落语言,8.HTML 教程- (HTML5 段落）
weixin_40000430的博客
05-31 206
8.HTML 教程- (HTML5 段落)1.HTML段落HTML 可以将文档分割为若干段落。1.HTML 段落段落是通过 标签定义的。 2.HTML 折行如果您希望在不产生一个新段落的情况下进行换行(新行)，请使用标签：实例这个段落演示了分行的效果* 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。3., 以及 (带有空格)区别是 HTML 写法。...
HTML学习笔记：基础框架与常用标签详解
本篇学习笔记主要介绍了HTML的基础知识，包括HTML5的结构框架、常用的标签以及文本样式处理，以及表格的基本用法。首先，HTML5的大体框架由`<!DOCTYPE html>`声明开始，明确告知浏览器这是HTML5规范的文档。整个结构...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值