小范同学的前端之路——初识HTML5标签（一）

最新推荐文章于 2022-09-06 14:42:19 发布

Only one*

最新推荐文章于 2022-09-06 14:42:19 发布

阅读量176

点赞数 1

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/m0_51539924/article/details/109116606

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

什么是HTML5?
网页的组成部分
html标签的语法、分类和属性
文档结构标签
a标签（添加超链接）
h标签、p标签
div标签、pre标签
img标签
ul,ol,li,dl,dt,dd（无序列表、有序列表、自定义列表）
b,strong,i,em,u,del,sup,sub（格式化文字样式的标签）
table标签

1.什么是HTML5?

HTML5指的是新的html标准，html是超文本标记语言：Hyper Text Markup Language 。
HTML5是一个新的网络标准，包含了原HTML4的基础上新增了一些新的标准。目标是取代现有的HTML 4.01和XHTML 1.0标准。它希望能够减少互联网富应用（RIA）对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。

2. 网页的组成部分——W3C标准

由国际万维网联盟制定的一系列标准包括：

结构化标准语言（HTML&XML）
呈现内页内容
文字、图片等
表现标准语言（CSS）
网页样式
颜色、字体大小
行为标准语言（DOM&ECMAScrip）
网页的交互行为（JavaScript）
轮播图

3. html标签的语法、分类和属性

语法
规定：每一个标签都应该闭合！
基本的语法是：<开始标签></结束标签>
分类
双标签：<开始标签></结束标签>，如<html> </html>
单标签：<开始标签 /> 如：<link />
属性
在“开始标签名”后，用空格分隔来写，多个标签属性也用空格来分隔。
每一个标签属性都由 key=“value” ,每个值用引号引起来。引号必须是成对写，不能是单、双引号交叉使用。
错误的案例：‘aaa"
正确的案例：“aaa”, ‘aaa’
如：<link type="text/css" rel="stylesheet" href="login.css" />
标签属性有全局标签属性和私有标签属性之分。
全局：所有标签都可以使用的标签属性。
如： id,class,style,data-*,…
私有的：<a href="" alt="" ></a>

4. 文档结构标签

文档标题、段落和列表等称作结构。结构使内容更加具有逻辑性，易用性。
在网页中，结构的定义使用的是HTML语言。
网页结构
关于meta

5.a标签（添加超链接）

a标签

6. h标签、p标签

h标签、hr标签
p标签

7. div标签、pre标签

div、pre在这里插入图片描述
网页中呈现出来的效果就是这样的：
div、pre效果

8. img标签

img标签一定要用div标签包裹起来

9. ul,ol,li,dl,dt,dd（无序列表、有序列表、自定义列表）

ul,ol,li,dl,dt,dd
它们都是块级标签，所以说，一般就可以不使用div来包裹。
块级标签的特点是每个标签都独占一行。一行无法显示完内容时，自动换行显示。
可以自行了解type,start两个标签属性。
ul、ol、dl
ul、ol、dl效果图

10. b,strong,i,em,u,del,sup,sub（格式化文字样式的标签）

用于格式化文字的样式的标签，都是内联标签（行内标签）
格式化文字标签
效果图

11. table标签

table, thead,tbody,tfoot
caption,tr,th,td

<table>: 画一个表格
<tr>: 画一个行
<td>:画一个列, 单元格中的内容，默认是垂直居中的。水平居左。
<th>:画一个醒目的栏目标题，相当于一个列。内容加粗，水平居中显示

标签属性：
table:
border=“1” 设置边框的粗细；
width=“400” height=“400”：宽度和高度；
align=“center”：设置表格页面中的水平对齐的位置： left: 左。right:右；center:居中
cellpadding=“10”: 设置td标签的边框与内部文本内容的间隔距离。
cellspacing=“0”：设置td与td之间的间距。
bgcolor=“red”: 设置整个表格的背景色
background=“图片地址” :设置表格的背景图片

thead,tbody,tfoot三个标签在table中的顺序，是不分先后顺序的。最终显示的结果，顺序都是按thead,tbody,tfoot显示的。

tr:
heihgt: 高度；
align=“center”: 让一行中的内容，在td单元格中，水平居中显示。
在tbody,tr,td中，都可以使用 align属性：
在td中，可以使用width,height

标签的关系：
table > caption,thead,tbody,tfoot > tr > th,td
父 > 子的关系。
table标签
在这里插入图片描述