web前端篇:html基础知识（2） - 好文

HTML基础语法

1.1.标签/标记

在网页中具有特殊功能的符号，HTML中所有的标签都以<>为标志，作用区分普通文本。

标签分类

1.双标签

成对出现，有开始有结束。

eg:<开始标签> 标签内容 </结束标签>

2.单标签

只有开始标签，没有结束标签，可以手动添加、表示结束。

eg:<标签名>

标签嵌套

在成对的标签中出现其他标签。

嵌套结构中，外层元素程为父元素，内层元素称为子元素
<a> <b>你好</b> </a>  
书写规范
HTML不区分大小写，保持适当缩进增强代码可读性

1.2 标签属性

标签的属性主要用于修饰标签的显示效果。
相关语法：
属性由属性名和属性值组成：属性名=“属性值”
属性的声明必须写在开始标签中：<开始标签属性名=‘属性值’>…
每个标签都可以设置多个属性，属性之间使用空格隔开：<开始标签属性名=‘属性值’ 属性名=‘属性值’ 属性名=‘属性值’>…

1.3 HTML注释
注释语句：
注意：
注释不能卸载标签里，如

注释不能嵌套

1.4HTML结构组成
文档的类型声明方式：开头第一行<!doctype html> html5声明方式

作用：告诉浏览器当前使用的HTML版本，以便浏览器能正确解析HTML标签和渲染样式。
书写位置：文档最开始位置。
文档的开始和结束

在文档类型声明之后，使用一对标签标示文档的开始和结束

在HTML标签中，包含两对子元素
<html> <head></head> <body></body> </html>
<head>标签标示网页的头部信息，包含网页的标题，选项卡的图标，网页的关键字，作者，描述等信息，还可以引入外部的资源文件
<body>标签表示网页的主体信息，网页所呈现的内容都要写在body里 <head>标签中包含的子元素
设置网页的标题
设置网页的字符编码

1.5文本标签

1.5.1.字符实体（具有特殊意义的符号）

表示一个空格
< 表示小于号 <
> 表示大于号 >
‘© ;’ 表示版权符号
¥ 表示人民币符号¥

1.5.2.文本样式

斜体显示文本
文本添加下划线
文本加粗效果
文本添加删除线
上标显示文本
下标显示文本
特点：这些标签可以与其他的标签或文本共行显示

1.5.3.标题标签

以不同的文字大小和加粗方式显示文本

语法：n取值 1- 6，字体大小是逐级递减的
<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4>
<h5>这是五级标题</h5> <h6>这是六级标题</h6>
特点：

会改变文字的大小并且具有加粗效果
每个标题都会具备垂直的空白距离
每个标题都独占一行，不与其他元素共行显示
每个标题都可以添加属性 align
取值：left / center / right
设置文本的水平对齐方式，默认居左对齐

一级标题

1.5.4.段落标签

作用：突出显示一段文本，每段文本都独占一行或一块，不予其他元素共行显示，并且也具备垂直的空白距离
语法：

属性：align 设置文本的水平对齐方式取值： left / center / right
1.5.5.格式标签

换行标签：

水平线标签:

1.5.6.分区标签

块分区
作用：划分页面结构，配合css实现网页布局特点：独占一块显示行分区元素作用：设置同一行文本的不同样式，结合CSS
特点：可以与其他元素或文本共行显示，允许在一行文本中使用多个span
1.5.7.标签分类

块级元素
只要在网页中独占一行，不予其他元素共行显示的元素都是块级元素。
作用：都网页可以做布局
特点：都添加align属性，设置内容水平对齐方式
eg:h1~h6,ul,ol,li,form,table,tr,p,div
行内元素/内联元素
可以与其他元素共行显示。
eg:i b strong sub sup span

1.6 列表标签

作用：按照从上到下的方式来排列数据

列表的组成：

有序列表

默认是按照数字排序
无序列表

默认以实心原点作为标识
列表项

列表中的每一条数据都是一个列表项
语法：
注意：列表项要嵌套在列表标签中使用
列表属性

有序列表–ol

type属性：设置项目符号
1 ：按照数字排列显示，默认值 a : 按照小写字母顺序排列 A ：按照大写字母排列 i : 按照罗马数字排列 I : 按照罗马数字排列
start属性：设置从第几个字符开始排序
取值：数字
无序列表–ul

type属性：设置项目符号
disc 实心圆点（默认） circle 空心圆点 square 实心方块 none 不显示项目符号
列表嵌套

在一个列表中出现其他列表。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Title</title> </head> <body> <ul type="circle"> <li>山东 <ol type="I">
<li>德州</li> <li>青岛</li> <li>济南</li> <li>淄博</li> </ol> </li> <li>吉林 <ol
type="I"> <li>长春</li> <li>吉林</li> <li>白城</li> <li>敦化</li> </ol> </li> <li>北京
<ol type="I"> <li>朝阳</li> <li>昌平</li> <li>西城</li> <li>东城</li> </ol> </li> </ul>
</body> </html>

最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享 <https://jq.qq.com/?_wv=1027&k=5LhH9Ed>
），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

热门工具换一换