1.HTML语法规范
1.1基本语法概述
- HTML标签是由尖括号包围的关键词，例如< html >
- HTML标签通常是成对出现的，例如< html >（开始标签）和 < /html >（结束标签），称为双标签
- 有些特殊的标签必须是单个标签，例如< br/ >，称为单标签 （传说中的孤狼玩家哈哈哈哈哈）
1.2标签关系
.双标签关系可以分成两类：包含关系和并列关系
<head>
<title.></title>
</head>
<html>
<head></head>
<body></body>
</html>
2.HTML基本结构标签
2.1第一个HTML网页
- 每一个网页都会有一个基本的结构标签（也成为骨架标签），页面内容也是在这些基本标签上书写。
- HTML页面也成为HTML文档。
<html>
<head>
<title>网站名</title>
</head>
<body>
网页内容
</body>
</html>
| 标签名 | 定义 | 说明 |
|---|
| < html > < /html > | HTNL标签 | 页面中最大的标签，称为根标签 |
| < head >< /head > | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| < title >< /title > | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| < body >< /body > | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
<html>
<head>
<title>第一个网页</title>
</head>
<body>
借问灵山多少路，有十万八千有零余
</body>
</html>
- HTML文档的后缀名必须是.html或.htm，浏览器的作用是读取HTML文档，并以网页的形式显示他们。
3.网页开发工具
3.1（推荐）VS code的使用
- 打开VS code，保存新建文件为.html文件，输入英文"!"感叹号，回车可以得到网页代码的主体。
- 右键，选择“Open In Default Browser"，可以在浏览器中预览这个网页文件。（需要提前安装好"open in browser"。
- 为方便预览网页设计效果，可以安装一个"HTML Preview"，边写边预览效果贼爽
3.2 VS code插件推荐
- Chinese(Simplified) Language Pack for VS Code：中文（简体）语言包
- Open In Browser：右击选择浏览器打开HTML文件
- Auto Rename Tag：自动重命名配对的HTML/XML标签
3.3文档类型声明标签
<!DOCTYPE html>//文档类型声明，告诉浏览器使用的是HTML5版本显示网页
<html lang="en">//定义语言显示，en:英文，zh-CN:中文，fr:法语
<head>
<meta charset="UTF-8">//字符集声明为“万国码”
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- < !DOCTYPE html >：文档类型声明标签，不是一个HTML标签。位于文档中最前面的位置，必须在< HTML >标签之前。
- 定义成en的文档可以显示中文，反之亦然。对浏览器和搜索引擎有作业（如是提示否自动翻译）
- 字符集(Character set)：多个字符的集合，让计算机能够识别和存储各种文字。常用的有：GB2312（简体中文），BIG5（繁体中文），GBK（简+繁）和UTF-8，其中UTF-8成为万国码，基本包含所有国家需要用到的字符。
- 字符集一般统一使用“UTF-8"，一定要写，避免乱码。
HTML常用标签
4.1标签语义
- 理解标签语义，即理解标签的含义，知道其用处。
- 添加合适的语义标签，可以让页面结构更清晰。
4.2标题标签< h1 > - < h6 >（重要）
- HTML提供6个等级的网页标签，即< h1 > - < h6 >。head的缩写。
- 标签语义：作为标题使用，从1到6逐级递减。
- 特点：1.文字变粗，字号变大 2.一个标题独占一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1> 一级标签 </h1>
<h2> 二级标签 </h2>
<h3> 三级标签 </h3>
<h4> 四级标签 </h4>
<h5> 五级标签 </h5>
<h6> 六级标签 </h6>
</body>
</html>
4.3段落和换行标签（重要）
段落标签< p >和< /p >，用法：< p >这是一个段落< /p >
- 标签语义：将文档分隔为若干段落
- 特点：1.文本在一个段落中根据窗口的大小自动换行 2.段落之间保有较大空隙
换行标签< br / >
- 标签语义：强制换行
- 特点：1.单标签 2.简单地另起一行，行之间没有较大空隙
案例：新闻
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>山西大同平城区</title>
</head>
<body>
<h1>山西大同平城区：家门口有了小公园 居民收获“小欢喜”</h1>
<h6>2021-12-01 来源：山西学习平台作者：尚丽 杜云</h6>
<p>位于山西省大同市平城区永泰街道第一高级职业中学西侧的一处2000多平方米空地，曾经环境脏乱差，如今改造成了附近居民家门口的小公园，这得益于平城区园林绿化中心在该处开展的绿化美化工作。</p>
<p>据了解，以前，这块空地一直没有硬化和绿化，商贩扎堆，自发形成了便民市场，摆摊卸货、吵吵嚷嚷，环境卫生脏乱差。为了深入开展“创城”工作，扎实推进“我为群众办实事”实践活动，平城区园林绿化中心接到永泰街道诉求后，积极对接，确定了改造方案。从10月份开始进行清理废土、回填种植土、铺园路等工作。目前，新种植了梓树、金叶榆、山楂树、八棱海棠、水蜡球等9个品种共123株树，新增铁艺护栏。该中心相关负责人说，计划明年开春补种水蜡篱、丁香篱等绿植共600多平方米，安装圆桌、长椅供市民休息。</p>
<p>近日，现场工作人员正在对新植树木进行“冬保”，改造工作已接近尾声，这里的面貌已焕然一新，不仅整洁干净，新种植的树木也为这片空地带来了勃勃生机。“由脏乱差变身小公园，真是一件便民的好事，以后我们每天都可以在这散步、锻炼身体。”家住附近的居民王翠兰笑着说。</p>
<p>责任编辑：杨涵棋</p>
</body>
</html>
4.4文本格式化标签
标签语义：突出文字重要性
- 加粗：< strong > < /strong >或者< b > < /b >
- 倾斜：< em > < /em >或者< i > < /i >
- 删除线：< del > < /del >或者< s > < /s >
- 下划线：< ins > < /ins >或者< u > < /u >
4.5
和
标签
- 没有语义，类似于盒子，用来放内容
- div：division的缩写，表示分割、分区
- span：跨度、跨距
- 特点：1.< div >标签用来布局，一行只能放一个< div > 2.< span >标签用来布局，一行可以放多个< span >
<div> 第一个盒子内容 </div>
<span> 第二个盒子内容 </span>
4.6图像标签和路径（重点）
4.6.1图像标签
- < img >标签用于定义HTML页面中的图像。img——image缩写。
- src是< img >标签的必需属性（属性：图像标签的特性），用于指定图像的路径和文件名
<img scr = "图像URL" />
图像标签的其他属性：
| 属性 | 属性值 | 说明 |
|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细（默认黑色） |
图像标签属性注意点：
- 图像可以有多个属性，必须写在标签名后面
- 属性之前部分先后，标签名与属性名、属性名与属性名之间用空格分开
- 属性采取键值对格式，即key = "value"格式，属性 = “属性值”
4.6.2路径（铺垫知识）
- 目录文件夹：存放了页面所需素材的普通文件夹
- 根目录：打开目录文件夹的第一层
路径分类
- 相对路径：以*引用文件所在位置**为参考基础，而建立的目录路径。即图片相对HTML页面的位置。
| 相对路径分类 | 符号 | 说明 |
|---|
| 同一级路径 | | 图像文件相对于HTML文件同一级，如< img src=“baidu.gif” /> |
| 下一级路径 | / | 图像文件相对于HTML文件下一级，如< img src=“images/baidu.gif” /> |
| 上一级路径 | …/ | 图像文件相对于HTML文件上一级，如< img src="…/baidu.gif" /> |
- 绝对路径：目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径，如"D:\web\img\logo.gif"，或者完整的网络地址"http://www.itcat.cn/logo.gif"
4.7超链接标签（重点）
- < a >标签：定义超链接，从一个页面链接到另一个页面
4.7.1超链接的语法格式
<a href = "跳转目标" target = "目标窗口的弹出方式"> 文本或图像</a>
- 单词anchor的缩写，意为：锚。
- 两个属性的作用：
| 属性 | 作用 |
|---|
| href | 用于指定链接目标的url地址，（必须属性）当标签应用href属性时，它就具有了产链接功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，_black为在新窗口中打开方式 |
4.7.2链接分类
1.外部链接，例如< a href = “http://www.qq.com”> QQ
2.内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可，例如：< a href = “index.html”> 首页
3.空链接：如果当时没有确定链接目标时，< a href = “#” > 首页 < /a >
4.下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。如< a href = “img.zip” > 下载文件 < /a >
5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频都可以添加超链接。如< a href = “http://www/baidu.com” > < img src = “imgjpg” / > < /a >
6.锚点链接：点击链接，快速定位在页面中的某个位置。
- 在链接文本的href属性中，设置属性值为“#姓名”的形式，如< a href = "#two> 第二集 < /a >
- 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如< h3 id = “two” >第二集介绍< /h3 >
5.1注释
- HTML中的注释以**"< !–“开头，以”-- >"结束。快捷键：Ctrl+/
5.2特殊字符
- 在HTML中，一些特殊的符号很难或者不方便直接使用，可以采用以下字符替代：
| 特殊字符 | 描述 | 字符的代码 |
|---|
| 空格符 | & nbsp;(使用时没有空格） |
| < | 小于号 | & lt;(使用时没有空格） |
| > | 大于号 | & gt;(使用时没有空格） |
| & | 和号 | & amp;(使用时没有空格） |
| ￥ | 人民币 | & yen;(使用时没有空格） |
| © | 版权 | & copy;(使用时没有空格） |
| ® | 注册商标 | & reg;(使用时没有空格） |
| ° | 摄氏度 | & deg;(使用时没有空格） |
| ± | 正负号 | & plusmn;(使用时没有空格） |
| x | 乘号 | & times;(使用时没有空格） |
| ÷ | 除号 | & divide;(使用时没有空格） |
| ² | 平方（上标2） | & sup2;(使用时没有空格） |
| ³ | 立方（上标3） | & sup3;(使用时没有空格） |
本文详细介绍了HTML的基本语法、标签关系，包括文档结构、文档类型声明、语义标签（如标题和段落）、文本格式化、图像和超链接、注释及特殊字符。重点讲解了VScode工具的使用和HTML5开发基础，适合初学者入门。
扫一扫
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
