这是我参与「第四届青训营 」笔记创作活动的的第2天
一、HTML语法规范
单标签：<br />（少）
双标签：<html> </html>
- HTML标签是由尖括号包围的关键词
- HTML标签通常是成对出现的，第一个为开始标签，第二个为结束标签（双标签）
标签关系
双标签关系可以分为两类：包含关系和并列关系
包含关系:
<head>
`<title></title>`
</head>
（title是儿子，head是爸爸）
并列关系：
<head></head>
<body></body>
(兄弟)
二、HTML基本结构标签（骨架标签）
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> | HTML标签 | 页面中最大的标签，我们称为 根标签 |
<head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
例子：
<html>
<head>
<title>第一个页面</title>
</head>
<body>
键盘敲烂，工资过万。
</body>
</html>
运行结果：头部显示“第一个页面” 内容显示“键盘敲烂，工资过万”
（将文档的后缀名改为：.html或.htm，直接点文档，之后在浏览器中以页面的形式显示出来。）
三、开发工具
Visual Studio Code
Linux下，下载安装：在官网先下载Linux相关的安装包
在终端输入：
sudo dpkg -i + 文件名（文件名右键属性查看）
如果下载不了，转换路径：cd+路径（上级文件夹），然后再下载
四、例子
Visual Studio Code快捷键：
Ctrl + N 新建文件
！生成html骨架
F5 运行
Ctrl + 加号键 放大视图
Ctrl + 键号键 缩小视图
五、插件
插件安装：扩展安装，install安装后重启软件
| 插件 | 作用 |
|---|---|
| Chinese(Simplified)Language Pack for VS Code | 中文（简体）语言包，汉化 |
| Open in Browser | 右击选择浏览器打开html文件 |
| JS-CSS-HTML Formatter | 每次保存，都会自动格式化js,css和html代码 |
| Auto Rename Tag | 自动重命名配对的HTML/XML标签 |
| CSS Peek | 追踪至样式 |
插件卸载：在扩展里搜索，卸载
六、网页开发工具
VSCode工具生成骨架标签新增代码
en : 英文网页
zh-CN ： 中文网页
在en中也可以显示中文，在zh-CN中也可以显示英文
| 标签 | 作用 |
|---|---|
<！DOCTYPE> | 文档类型声明标签，告诉浏览器用哪种HTML显示 |
<html lang = "en"> | language缩写 en 英文网面；zh-CN中文网页 |
<meta charset="UTF-8"> | 在<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码 |
七、HTML常用标签
标签语义（学习标签的技巧）
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰
（标题标签、段落标签）
标题标签
<h1>-<h6>六个等级
eg:<h1>我是一级标签</h1>
段落和换行标签
<p>我是一个段落标签</p>（paragraph)
<br />强制换行(不分段)标签 （break）
八、新闻案例
九、HTML常用标签
标签语义：突出重要性，比普通文字更重要。
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong> 或<b></b> | <strong>语义更强烈 |
| 倾斜 | <em></em>或<i></i> | <em>语义更强烈 |
| 删除线 | <del></del>或` | <del>语义更强烈 |
| 下划线 | <ins></ins>或<u></u> | <ins>语义更强烈 |
十、<div>（division）和<span>标签
<div>分割和<span>跨度标签是没有语义的，他们就是一个盒子，用来装内容的。
<div>标签用来布局，但是现在一行只能放一个<div>.大盒子
<span>标签用来布局，一行可以上多个<span>.小盒子
十一、图像标签和路径
图像标签
在HTML标签中,<imag>标签用于定义HTML页面中的图像**<img src = "图像URL" />**（第二个单标签<br />）
img:单词image的缩写，意为图像
src是<img>标签的必须属性，他用于指定图像文件的路径和文件名
可用三种格式的图像：png,jpg,gif
（注：如果图片加载不出来，将图片和代码保存到一起再试一下）
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示时，替换成文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
