黑马pink老师Web前端入门笔记（二）

二、HTML标签

（一） 学习目标

（二）HTML语法规范

1、 所有标签由尖括号加关键词组成，如。
2、 双标签：大部分情况下标签成对出现。,其中为开始标签，为结束标签，多一个/。
双标签关系分为包含关系和并列关系。

3、单标签极少情况，单标签的结尾加上/如
。

（三） HTML基本结构标签

1、概念

/2、制作第一个网页
txt中编辑如下内容，另存为.html文件，并用浏览器打开。

（四） 开发工具

1、使用记事本写.html文件有诸多不便，课程中选择VSCode进行.html的编写。
/2、 安装VSCode
VSCode中安转以下插件，输入英文感叹号出现HTML基本结构，编辑title和body后，右键选择Open in Default Browser 打开网页。



3、使用VSCode进行网页开发：
（1）Ctrl n:新建文件
（2）Ctrl s:保存为.html
（3） Ctrl +/-: 代码字体变大/变小
（4） 英文!:生成页面骨架结构
（5） 安装插件，右键鼠标选择浏览.html文件

4、VSCode工具生成骨架标签新增代码
※ 标签：必须写到整个页面的第一行，文档类型声明标签，告诉浏览器当前页面采用的那个HTML版本，（HTML4/HTML5/XHTML）。如表示当前页面采取HTML5进行显示。不是HTML标签，而是文档类型声明标签。
5、lang语言：定义当前文档显示的语言。
en为英文页面、zh-CN表示中文页面，但对于文档显示来说，定义成en也可以显示中文，定义成zh-CN也能显示英文。这个属性对浏览器和搜索引擎有作用，建议中文网站为zh-CN，否者浏览器会提升进行翻译。

6、charset字符集：识别和存储各种文字,charset常用的值有：GB2312, BIG5, GBK和UTF-8, 其中UTF-8也被成为万国码，基本包含了全世界所有国家的文字。必须写得代码，否则会引起乱码情况。

（五） HTML常用标签

1、语义标签：

标签的含义，用来干嘛的。根据标签的语义，在合适的地方给一个合理的标签，能让页面的结构更清晰。

2、标题标签(重要)：

-

，表示一级-六级标签，重要性递减。h为head的缩写，是双标签如：

。加了标题的文字会加粗，字号也会变大，并且独占一行。
※ 练习：

※ 新建ctrl n， 后先保存ctrl s，代码更改后先ctrl s保存，在用浏览器打开。

3、段落和换行标签(重要)：

①段落标签
a、语法格式

我是一个段落标签

b、标签语义：把文字分为不同的段落，p为paragraph 段落缩写。

c、文本在一个段落中，会根据浏览器的大小自动换行，段落和段落之间保有空隙。

d、练习