《BOWD:HAC》第2章笔记:HTML基础
因为第1章是概述所以就不做笔记了,直接从第2章开始。
HTML语言呈现一种类似回文的结构,通过嵌入代码或格式来表明文本格式。
大部分标记都成对出现,开始标记和结束标记匹配,形成闭包。
元素=开始标记+内容+结束标记
元素的相互“嵌套”:完全嵌套,避免标记不匹配
注意选择编码方式为UTF-8
2.1 标题元素
标题(heading)元素包括六级,放置到body区域而非head区域。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Heading Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>
结构标记 | 具体描述 |
---|---|
<html>…</html> | 标记HTML文档的开始和结束 |
<head>…</head> | 标记文件头的开始和结束。HTML文档的头部中可以包含脚本、CSS样式表和网页标题等信息。这里指的脚本通常是JavaScript脚本 |
<title>…</title> | 标记文件头中的文档标题 |
<body>…</body> | 标记文件体部分的开始和结束 |
<!–…--> | 标记文档中的注释部分 |
2.2 段落元素
段落元素组织句子或文本<p>和</p>之间的文本将显示成段落,上下各显示空行。p是paragraph的缩写。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Paragraph Example</title>
<meta charset="utf-8">
</head>
<body>
<h1>Heading Level 1</h1>
<p>
This is a sample paragraph.Heading tags can help to make your pages more accessible and unable.
It is good coding practice to use heading tags to outline the structure of your web page content.
</p>
<hr>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
</html>
2.3换行和水平标尺
2.3.1 换行元素
换行元素<br>使浏览器跳到下一行显示下一个元素或文本,没有开始和结束标志,称为独立或自包容标记。在源代码中换行并不会使浏览器显示换行,要达到这一效果必须在相应位置添加换行标记。br是break的缩写。
2.3.2 水平标尺
水平标尺元素<hr>独立使用,在网页上配置一条水平线,代表内容主题分隔或变化。hr是horizontal rule的缩写。
<!DOCTYPE html>
<html lang="en">
<head>