学习内容HTML简介导读以及HTML的标签（上）。
文章目录
一：HTML简介导读
1. 网页
-
1.1 什么是网页
- 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合网页是网站中的一“页”，通常是 HTML格式的文件，它要通过浏览器来阅读
- 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页常见以.htm 或.html后缀结尾的文件，因此将其俗称为 HTML文件
-
1.2 什么是 HTML
- HTML指的是超文本标记语言(HyperText Markup Language)，它是用来描述网页的一种语言HTML不是一种编程语言，而是一种标记语言(markuplanguage)。标记语言是一套标记标签(markup tag)。
- 所谓超文本，有2 层含义 :
- 1.它可以加入图片、声音、动画、多媒体等内容(超越了文本限制 )。
- 2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接(超级链接文本)
-
1.3网页的形成
- 网页是由网页元素组成的，这些元素是利用 html标签描述出来，然后通过浏览器解析来显示给用户的。
-
前端开发代码-->浏览器显示代码（解析）-->生成最后的Web页面
-
1.4 网页总结
- 网页是图片、链接、文字、声音、视频等元素组成其实就是一个html文件(后缀名为html)网页生成制作:有前端人员书写HTML文件然后浏览器打开就能看到了网页HTML:超文本标记语言,用来制作网页的一门语言.有标签组成的.比如 图片标签 链接标签 视频标签等.
2. 常用浏览器
- 浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐( Firefox)、谷歌(Chrome)、Safari和Opera等.平时称为五大浏览器。
- 浏览器内核(渲染引擎):负责读取网页内容，整理讯息，计算网页的显示方式并显示页面
3. Web标准
- 3.1为什么需要Web标准
- 遵循Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：
- 1.让Web的发展前景更广阔
- 2.内容能被更广泛的设备访问
- 3.更容易被搜寻引警搜索
- 4.降低网站流量费用
- 5.使网站更易于维护
- 6.提高页面浏览速度
- 3.2Web 标准的构成
- 主要包括结构 ( Structure ) 、表现( Presentation ) 和行为( Behavior ) 三个方面构成
- Web 标准提出的最佳体验方案:结构、样式、行为相分离简单理解: 结构写到HTML 文件中，表现写到 CSS 文件中，行为写到JavaScript文件中。
- 主要包括结构 ( Structure ) 、表现( Presentation ) 和行为( Behavior ) 三个方面构成
二：HTML标签（上）
0.VSCode的常用快捷键
| 序号 | 功能 | 快捷键 |
|---|---|---|
| 1 | 快速复制一行 | shift+alt+下箭头（上箭头） |
| 2 | 选定多个相同的单词 | ctrl + d |
| 3 | .添加多个光标 | ctrl+alt +上箭头（下箭头） |
| 4 | 全局替换某些单词 | ctrl + h |
| 5 | 快速定位到某一行 | ctrl + g |
| 6 | 选择某个区块 | 按住shift + alt 后拖动鼠标 |
| 7 | 放大缩小整个编辑器界面 | ctrl + （+/-） |
| 8 | 自定义快捷键 （注释） | ctrl + / |
| 9 | 自动换行 | Alt+ Z |
1.HTML语法规范
-
1.1基本语法概述
- 1.HTML标签是由尖括号包围的关键词，例如
<html> - 2.HTML标签通常是成对出现的，例
<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签 - 3.有些特殊的标签必须是单个标签(极少情况)，例如
<br/>，我们称为单标签。
- 1.HTML标签是由尖括号包围的关键词，例如
-
1.2 标签关系
- 双标签关系可以分为两类:包含关系和并列关系
- 包含关系
<！--包含关系-->
<head>
<title></title>
<head>
<！--并列关系-->
<head></head>
<body></body>
2.HTML基本结构标签
| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> | HTML标签 | 页面中最大的标签 |
<head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
3.VSCode 工具
<!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>
</body>
</html>
-
1.文档类型声明标签
-
<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页 -
-
<!DOCTYPE html>- -
这句代码的意思是:当前页面采取的是HTML5版本来显示网页注意:
-
1<!DOCTYPE>声明位于文档中的最前面的位置，于标签之前
-
2.<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签
-
-
2.lang 语言种类
-
用来定义当前文档显示的语言
-
1.en定义语言为英语
-
2.zh-CN定义语言为中文
-
简单来说定义为en就是英文网页定义为zh-CN就是中文网页其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文（这个属性对浏览器和搜索引擎还是有作用的）
-
-
3.字符集
-
字符集(Characterset)是多个字符的集合。以便计算机能够识别和存储各种文字，在标签内，可以通过标签的charset 属性来规定HTML文档应该使用哪种字符编码
-
-
<meta charset="UTF-8” />- -
charset 常用的值有:GB2312、BIG5、GBK和UTF-8，其中UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符
-
注意:上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的"UTF-8”，不要写成"utf8"或"UTF8”
-
4. HTML 常用标签
-
4.1 标题标签
-
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题即
<h1>- <h6> -
标签语义:作为标题使用，并且依据重要性递减
-
特点:
-
1.加了标题的文字会变的加粗，字号也会依次变大
-
2.一个标题独占一行。
-
<h1>我是一级标签</h1>
<h2>我是二级标签</h2>
<h3>我是三级标签</h3>
<h4>我是四级标签</h4>
<h5>我是五级标签</h5>
<h6>我是六级标签</h6>
-
4.2 段落标签
-
标签语义:突出重要性,比普通文字更重要.
-
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，
标签用于定义段落，它可以将整个网页分为若干个段落
-
特点:
-
1.文本在一个段落中会根据浏览器窗口的大小自动换行
-
2.段落和段落之间保有空隙
-
-
4.3.换行标签
-
标签语义:强制换行
-
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
<br/> -
特点:
-
1.
<br/>是个单标签 -
2.
<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
-
<p>阿甘妙世界<br />（英文The Amazing World of Gumball）<br />是部美国与英国的动画喜剧，由位于英国伦敦的卡通频道欧洲工作室制作，2011开始在卡通频道播出。BenBocquelet及英国电影和电视艺术学院奖项得奖者MicGraves担任导演。该剧曾在法国安锡国际动画影展中，获得最佳电视制作水晶奖</p>
<p>《阿甘妙世界》是一出卡通喜剧，主角是住在平凡的虚构城市－埃尔莫镇（Elmore）、却非常搞怪有趣的华特森（Watterson）一家。大部分的故事及围绕着这个家庭的日常生活发展。剧中内容融合现实场景，使用2D及3D绘图技术，少数角色是使用偶戏方式演出</p>
<p>在台湾卡通频道播映的版本中，将Watterson翻译为陶家、也将艾尔摩镇译作吉吉小镇，大多数角色名称也使用中文化译名，并非直接照着原文音译。 于第二季时剧情、风格、角色设定皆有某种程度的更动</p>
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或<b></b> | 更推荐使用<strong></strong> 标签加粗，语义更强烈 |
| 倾斜 | <em></em>或<i></i> | 更推荐使用<em></em> 标签加粗，语义更强烈 |
| 删除线 | <del></del>或<s></s> | 更推荐使用<del></del> 标签加粗，语义更强烈 |
| 下划线 | <ins></ins>或<u></u> | 更推荐使用<ins></ins> 标签加粗，语义更强烈 |
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>的文字
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
-
4.5 div和span标签
-
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的 -
这是头部
-
今日价格
-
特点
-
1.
<div>标签用来布局，但是一行只能放一个<div>。大盒子 -
2.
<span>标签用来布局，一行上可以多个<span>。小盒子
-
<div>我是一个div标签，单独占一行</div>
<div>我是一个div标签，单独占一行</div>
<span>span好兄弟一</span>
<span>span好兄弟二</span>
<span>span好兄弟三</span>
-
4.6 图像标签
-
在HTML标签中，标签用于定义HTML页面中的图像
-
-
<img src="图像URI”/>- -
图像标签的其他属性：
-
src 是标签的必须属性，它用于指定图像文件的路径和文件名所谓属性:简单理解就是属于这个图像标签的特性
-
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
<h4> height 给图像设定高度:</h4>
<img src="/素材/阿甘.jpg" alt="阿甘捏" title="这是阿甘噢" height="100" />
<h4> 图像标签的使用:</h4>
<img src="/素材/阿甘.jpg" height="100" />
<h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
<img src="/素材/阿甘.jpg1" alt=" 阿甘捏" height="100" />
<h4> title 提示文本 鼠标放到图像上,提示的文字:</h4>
<img src="/素材/阿甘.jpg" title="这是阿甘噢" alt="阿甘捏" height="100" />
<h4> width 给图像设定宽度:</h4>
<img src="/素材/阿甘.jpg" alt="阿甘捏" title="这是阿甘噢" width="100
" />
<h4> border 给图像设定边框:</h4>
<img src="/素材/阿甘.jpg" alt="阿甘捏" title="这是阿甘噢" height="100" border="15" />
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
两个属性的作用如下:
| 属性 | 作用 |
|---|---|
| herf | 用于指定链接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能。 |
| target | 用于指定链接页面的打开方式，其中 self为默认值， blank为在新窗口中打开方式。 |
- 3.链接分类
- 1.外部链接，例如
<a href="http://www.baidu.com">百度</a > - 2.内部链接:网站内部页面之间的相互链接 直接链接内部页面名称即可，例如
<a href="index.html">首页</a> - 3.空链接:如果当时没有确定链接目标时，
<a href="#">首页</a> - 4.下载链接：如果href 里面地址是一个文件或者压缩包，会下载这个文件。
- 5.网页元素链接:在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接
- 6.锚点链接:点我们点击链接可以快速定位到页面中的某个位置
在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">树木</a>
找到目标位置标签，里面添加一个id属性 = 刚才的名字如:<h3 id ="two">树木的介绍</h3>
- 1.外部链接，例如
<h4>1.外部链接</h4>
<a href="http://www.qq.com" target="_blank"> 腾讯</a>
target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面
<h4>2.内部链接: 网站内部页面之间的相互链接</h4>
<a href="gongsijianjie.html" target="_blank">公司简介</a>
<h4>3.空链接:#</h4>
<a href="#">公司地址</a>
<h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
<a href="/素材/阿甘.zip">下载文件</a>
<h4>5.网页元素的链接</h4>
<a href="http://www.baidu.com"><img src="https://assets.msn.cn/weathermapdata/1/static/weather/Icons/taskbar_v5/Condition_Card/PartlyCloudyNightV2.svg" /></a>
5.HTML中的注释和特殊字符
- 在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代
6.使用综合案例
<!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>
<h4>1.圣诞节是怎样由来的<br />
<ins><a href="#one">2.圣诞老人的由来</a><br /></ins>
<ins><a href="#two">3.圣诞树的由来</a></ins>
</h4>
<h2>圣诞节是怎样由来的</h2>
<h5>圣证节是基督教世果景大的节日。一般认为1225日作为圣诞节可能开于元33年的罗马教会，4织初 1月6日是罗马帝国东当客教会织会降生和受洗的双重节日，即上帝通讨取鲜向世人显示自己，这一天又是罗马历书冬至节，意味着万物复苏的开始。可能由于这个原因，罗马教会才选择这天作为圣诞节、后来，因为各地教会使用的历书不同，具体日期不能统一，于是就把12月24日到第二年的1月6日定为圣诞节节期(Christmaside),各地教会可以当地具体情况在这段节期之内庆祝圣诞节在欧美许多国家里，人们非常重视这节日，把它和新年连在一起，而庆视活动之热闹与隆重大大超过了新年，成为一个全民的节日。12月24日平安夜、12月25日圣诞节的主要纪念活动都与耶稣降生的传说有关。</h5>
<img src="/素材/圣诞老人2.gif_wh860.gif" alt="圣诞老人" title="圣诞老人" />
<h2 id="one">圣诞老人的由来</h2>
<h5>圣诞节当然少不了<a href="/案例/圣诞老人.html" target="_blank">圣诞老人</a>，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？</h5>
<img src="/素材/圣诞老人1.jpg" alt="圣诞老人" title="圣诞老人" />
<h5>相传在一千六百多年前，荷兰巴里地方有一个老人,名叫尼古拉斯，他生最爱帮助贫穷的人家，其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸</h5>
<h5>到了一八二二年，由荷兰传教土把这位大慈善家的故事传到美国，装扮圣诞老人渐务地流行于世界各国，根据调查，以上故事还有下文,当尼古拉斯偷偷的把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今</h5>
<h2 id="two">圣诞树的由来</h2>
<p>圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说.</p>
<p>其中一个是说:大约在十六世纪，圣诞树最先出现在德国，德国人把长青的格拍技拿到屋中去设，将之成为圣诞。后来，由德国人马丁路德把烛放在树林中的拟树技，然后点燃独使它看起来像是引导人们到伯利恒去。而近今日，人们已经改用粉色的小灯泡了。</p>
<p>另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一穷苦小孩，他热情地接待了这个儿童，儿童临走时折下-根技适在地上，技立即变成一树，上面都挂满礼物，以答谢农民的好意</p>
<p>圣诞代真正出现在圣诞节时，首先贝于德目，之后又传入欧洲和美目，并以其优美的姿态，成为圣诞节不可敌少的装施，圣诞树的和类警多，有天然粕圣诞做、也有人造圣证树及白色圣诞树，每圣诞树上都结流林浪满目的装施品，但每棵树的项端必定有人特大的星星，象征三博士跟随该星而找到跃，而且也只有该家庭的一家之主可以把这课希望之屋挂上。</p>
<img src="/素材/圣诞老人4.jpg" alt="圣诞老人" title="圣诞老人" /><br>
<a href="http://www.baidu.com">更多内容请详情百度</a>
</body>
</html>
总结
以上就是今天要讲的内容，本文仅仅简单介绍和总结了HTML部分标签的使用，如果有不好的地方请多多指点。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
