目录
1、HTML语法规范
1.1 基本语法概述
1、HTML标签是由尖括号包围的关键词,例如<html>。
2、HTML标签通常成对出现,例如<html></html>,我们称为双标签。
标签对中第一个标签是开始标签,第二个标签是结束标签。
3、有些特殊标签必须是单个标签(极少情况),例如<br />,我们称为单标签。
1.2 标签关系
双标签可以分为两类:包含关系(嵌套)和并列关系(并行)。
包含关系
<head>
<tile></title>
<head>
并列关系
<head></head>
<body></body>
2、HTML基本结构标签
2.1 第一个HTML网页
每个页面都会有基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档。
标签页 | 定义 | 说明 |
<html></html> | html标签 | 页面中最大的标签,我们称之为根标签 |
<head></head> | 文档头部 | head标签中必须要设置title标签 |
<title></title> | 文档标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档主体 | 元素包含文档的所有内容,页面内容基本都是放到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 文档类型声明标签
<!DOCTYPE html>
代码意思:当前页面采取HTML5版本来显示网页。
注意:
1、<!DOCTYPE> 不是一个HTML标签,而是一个文档类型声明,作用是告诉浏览器使用哪种HTML版本来显示网页。
2、<!DOCTYPE> 位于文档中最前面位置,处于<html>标签之前。
3.2 lang语言种类
用来定义当前文档(网页)显示的语言。(定义后也能显示其他语言)
1、en→English
2、zh-CN→中文
3、fr→法语
对浏览器(如翻译)和搜索引擎(百度、Google)等有一定作用。
3.3 字符串(必写,不写会乱码)
字符串(character set)是多个字符集合,以便计算机能够识别和储存各种文字。
在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应当使用哪种字符编码。
<meta charset="UTF-8"/>
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 标题标签(重要)
<h1>我是一级标题</h1>
<h1> - <h6> h→head。
标签语义:作为标题使用,并且依据重要性递减。
- h1在一个文档中只能使用一次;
- 文字都有加粗变大,但是从h1 → h6文字逐渐减小;
- 独占一行。
(和默认文字差不多大小的是四级标题)
4.3 段落和换行标签(重要)
<p>我是一个段落标签</p>
<br/>我是一个换行标签
①p→paragraph;一对p标签为一段。
特点:文本在一个段落中或根据浏览器窗口的大小自动换行。
②br→break;br为强制换行(直接敲回车和空格没有用)
特点:单标签;
换行标签只是简单的另起一行,跟段落不一样,段落间会插入垂直间距。
课堂案例:体育新闻
4.4 文本格式化标签
标签语义:突出重要性,比普通文字更重要。
语义 | 标签(*推荐使用,语义更强烈) |
---|---|
加粗 | <strong></strong>*或者<b></b> |
倾斜 | <em></em>* or <i></i> |
删除线 | <del></del>* or <s></s> |
下划线 | <ins></ins>* or <u></u> |
4.5 div\span标签
这两个标签没有语义,它们就是一个盒子,用来装内容。
<div>这是头部</div>
<span>今日价格<span>
①div→division:分割、分区 用来布局,但一行只能放一个div(big house)
②span:跨度、跨距 同样用来布局,但一行可以放多个(so small)
4.6 图像标签和路径(重点)
4.6.1 图像标签
<img src="图像URL"/>
img→image,用于定义HTML页面中的图像。(单标签)
src→source,来源。
src是<img>标签的必须属性,它用于指定图像文件的途径和文件名。
所谓属性:属于这个图像标签的特性
属性 | 属性值 | 说明 |
---|---|---|
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,即图像不能显示时的文本 |
title | 文本 | 提示文本,鼠标放在图像上时显示的文字 |
width/height | 像素 | 图像宽/高度(只设置一个即可等比例缩放) |
border | 像素 | 图像边框粗细 |
注意:
①图像标签可以有多个属性,必须写在标签名img之后;
②属性间不分先后顺序,标签名与属性、属性与属性间均以空格分开;
③属性采取键值对的格式,即key=“value”的格式,属性=“属性值”。
4.6.2 路径
1、目录文件夹和根目录:
目录文件夹:就是普通文件夹。
根目录:即打开目录文件夹的第一层。
2、vscode打开目录文件夹
文件--打开文件夹,选择目录文件夹,后期非常方便管理文件。
3、路径
路径可以分为:相对路径(/)+绝对路径(\)
(1)相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。
即图片相对于html页面的位置。
相对路径分类 | 符号 | 说明 |
---|---|---|
同一级路径 | 图像与HTML文件同一级 <img src="dun.jpg"> ➢ VS Code快捷操作:直接敲./后,会自动提示同级目录中有哪些文件,直接选择即可! | |
下一级路径 | / | 图像在HTML文件下一级 <img src="ice-dundun/蛮忙的走了.jpg"/> |
上一级路径 | ../ | 图像在HTML文件上一级 <img src="../回家喂猪去吧.jpg"> |
(2)绝对路径
指目录下的绝对位置,通常是从盘符开始的路径。例如:
①"C:\Users\asus\Desktop\前端\案例\ice-dundun\你没事吧.jpg"
(由于不同主机的路径不同,这一路径使用较少)
4.7 超链接标签(重点)
在HTML标签中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面。
4.7.1 链接的语法格式
<a href="跳转目标" target=“目标窗口跳转方式”>文本或图像</a>
a→anchor:锚
属性 | 作用 |
---|---|
href | 指定连接目标的url地址,(必须属性)只有为应用这一属性,标签才能具有超链接功能。 |
target | 指定链接页面打开方式,其中_self为默认值,_blank为在新窗口中打开方式。 |
4.7.2 链接分类:
①外部链接:
<a href="https://www.bilibili.com">哔哩哔哩网站</a>
②内部链接:网站内部页面之间的相互链接,直接链接内部网页名称即可。(同样分上下同级)
③空链接:还未确定链接目标时,用空链接占个位置。(可之后更换)
点击之后会回到网页顶部。
<a href="#">这是一个空链接</a>
④下载链接:如果href地址是一个文件或压缩包,则会下载这个文件。
注意:地址链接的是文件.exe或者 .zip等压缩包形式。
<a href="回家喂猪去吧.rar">这是一个下载链接</a>
⑤网页元素链接:即将文本部分换成其它元素如图片。
<a href="回家喂猪去吧.jpg"><img src="dun.jpg" alt="无法显示嘿"></a>
⑥锚点链接:点击链接,快速定位到页面的某个位置。
※在链接文本的href属性中,设置属性值为#名字的形式;
※找到目标位置链接,里面添加一个id属性=刚才的名字;
<a id="1" href="123.jpg">1集</a>
<a href="#1">幸好还有书籍第一集</a>
4.7.3 链接标签的显示特点(了解)
-
a标签默认文字有下划线
-
a标签从未点击过,默认文字显示蓝色
-
a标签点击过之后,文字显示为紫色(清除浏览器历史记录可恢复蓝色)
4.8 音视频标签
4.8.1 音频标签
➢ 场景:在页面中插入音频
<audio src="./music.mp3" controls></audio>
➢ 常见属性:
autoplay在谷歌浏览器中禁用,IE可以。
➢ 音频标签目前支持三种格式:MP3、Wav、Ogg
4.8.2 视频标签
场景:在页面中插入视频
➢ 代码:
<video src="images/video.mp4" autoplay loop controls></video>
➢ 常见属性:
学了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-圣诞老人)
<!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>
<p>1.圣诞是怎样由来的<br>
<a href="#1">2.圣诞老人的由来</a><br>
<a href="#2">3.圣诞树的由来</a></p>
<h3>圣诞是怎样由来的</h3>
<p>圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初,1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日,即上帝通过耶稣向世人显示自己。 这一天又是罗马历书的冬至节,意味着万物复苏的开始。可能由于这个原因,罗马教会才选择这一天作为圣诞节。后来,因为各地教会使用的历书不同,具体日期不能统一,于是就把12月24日到第二年的1月6日定为圣诞节节期(Christmas Tide),各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。 在欧美许多国家里,人们非常重视这个节日,把它和新年连在一起,而庆祝活动之热闹与隆重大大超过了新年,成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。</p>
<img src="images/t1.gif" alt="这是一张雪图">
<h3 id="1">圣诞老人的由来</h3>
<p>圣诞节当然少不了<a href="圣诞老人.html">圣诞老人</a>,根据圣经记载,书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢?</p>
<img src="images/t2.jpg" alt="snowman">
<p>相传在一千六百多年前,荷兰巴里地方有一个老人,名叫尼古拉斯,他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女,送她们三袋金子以逃过被卖的不幸。</p>
<p>到了一八二二年,由荷兰传教士把这位伟大慈善家的故事传到美国,装扮圣诞老人渐渐地流行于世界各国。根据调查,以上故事还有下文;当尼古拉斯偷偷把其中一袋金子送给其中一名女子时,他把金子从其中一个窗户扔进去,恰好掉进晾在壁炉上的一只长袜中。于是,将礼物放在圣诞袜子的送礼方法便传到至今。</p>
<img src="images/t3.jpg" alt="Marry chismas">
<p>在平安夜里,孩子总会把一双双色彩缤纷的袜子挂在床头,然后在袜子旁边放杯热牛奶让圣诞老人喝,以让劳苦功高的圣诞老人解渴,并送份大礼给自己。?</p>
<h3 id="2">圣诞树的由来</h3>
<p>圣诞一直是庆祝圣诞节不可少的装饰物,如果家中没有圣诞树,就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。</p>
<p>其中一个是说:大约在十六世纪,圣诞树最先出现在德国,德国人把长青的松柏枝拿到屋中去摆设,将之成为圣诞树。后来,由德国人马丁路德把蜡烛放在树林中的枞树枝,然后点燃蜡烛,使它看起来像是引导人们到伯利恒去。而近今日,人们已经改用粉色的小灯泡了。</p>
<p>另一个传说记载。在很久以前,曾有一位农民,在圣诞节那天遇到一个穷苦小孩,他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上,松枝立即变成一棵树,上面都挂满礼物,以答谢农民的好意。</p>
<p>圣诞树真正出现在圣诞节时,首先见于德国,之后又传入欧洲和美国,并以其优美的姿态,成为圣诞节不可缺少的装饰。圣诞树的种类繁多,有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。 </p>
<p>每棵圣诞树上都挂满琳琅满目的装饰品,但每棵树的顶端必定有个特大的星星,象征三博士跟随该星而找到耶稣,而且也只有该家庭的一家之主可以把这棵希望之星挂上。</p>
<img src="images/t4.jpg" alt="">
<p>更多内容可以<a href="https:www.baidu.com" target=_blank>百度一下</a></p>
</body>
</html>
<!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>
<p>圣诞老人(Santa Claus)别称Saint Nick、Kris Kringle、Father Christmas或Santa(爱尔兰英语的Santy),一位专门在圣诞节前夜时悄悄赠送礼物给小孩子的神秘人物,是节日主题的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯(Saint Nicholas)的衍生形象。 传说每到12月24日晚上,有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔,挨家挨户地从烟囱进入屋里,然后偷偷把礼物放在好孩子床头的袜子里,或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里,都是忙于制作礼物和监督孩子们的行为。 虽然没有人真的见过神秘人的样子,但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人,头戴红色帽子,大大的白色胡子,一身红色棉衣,脚穿红色靴子的样子,拿着装有礼物的大袋子,因为总在圣诞节前夜出现派发礼物,所以习惯地称他为“圣诞老人”。 </p>
<img src="images/oldman.jpg" alt="">
</body>
</html>