一、HTML文档声明
文档声明的作用:告诉浏览器当前网页的版本
H5对应标准声明,文档声明必须写在网页的第一行
<!DOCTYPE html>
H4文档声明
二、HTML字符编码
ASCII 对应大写字母、小写字母、数字、一些符号,共计128个
ISO 8859-1 在ASCII基础上,扩充了一些希腊字符等,共计256个
GB2312 继续扩充,收录了6763个常用汉字,682个字符
GBK 收录了汉字和符号达到20000+,支持繁体中文
UTF-8 万国码 包含世界上所有语言的文字和符号
字符编码的原则:
(1)存储时需要采用合适的字符编码
(2)采用哪种方式编码,需采用相同方式解码,否则会乱码
编码时统一使用UTF-8编码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML网页</title>
</head>
<body>
<input>
</body>
</html>
三、HTML设置语言
主要作用:
让浏览器显示对应的翻译提示
有利于搜索引擎优化
具体写法:
<html lang="en">
四、HTML帮助手册
MDN Web / W3school 网站
五、HTML排版标签
h1-h6 标题标签 双标签
p 段落标签 双标签
div 没有任何含义(语义),用于整体布局 双标签
h1-h6不能互相嵌套
p标签很特殊,它里面不能有:h1-h6、p、div标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1><!-- h1标签最重要 一般只有一个-->
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落标签0</p>
<div>
<p>段落标签1</p>
<p>段落标签2</p>
</div>
</body>
</html>
六、HTML语义化标签
语义化:用特定的标签 表达特定的含义
语义化的优点:
1.代码可读性强、清晰
2.有利于SEO(搜索引擎优化) eg。爬虫
3.方便设备解析(屏幕阅读器)
七、块级元素与行内元素
排版标签都是块级元素
规则:
(1)块级元素中能写行内元素,也能再写块级元素(几乎什么都能写)
(2)行内元素中能再写行内元素,但是不能写块级元素
特殊规则:
(1)h1-h6不能互相嵌套
(2)p标签中不能写块级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--块级元素,特点:独占一行-->
<marquee></marquee>
<h1>HTML</h1>
<p>HTML</p>
<p>HTML</p>
<div>HTML</div>
<div>HTML</div>
<!--行内元素,特点:不独占一行-->
<input type="text">
<input type="text">
<span>HTML</span>
<span>HTML</span>
</body>
</html>
marquee元素设计的初衷是让文字具有动画效果,现在可以通过CSS实现,因此marquee标签已经过时,不推荐使用。
八、常用的文本标签
文本标签用于包裹词汇、短语等,通常写在排版标签里面。排版标签更宏观(大段的文字),文本标签更微观(词汇、短语等)。文本标签通常都是行内元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
color:red
}
</style>
</head>
<body>
<p>
学习 <em>学习的英文:study</em>
</p>
<p>
当出门时,<strong>一定要关好门窗!</strong>
</p>
<p>
前端的三个框架为:<span>Angular、React、Vue</span>
</p>
</body>
</html>
九、不常用的文本标签
下表中 blockquote和address属于块级元素