前端学习--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 基本结构标签总结

前端学习--Day2 | HTML标签(上)_第1张图片


3 网页开发工具

开发工具有很多: Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder。

vscode使用

1、双击打开软件。

2、新建文件(Ctrl+N)。

3、保存(Ctrl+S),注意保存为.html文件

4、Ctrl+加号键,Ctrl+减号键,可以放大缩小视图。

5、生成页面骨架结构。

        输入!按下Tab键。

VSCode插件安装(除js外)

前端学习--Day2 | HTML标签(上)_第2张图片


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三大标签

6.1 SEO简介
Ø SEO(Search Engine Optimization):搜索引擎优化(自然排名)
Ø 作用:让网站在搜索引擎上的排名靠前
Ø 提升SEO的常见方法:
1. 竞价排名
2. 将网页制作成html后缀
3. 标签语义化(在合适的地方使用合适的标签)
4. ……
VS 
SEM 搜索引擎营销
6.2 SEO三大标签
1. title :网页标题标签
2. description :网页描述标签
3. keywords :网页关键词标签

前端学习--Day2 | HTML标签(上)_第3张图片

前端学习--Day2 | HTML标签(上)_第4张图片


4 HTML常用标签

4.1 标签语义化

        这是h5中出现的新特性, 每个h5标签都有自己的语义,标签语义化就是利用恰当的语义布局标签,使页面有良好的结构.

4.1.1 html5语义化标签

        这些标签显示特点和div一致,但是比div多了不同的语义.

前端学习--Day2 | HTML标签(上)_第5张图片

前端学习--Day2 | HTML标签(上)_第6张图片

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为强制换行(直接敲回车和空格没有用)

特点:单标签;

换行标签只是简单的另起一行,跟段落不一样,段落间会插入垂直间距


课堂案例:体育新闻

前端学习--Day2 | HTML标签(上)_第7张图片

前端学习--Day2 | HTML标签(上)_第8张图片 前端学习--Day2 | HTML标签(上)_第9张图片


4.4 文本格式化标签

标签语义:突出重要性,比普通文字更重要。 

语义 标签(*推荐使用,语义更强烈)
加粗 *或者
倾斜 *        or        
删除线 *        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文件上一级

前端学习--Day2 | HTML标签(上)_第10张图片

前端学习--Day2 | HTML标签(上)_第11张图片

前端学习--Day2 | HTML标签(上)_第12张图片

(2)绝对路径

指目录下的绝对位置,通常是从盘符开始的路径。例如:

①"C:\Users\asus\Desktop\前端\案例\ice-dundun\你没事吧.jpg"

(由于不同主机的路径不同,这一路径使用较少)

前端学习--Day2 | HTML标签(上)_第13张图片

前端学习--Day2 | HTML标签(上)_第14张图片

 ②或是完整的互联网地址,从服务器出发。
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=0https://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前端学习--Day2 | HTML标签(上)_第15张图片


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 音频标签

➢ 场景:在页面中插入音频

➢ 常见属性:

前端学习--Day2 | HTML标签(上)_第16张图片

        autoplay在谷歌浏览器中禁用,IE可以。
➢ 音频标签目前支持三种格式:MP3、Wav、Ogg

4.8.2 视频标签

场景:在页面中插入视频
➢ 代码:

➢ 常见属性:前端学习--Day2 | HTML标签(上)_第17张图片

学了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


    

圣诞节的那些事

1.圣诞是怎样由来的
2.圣诞老人的由来
3.圣诞树的由来

圣诞是怎样由来的

圣诞节是基督教世界最大的节日。一般认为12月25日作为圣诞节可能开始于公元336年的罗马教会。4世纪初,1月6日是罗马帝国东部各教会纪念耶稣降生和受洗的双重节日,即上帝通过耶稣向世人显示自己。 这一天又是罗马历书的冬至节,意味着万物复苏的开始。可能由于这个原因,罗马教会才选择这一天作为圣诞节。后来,因为各地教会使用的历书不同,具体日期不能统一,于是就把12月24日到第二年的1月6日定为圣诞节节期(Christmas Tide),各地教会可以根据当地具体情况在这段节期之内庆祝圣诞节。 在欧美许多国家里,人们非常重视这个节日,把它和新年连在一起,而庆祝活动之热闹与隆重大大超过了新年,成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关 。

这是一张雪图

圣诞老人的由来

圣诞节当然少不了圣诞老人,根据圣经记载,书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢?

snowman

相传在一千六百多年前,荷兰巴里地方有一个老人,名叫尼古拉斯,他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女,送她们三袋金子以逃过被卖的不幸。

到了一八二二年,由荷兰传教士把这位伟大慈善家的故事传到美国,装扮圣诞老人渐渐地流行于世界各国。根据调查,以上故事还有下文;当尼古拉斯偷偷把其中一袋金子送给其中一名女子时,他把金子从其中一个窗户扔进去,恰好掉进晾在壁炉上的一只长袜中。于是,将礼物放在圣诞袜子的送礼方法便传到至今。

Marry chismas

在平安夜里,孩子总会把一双双色彩缤纷的袜子挂在床头,然后在袜子旁边放杯热牛奶让圣诞老人喝,以让劳苦功高的圣诞老人解渴,并送份大礼给自己。?

圣诞树的由来

圣诞一直是庆祝圣诞节不可少的装饰物,如果家中没有圣诞树,就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。

其中一个是说:大约在十六世纪,圣诞树最先出现在德国,德国人把长青的松柏枝拿到屋中去摆设,将之成为圣诞树。后来,由德国人马丁路德把蜡烛放在树林中的枞树枝,然后点燃蜡烛,使它看起来像是引导人们到伯利恒去。而近今日,人们已经改用粉色的小灯泡了。

另一个传说记载。在很久以前,曾有一位农民,在圣诞节那天遇到一个穷苦小孩,他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上,松枝立即变成一棵树,上面都挂满礼物,以答谢农民的好意。

圣诞树真正出现在圣诞节时,首先见于德国,之后又传入欧洲和美国,并以其优美的姿态,成为圣诞节不可缺少的装饰。圣诞树的种类繁多,有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。

每棵圣诞树上都挂满琳琅满目的装饰品,但每棵树的顶端必定有个特大的星星,象征三博士跟随该星而找到耶稣,而且也只有该家庭的一家之主可以把这棵希望之星挂上。

更多内容可以百度一下




    
    
    
    Document


    

圣诞老人 (西方文化的传说人物)

圣诞老人(Santa Claus)别称Saint Nick、Kris Kringle、Father Christmas或Santa(爱尔兰英语的Santy),一位专门在圣诞节前夜时悄悄赠送礼物给小孩子的神秘人物,是节日主题的代表角色之一。他普遍被认为是基督教的圣人圣·尼古拉斯(Saint Nicholas)的衍生形象。 传说每到12月24日晚上,有个神秘人会乘驾由9只驯鹿拉的雪橇在天上飞翔,挨家挨户地从烟囱进入屋里,然后偷偷把礼物放在好孩子床头的袜子里,或者堆在壁炉旁的圣诞树下。他在一年中的其他时间里,都是忙于制作礼物和监督孩子们的行为。 虽然没有人真的见过神秘人的样子,但是人们会装扮成他的样子来给孩子送上礼物。他通常被描述为一位老人,头戴红色帽子,大大的白色胡子,一身红色棉衣,脚穿红色靴子的样子,拿着装有礼物的大袋子,因为总在圣诞节前夜出现派发礼物,所以习惯地称他为“圣诞老人”。

你可能感兴趣的:(前端,前端,html)