独占一行 html_Web前端开发-HTML入门干货

港控/mmm° 2023-01-06 13:59 145阅读 0赞

![08de21cc9bff8097a4c7a1292bce592c.png][]

Web前端开发包括三大标准：HTML、CSS、JAVAScript，在网页中起到的作用分别是负责结构(内容)、表现和行为。CSS入门参见：

Web前端开发-CSS入门干货01 和 Web前端开发-CSS入门干货02

# 1.HTML是什么 #

HTML全称是 Hyper Text Markup Language(超文本标记语言)，即除了处理文本，还可以处理音频、视频、图片等非文本资源。

# 2.HTML文档中基础概念 #

一个以html为后缀结尾的文档，称之为html文档。

(1)文档声明类型：在html文档的第一行，表示采用H5的标准展示页面，不同的标准在此处声明的语句不同。

(2)html文档采用的语言：在html标签内作为lang属性的值，可以为en表示英文。

(3)html文档采用的字符集：利用meta标签，配合charset属性，属性值为字符集。

![5734d747618c169dda05642630f18dfd.png][]

# 3.标签 #

HTML的核心概念是标签，定义了网页结构的组成。

![4c29c2c2170b203628346c85dbc81bbd.png][]

**(1)标签分类：块级标签和行级标签**

1)块级标签：其包含的内容独占一行，自动换行；

常见的块级标签包括：标题、段落、分区、无序列表、有序列表；

# ~ #

###### 、 ######

、

*  、

1.  、
2.  。
    
    2)行级标签：其包含的内容不自动换行；
    
    常见的行级标签包括：超链接、加粗、斜体、加粗、斜体、删除线、下划线、包含文本；、**、*、、、、、。***
    
    注意：(1)
    
    、
    
    # ~ #
    
    ###### 中不能包含块级标签。 ######
    
    (2)行级标签对应的元素宽、高不能设置(3)行级标签只能容纳文本或其他行级标签
    
    3)行内块标签：同时具备块级标签和行级标签特点的标签
    
    常见的标签：图像标签、表单中input标签、表格中标准单元格；![Image 1][]、、
    
    。
    
    **(2)标签类型转换**
    
    1)块级标签转成行级标签：在CSS样式中，为块级标签添加display:inline样式；
    
    2)行级标签转成块级标签：在CSS样式中，为行级标签添加display:block样式；
    
    3)转成行内块级标签：在CSS样式中，为行级标签添加display:inline-block样式；
    
    # 4.注意 #
    
    对于各类标签以及CSS的写法，至少要有印象和能看懂代码，具体的写法可以参考文档。
    
    常用参考文档：
    
    https://www.w3cschool.cn/html5/
    
    https://developer.mozilla.org/zh-CN/docs/Web/HTML
    
    \#学问分亨官\#\#闪光时刻二期\#\#闪光时刻第二期主题征文\#

[08de21cc9bff8097a4c7a1292bce592c.png]: /images/20221119/c90de54328664e49b67e0f75c8c90737.png
[5734d747618c169dda05642630f18dfd.png]: https://img-blog.csdnimg.cn/img_convert/5734d747618c169dda05642630f18dfd.png
[4c29c2c2170b203628346c85dbc81bbd.png]: https://img-blog.csdnimg.cn/img_convert/4c29c2c2170b203628346c85dbc81bbd.png
[Image 1]: