一、标签语义
学习标签是有技巧的,重点是记住每个标签的语义。简单理解就是指标签的含义,即这个标签是用来干嘛的。根据标签的语义,在合适的地方给一个最为合理的标签,可以让页面结构更清晰。
标签的语义一定要记住。
二、标题标签<h1> - <h6>(重要)
为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题,即<h1> - <h6> 。
<h1> 我是一级标题 </h1>
单词head 的缩写,意为头部、标题。标签语义∶作为标题使用,并且依据重要性递减。
特点∶1.加了标题的文字会变的加粗,字号也会依次变大;2.一个标题独占一行。
Pink老师赋诗一首:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减,</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后,</h5>
<h6>具体效果刷新见。</h6>
------pink老师
</body>
</html>
三、段落和换行标签(重要)
(一)段落标签
在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示。在HTML标签中,<p>标签用于定义段落,它可以将整个网页分为若干个段落。
<p> 我是一个段落标签 </p>
单词paragraph的缩写,意为段落。
标签语义:可以把HTML文档分割为若干段落。
特点:1.文本在一个段落中会根据浏览器窗口的大小自动换行;2.段落和段落之间保有空隙。
在查看中——》切换自动换行,可以使粘贴过来的文本换行。在文本中输入多个空格只会显示一个。
(二)换行标签
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行。如果希望某段文本强制换行显示,就需要使用换行标签<br/>。br是单标签。
<br />
是单词break的缩写,意为打断,打破
标签语义:强制换行
四、课堂案例:体育新闻
实现一个如下图所示的页面
<!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>水花61分伊戈达拉制胜抢断西决勇士再胜开拓者总分2-0</h1>
<h3>数据统计:水花兄弟合砍61分</h3>
<p>库里22投11中,三分14投4中,罚球11罚全中得到37分8篮板8助攻,职业生涯季后赛得分30+次数来到35次,超过哈登排名现役第3位,仅次于詹姆斯和杜兰特。</p>
<p>汤普森22投8中,三分8投4中得到24分3篮板2助攻,德拉蒙德-格林得到16分10篮板7助攻5盖帽,凯文-鲁尼得到14分7篮板2助攻,今天勇士有7名替补出场。</p>
<h3>兄弟对决升级:小库里给哥哥造成压力</h3>
<p>库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中,小库里没有给哥哥造成压力,他出场19分钟,7投1中只得到3分3篮板2助攻,在场期间输掉10分。</p>
<p>但在西决第2场中,小库里攻防两端都打出杰出的表现,全场送出4次抢断,包括直接抢断自己的哥哥库里,在防守端给库里造成了极大的困扰。</p>
<p>作者:pink老师<br>2021-2-20</p>
</body>
</html>
五、文本格式化标签
在网页中,有时需要为文字设置粗体、斜体或下划线等效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示
标签语义:突出重要性,比普通文字更重要。
<strong>加粗</strong>
语义 | 标签 | 说明 |
---|---|---|
加粗 | <strong></strong>或者<b></b> | 更推荐使用<strong>标签加粗,语义更强烈 |
倾斜 | <em></em>或者<i></i> | 更推荐使用<em>标签加粗,语义更强烈 |
删除线 | <del></del>或者<s></s> | 更推荐使用<del>标签加粗,语义更强烈 |
下划线 | <ins></ins>或者<u></u> | 更推荐使用<ins>标签加粗,语义更强烈 |
重点记住 加粗 和 倾斜。
六、<div>和<span>标签
<div>和<span>是没有语义的,它们就是一个盒子,用来装内容的。
<div>这是头部</div>
<span>今日价格</span>
div是division的缩写,表示分割、分区。span意为跨度、跨距,是横着显示的。
特点:
1、<div>标签用来布局,但是现在一行只能放一个<div>。是一个大盒子。
2、<span>标签用来布局,一行上可以多个<span>。小盒子。
七、图像标签和路径(重点)
(一)图像标签
在HTML标签中,<img>标签用于定义HTML页面中的图像。
图像标签是一个单标签,是单词image的缩写,意为图像。
<img src="图像URL"/>
src是<img>标签的必须属性,它用于指定图像文件的路径和文件名。
所谓属性:简单理解就是属于这个图形标签的特性。
图像必须要和html文件放在同一目录下。
图像标签的属性 | ||
属性 | 属性值 | 说明 |
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本,图像不能显示时提示的文字 |
title | 文本 | 提示文本,鼠标放到图像上,显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图像的高度 |
border | 像素 | 设置图像边框的粗细 |
图像标签属性注意点:
1、图像标签可以拥有多个属性,必须写在标签名src的后面。
2、属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
3、属性采取键值对的格式,即key="value"的格式,属性="属性值"。
重点掌握点:
- 请说出 图像标签 那个属性是必须写的?
- 请说出 图像标签 alt 和 title 属性的区别?
(二)路径
页面中图片会非常多,通常我们会新建一个文件夹来存放这些图像文件(images),这时再查找图像,就需要采用“路径”的方式来指定图像文件的位置。
1、目录文件夹和根目录
实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。
目录文件夹:就是普通文件夹,里面只不过存放了我们页面所需要的相关素材,比如html文件、图片等。
根目录:打开目录文件夹的第一层就是根目录。
2、VSCode打开目录文件夹
文件——》打开文件夹,选择目录文件夹,后期非常方便管理文件。
3、相对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。
这里简单来说,图片相对于HTML页面的位置。
相对路径 | 符号 | 说明 |
同一级路径 | 图像文件位于HTML文件同一级 如<img src="baidu.gif"/> | |
下一级路径 | / | 图像文件位于HTML文件下一级 如<img src="images/baidu.gif"/> |
上一级路径 | ../ | 图像文件位于HTML文件上一级 如<img src="../baidu.gif"/> |
4、绝对路径
绝对路径:是指目录下的绝对路径位置,直接到达目标位置,通常是从盘符开始的路径。
例如,“E:\VSCode\ChengXu\HTML\test\1.png” 或完整的网络地址"https://imghome.csdnimg.cn/images/20201124032511.png"
八、超链接标签(重点)
在HTML标签中,<a>标签用于定义超链接,作用是从一个页面链接到另一个页面。
(一)链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
单词anchor的缩写,意为:锚。
两个属性需要注意:
属性 | 作用 |
href | 用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能 |
target | 用于指定链接页面的打开方式,其中_self为默认值,__blank为在新窗口中打开方式 |
(二)链接的分类
1、外部链接
例如<a href="http://www.baidu.com">百度</a>。
<a href="http://www.baidu.com" target="__blank">百度</a>
<a href="http://www.baidu.com" target="_self">百度</a>
__blank属性是打开新的页面显示,_self属性是覆盖当前页面显示。
外部链接必须以“http://”开始。
2、内部链接
网站内部页面直接的相互链接。直接连接内部页面名称即可,例如 <a href="index.html" target="_self">首页</a>
<a href="09-图像标签.html"> 图像标签 </a>
3、空链接
如果当时没有确定链接目标时,<a href=“#”>首页</a>,用#号代替。
<h4>3.空链接:#</h4>
<a href="09-图像标签.html"> 图像标签 </a>
4、下载链接
如果href里面地址是一个文件或者压缩包,会下载这文件。
<h4>4.下载链接:地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
<a href="1.zip"> 下载文件 </a>
5、网页元素链接
在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。
<h4>5.网页元素的链接</h4>
<a href="http://donghao.fun" target="__blank"><img src="1.png"/></a>
6、锚点链接
点我们的链接,可以快速定位到页面的某个位置
在链接文本的href属性中,设置属性值为#名字 的形式,如<a href="two"> 第二集 </a>
找到目标位置标签,里面添加一个id属性=刚才的名字,如:<h3 id="two"> 第二集介绍 </h3>
<!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>
<h2>目录</h2>
1 早年经历<br>
2 演艺经历<br>
3 <a href="#live">个人生活</a><br/>
4 <a href="#zuopin">主要作品</a><br/>
5 社会活动<br/>
6 获奖记录<br/>
7 人物评价<br/>
<h3>早年经历</h3>
刘德华出生于香港新界,在家中排行老四,幼时随家人搬到了九龙钻石山的木屋区居住,并和姐弟一起帮助家里打理卖稀饭的生意
<h3>演艺经历</h3>
1981年,刘德华考进第10期无线电视艺员训练班 [28] ;同年,出演个人首部电视剧《江湖再见》,在剧中饰演以贩卖妇女为生的小混混阿龙;该剧获得美国电视节电视剧特别奖.
2016年4月1日,刘德华参演的动作片《我的特工爷爷》上映,他在片中饰演嗜赌成性且脾气暴躁的小混混李政久 [112] ;同年,参演魔幻类型的3D动作片《长城》 .
<h3 id="live">个人生活</h3>
刘德华获香港树仁大学颁予荣誉文学博士
刘德华获香港树仁大学颁予荣誉文学博士(7张)
<h3 id="zuopin">主要作品</h3>
参演电影
人潮汹涌2021-2-12
饰演周全 导演饶晓志 主演肖央、万茜、程怡
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</body>
</html>