前端学习--Day2 | HTML标签（上）
目录
1、HTML语法规范
1.1 基本语法概述
1.2 标签关系
2、HTML基本结构标签
2.1 第一个HTML网页
2.2 基本结构标签总结
3 网页开发工具
3.1 文档类型声明标签
3.2 lang语言种类
3.3 字符串（必写，不写会乱码）
6 SEO三大标签
4 HTML常用标签
4.1 标签语义化
4.1.1 html5语义化标签
4.1.2 语义化的意义与作用
4.1.3 没有语义的布局标签-div和span
4.2 标题标签（重要）
4.3 段落和换行标签(重要)
课堂案例：体育新闻
4.4 文本格式化标签
4.5 div\span标签
4.6 图像标签和路径（重点）
4.6.1 图像标签
4.6.2 路径
4.7 超链接标签（重点）
4.7.3 链接标签的显示特点（了解）
4.8 音视频标签
4.8.1 音频标签
4.8.2 视频标签
5 HTML中注释和特殊字符
5.1 注释
5.2 特殊字符
5.2.1 HTML的空格合并现象
综合案例
1、HTML语法规范
1.1 基本语法概述
1、HTML标签是由尖括号包围的关键词，例如。
2、HTML标签通常成对出现，例如，我们称为双标签。
标签对中第一个标签是开始标签，第二个标签是结束标签。
3、有些特殊标签必须是单个标签（极少情况），例如
，我们称为单标签。
1.2 标签关系
双标签可以分为两类：包含关系（嵌套）和并列关系（并行）。
包含关系
并列关系
2、HTML基本结构标签
2.1 第一个HTML网页
每个页面都会有基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档。
| 标签页 | 定义 | 说明 |
| html标签 | 页面中最大的标签，我们称之为根标签 | |
| 文档头部 | head标签中必须要设置title标签 | |
| 文档标题 | 让页面拥有一个属于自己的网页标题 | |
| 文档主体 | 元素包含文档的所有内容，页面内容基本都是放到body中的 |
2.2 基本结构标签总结
3 网页开发工具
开发工具有很多： Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder。
vscode使用
1、双击打开软件。
2、新建文件（Ctrl+N）。
3、保存（Ctrl+S），注意保存为.html文件。
4、Ctrl+加号键，Ctrl+减号键，可以放大缩小视图。
5、生成页面骨架结构。
输入！按下Tab键。
VSCode插件安装（除js外）
3.1 文档类型声明标签
代码意思：当前页面采取HTML5版本来显示网页。
注意：
1、 不是一个HTML标签，而是一个文档类型声明，作用是告诉浏览器使用哪种HTML版本来显示网页。
2、 位于文档中最前面位置，处于标签之前。
3.2 lang语言种类
用来定义当前文档（网页）显示的语言。（定义后也能显示其他语言）
1、en→English
2、zh-CN→中文
3、fr→法语
对浏览器（如翻译）和搜索引擎（百度、Google）等有一定作用。
3.3 字符串（必写，不写会乱码）
字符串（character set）是多个字符集合，以便计算机能够识别和储存各种文字。
在
标签内，可以通过标签的charset属性来规定HTML文档应当使用哪种字符编码。charset常用值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
6 SEO三大标签
4 HTML常用标签
4.1 标签语义化
这是h5中出现的新特性, 每个h5标签都有自己的语义,标签语义化就是利用恰当的语义布局标签,使页面有良好的结构.
4.1.1 html5语义化标签
这些标签显示特点和div一致，但是比div多了不同的语义.
4.1.2 语义化的意义与作用
- 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
- 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
- 有利于SEO(搜索引擎)：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
- 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
4.1.3 没有语义的布局标签-div和span
more: html5语义化标签有哪些-前端问答-PHP中文网Ø 场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
Ø div标签：一行只显示一个（独占一行）
Ø span标签：一行可以显示多个
4.2 标题标签（重要）
我是一级标题
- h→head。
标签语义：作为标题使用，并且依据重要性递减。
- h1在一个文档中只能使用一次；
- 文字都有加粗变大，但是从h1 → h6文字逐渐减小；
- 独占一行。
（和默认文字差不多大小的是四级标题）
4.3 段落和换行标签(重要)
我是一个段落标签
我是一个换行标签①p→paragraph；一对p标签为一段。
特点：文本在一个段落中或根据浏览器窗口的大小自动换行。
②br→break；br为强制换行（直接敲回车和空格没有用）
特点：单标签；
换行标签只是简单的另起一行，跟段落不一样，段落间会插入垂直间距。
课堂案例：体育新闻
4.4 文本格式化标签
标签语义：突出重要性，比普通文字更重要。
| 语义 | 标签（*推荐使用，语义更强烈） |
|---|---|
| 加粗 | *或者 |
| 倾斜 | * or |
| 删除线 | |
| 下划线 | * or |
4.5 div\span标签
这两个标签没有语义，它们就是一个盒子，用来装内容。
这是头部
今日价格①div→division：分割、分区 用来布局，但一行只能放一个div（big house）
②span：跨度、跨距 同样用来布局，但一行可以放多个（so small）
4.6 图像标签和路径（重点）
4.6.1 图像标签
img→image，用于定义HTML页面中的图像。（单标签）
src→source，来源。
src是标签的必须属性，它用于指定图像文件的途径和文件名。
所谓属性：属于这个图像标签的特性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，即图像不能显示时的文本 |
| title | 文本 | 提示文本，鼠标放在图像上时显示的文字 |
| width/height |
像素 | 图像宽/高度（只设置一个即可等比例缩放） |
| border | 像素 | 图像边框粗细 |
注意：
①图像标签可以有多个属性，必须写在标签名img之后；
②属性间不分先后顺序，标签名与属性、属性与属性间均以空格分开；
③属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。
4.6.2 路径
1、目录文件夹和根目录：
目录文件夹：就是普通文件夹。
根目录：即打开目录文件夹的第一层。
2、vscode打开目录文件夹
文件--打开文件夹，选择目录文件夹，后期非常方便管理文件。
3、路径
路径可以分为：相对路径（/）+绝对路径（\）
（1）相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
即图片相对于html页面的位置。
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像与HTML文件同一级
➢ VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！ |
|
| 下一级路径 | / | 图像在HTML文件下一级
|
| 上一级路径 | ../ | 图像在HTML文件上一级
|
（2）绝对路径
指目录下的绝对位置，通常是从盘符开始的路径。例如：
①"C:\Users\asus\Desktop\前端\案例\ice-dundun\你没事吧.jpg"
（由于不同主机的路径不同，这一路径使用较少）
②或是完整的互联网地址，从服务器出发。
https://tse1-mm.cn.bing.net/th/id/R-C.79cbabd0e0ffc0d840d61a535c2321ff?rik=EwgOv3wBI6UylQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsports%2ftransform%2f635%2fw650h785%2f20190917%2fe355-ietnfsq1504139.jpg&ehk=l9GI3%2b3vTXTcL76StDOoJwensB6Q7ZclO0o9uXg5hts%3d&risl=&pid=ImgRaw&r=0
https://tse1-mm.cn.bing.net/th/id/R-C.79cbabd0e0ffc0d840d61a535c2321ff?rik=EwgOv3wBI6UylQ&riu=http%3A%2F%2Fn.sinaimg.cn%2Fsports%2Ftransform%2F635%2Fw650h785%2F20190917%2Fe355-ietnfsq1504139.jpg&ehk=l9GI3%2B3vTXTcL76StDOoJwensB6Q7ZclO0o9uXg5hts%3D&risl=&pid=ImgRaw&r=0
4.7 超链接标签（重点）
在HTML标签中，标签用于定义超链接，作用是从一个页面链接到另一个页面。
4.7.1 链接的语法格式
文本或图像a→anchor：锚
| 属性 |
作用 |
|---|---|
| href | 指定连接目标的url地址，（必须属性）只有为应用这一属性，标签才能具有超链接功能。 |
| target | 指定链接页面打开方式，其中_self为默认值，_blank为在新窗口中打开方式。 |
4.7.2 链接分类：
①外部链接：
哔哩哔哩网站②内部链接：网站内部页面之间的相互链接，直接链接内部网页名称即可。（同样分上下同级）
③空链接：还未确定链接目标时，用空链接占个位置。（可之后更换）
点击之后会回到网页顶部。
这是一个空链接④下载链接：如果href地址是一个文件或压缩包，则会下载这个文件。
注意：地址链接的是文件.exe或者 .zip等压缩包形式。
这是一个下载链接
⑤网页元素链接：即将文本部分换成其它元素如图片。
⑥锚点链接：点击链接，快速定位到页面的某个位置。
※在链接文本的href属性中，设置属性值为#名字的形式；
※找到目标位置链接，里面添加一个id属性=刚才的名字；
1集
幸好还有书籍第一集
4.7.3 链接标签的显示特点（了解）
-
a标签默认文字有下划线
-
a标签从未点击过，默认文字显示蓝色
-
a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
4.8 音视频标签
4.8.1 音频标签
➢ 场景：在页面中插入音频
➢ 常见属性：
autoplay在谷歌浏览器中禁用，IE可以。
➢ 音频标签目前支持三种格式：MP3、Wav、Ogg
4.8.2 视频标签
场景：在页面中插入视频
➢ 代码：
➢ 常见属性：
学了JS可实现非静音播放。
➢ 视频标签目前支持三种格式：MP4 、WebM 、Ogg
5 HTML中注释和特殊字符
5.1 注释
注释文字：在HTML文档中添加易于理解阅读，又不在页面中显示的注释文字。
（只是写来给程序员看的，不执行不显示）
快捷键：ctrl+/
5.2 特殊字符
在HTML页面中，一些特殊符号很难或者不方便直接使用，就可用以下字符来代替。
| 特殊字符 | 描述 | 字符代码 | |
|---|---|---|---|
| 空格符 | &npsp； | npspace | |
| < | 小于 | <； | less-than |
| > | 大于 | >； | great-than |
| & | 和号 | &； | ampersand |
| '' | 引号 | " | |
| ' | 撇号 | ' | (IE不支持) |
| ¢ | 分 | ¢ | |
| £ | 磅 | &pond; | |
| € | 欧元 | € | |
| § | 节 | § | |
| ¥ | 人民币 | ¥； | yuan |
| © | 版权 | ©； | |
| ® | 注册商标 | ®； | registered trademark |
| ° | 摄氏度 | °； | degree centigrade |
| ± | 正负号 | ±； | pluses&minus |
| X | 乘号 | ×； | |
| ÷ | 除号 | ÷； | |
| ² | 平方 | ²； | |
| ³ | 立方 | ³； |
5.2.1 HTML的空格合并现象
Ø 场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
综合案例
（17-圣诞老人）
Document
圣诞节的那些事
圣诞是怎样由来的
圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初，1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日，即上帝通过耶稣向世人显示自己。 这一天又是罗马历书的冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这一天作为圣诞节。后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期（Christmas Tide），各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。 在欧美许多国家里，人们非常重视这个节日，把它和新年连在一起，而庆祝活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。
圣诞老人的由来
圣诞节当然少不了圣诞老人，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？
相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。
到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。
在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。?
圣诞树的由来
圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。
其中一个是说：大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蜡烛放在树林中的枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们已经改用粉色的小灯泡了。
另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上，松枝立即变成一棵树，上面都挂满礼物，以答谢农民的好意。
圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。
每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。
更多内容可以百度一下
Document
圣诞老人 （西方文化的传说人物）
圣诞老人（Santa Claus）别称Saint Nick、Kris Kringle、Father Christmas或Santa（爱尔兰英语的Santy），一位专门在圣诞节前夜时悄悄赠送礼物给小孩子的神秘人物，是节日主题的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯（Saint Nicholas）的衍生形象。 传说每到12月24日晚上，有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔，挨家挨户地从烟囱进入屋里，然后偷偷把礼物放在好孩子床头的袜子里，或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里，都是忙于制作礼物和监督孩子们的行为。 虽然没有人真的见过神秘人的样子，但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人，头戴红色帽子，大大的白色胡子，一身红色棉衣，脚穿红色靴子的样子，拿着装有礼物的大袋子，因为总在圣诞节前夜出现派发礼物，所以习惯地称他为“圣诞老人”。
