第二章 从零开始构建HTML页面

文档基本格式

文本样式标签

HTML图像

【案例一】简单的网页

image-20240309195718799

HTML文档基本格式
1
2
3
4
5
6
7
<!DOCTYER>;位于文档的最前面，用于向浏览器说明当前文档使用哪种HTML或XHTML标准规范。因此只有在开头处使用。

<html>:位于<!DOCTYER>之后，也被称为根标签。主要用于告知浏览器其自身是一个HTML文档，<html>标志着HTML文档的开始，</html>标志着HTML文档的结束，在他们之间是文档的头部和主体内容。

<head>:用于定义HTML文档的头部信息，也称为头部标签，紧跟在<html>之后。头部标签主要用来封装其他位于文档头部的标签，例如<title>、<meta>、<link>和<stye>等，用来描述文档的标题、作者，以及与其它文档的的关系。

<body>;田干定义HTML文档所要显示的内容，也称为主体标签，浏监器中显示的所有文本、图像、音颛和视频等信息都必须位于<body>内，才能最终展示给用户。一个HTML文档中智能含有一对<body>，且<body>必须位于<html>内，位于<head>之后，与<head>是并列关系。
标签的分类

1.双标签（体标签）<>内容</>

2.单标签(空标签)</>

标签的关系

1.嵌套关系（包含关系）标签

最外层的标签称之为“父级标签”，内层的标签称之为“子级标签“。只有双标签才能作为”父级标签“。

2.并列关系（兄弟关系）

两个标签处于同一级别，并且没有包含关系。如标签和标签就是并列关系。无论双标签还是单标签都可以拥有并列关系。

页面格式化标签

1.标题标签html head（6个）

2.段落标签h1,h2…

3.水平线标签hr

属性名 含义 属性值
align 设置水平线的对齐方式 可选择left、right、center三种值，默认为center，居中对齐显示
size 设置水平线的粗细 以像素为单位，默认为2像素
color 设置水平线的颜色 可用颜色名称，十六进制#RGB、rgb(r,g,b)
width 设置水平线的宽度 可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%

换行

【案例二】新闻页面

image-20240319143401995

1.标签的属性

HTML标签设置属性的基本语法格式如下

1
<标签名 属性1="属性值1" 属性2="属性值2"…>内容</标签名>

2.HTML文档头部相关标签

3.文本样式标签

4.文本格式化标签

【案例三】图文混排

image-20240324134455314