HTML基本标签（上）

时间：2020-01-23 22:52:56 阅读：1390 评论：0 收藏：0 [点我收藏+]

HTML基本标签结构

目标：

1.能够说出标签的书写注意规范
? 2.能够写出HTML骨架标签
? 3.能够写出超链接标签
? 4.能够写出图片标签，并说出alt和title的区别
? 5.能够说出相对路径的三种形式

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们称之为根标签
<head></head>	文档的头部	注意在head标签中我们必须设置title标签
<title></title>	文档的标题	让页面拥有一个属于自己的网页标签
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

HTML文档的后缀必须是.html或.html.浏览器的作用是读取HTML文档，并以网页的形式显示它们，此时，若用浏览器打开这个网页，我们就可以预览我们所写的HTML文件了。

在桌面创建一个记事本

<head>
    <title>Long Time No See</title>
</head>
<body>
    质变是量变的必然结果！
</body>
</html>

title

body

这些都是HTML基本的结构标签

3.网页开发工具

在编写HTML文件时我们总不能每次都创建一个记事本，写完后，再把文件名改为.html吧，这样做太麻烦，而且在书写时还有可能书写错误，因此引入了下面的开发工具。

Dreamweaver，web storm，visual studio code等

VS Code 工具生成骨架标签新增代码

1.<!DOCTYPE>标签

2.lang语言

3.charset字符集

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Long Time No See</title>
</head>
<body>
   质变是量变的必然结果 optimistic！
    
</body>
</html>

3.1文档类型声明标签

文档类型声，其作用是告诉浏览器使用那种HTML版本来显示网页

<!DOCTYPE html>

这句话的意思是：当前网页采取的是HTML5版本来显示网页.

注意：

1.<！DOCTYPE>声明位于位于文档中最前面的位置，处于HTML标签之前。

2.<！DOCTYPE>不是一个HTML标签，它是文档类型声明标签。

3.2 Lang 语言种类

<html lang="en">

用来定义当前文档的显示语言。

1.en定义语言为英语

2.zh-CN定义语言为中文

简单来说定义为en就是英文网页，定义为zh-CN就是中文网页。lang 是language的缩写。其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。

这个属性对浏览器和搜索引擎（百度，谷歌等）都是有作用的。

3.3字符集

字符集（charset）是多个字符的集合，以便计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档i应该使用那种字符编码

<meta charset="UTF-8"/>

charset常用的值有：GB2312，BIG5，GBK和UTF-8,其中UTF-8也被称为万维码，基本包含了全世界所有国家要用到的字符。

注意：

上面的语法是必须要写的代码，否则可能会引起乱码的情况。一般情况下，统一使用”UTF-8“编码，尽量写成统一标准的“UTF-8”。

3.4总结：

1.以上的三个代码VS code自动生成，不需要我们重写。

2.<！DOCTYPE html>文档类型声明标签，告诉浏览器这个页面采取html5版本来显示。

3.<html lang="en">告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示

4.<meta charset="UTF-8"/>必须写，采用UTF-8来保存文字，若不写，就会乱码。

4.HTML 常用标签

4.1 标签语义

学习标签是有技巧的，重点是记住每个标签的语义。简单的理解就是指标签的含义，即这个标签有什么用。

根据标签的语义，在合适的地方给一个最为合适的标签，可以让网页结构更清晰。

4.2 标题标签 h1-h6

为了使网页更具语义化，我们会在页面中用到标题标签，HTML提供了6个等级的网页标题。

h 是head的缩写，意思为头部，标题。

标签的语义：作为标题使用，标题的重要性从h1到h6依次递减，记住只到h6。它有以下几个特点：

1.加了标题的文字会加粗，字号从h1到h6依次递减。

2.一个标题独占一行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Long Time No See</title>
</head>
<body>
<h1>具体的意思请看下面：</h1>
<h1>这是一级标签</h1>
<h2>这是二级标签</h2>
<h3>这是三级标签</h3>
<h4>这是四级标签</h4>
<h5>这是五级标签</h5>
<h6>这是六级标签</h6>
    
</body>
</html>

技术图片

4.3 段落标签和换行标签

在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示，在HTML标签中，<p>标签用于定义段落，可以将整个网页分为若干段落。

p是英文单词paragraph的缩写，意思为：段落。

标签语义：可以把HTML文档分割为若干段落。

特点：

1.文本在一个段落中会根据浏览器窗口的大小自动换行。

2.段落与段落之间保持有空隙。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Long Time No See</title>
</head>
<body>
    <p>半夏、总是觉得、
    
    青春的扉页上就应该、写满张狂写满叛逆、写满笑写满泪、
        我们可以不管不顾、高兴了可以大声地笑、难过了可以大声地哭、喜欢的事就
        要放手去追逐</p>
        <p>欢迎开启我的青春封鉴,谁在青春的时候懂得青春
            张欣雨、遗忘在旧时光里的青春卡带</p>
</body>
</html>

技术图片

无论你在HTML文档中打多少个空格，都会被忽略，最终对文档的显示没有影响，你想把文章分为几个段落，就写几个<P></p>标签。

换行标签

在HTML中，一个段落中的文字会从左到右依次排序，直到浏览器窗口的右端，然后才会自动换行。如果需要某段文本强制换行显示，就需要使用换行标签

br 是单词break的缩写，意思为打断，换行。

标签语义：强制换行。

特点：

1.
是个单标签标签

2.
标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

<br/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Long Time No See</title>
</head>
<body>
    <p>半夏、总是觉得、青春的扉页上就应该、写满张狂写满叛逆、写满笑写满泪、
        我们可以不管不顾、高兴了可以<br/>大声地笑、难过了可以大声地哭、喜欢的事就
        要放手去追逐</p>
        <p>欢迎开启我的青春封鉴,谁在青春的时候懂得青春
            张欣雨、遗忘在旧时光里的青春卡带</p>
</body>
</html>

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Long Time No See</title>
</head>
<body>
    <h1>你说的疯狂</h1>
    <p>半夏、总是觉得、青春的扉页上就应该、写满张狂写满叛逆、写满笑写满泪、
        我们可以不管不顾、高兴了可以大声地笑、难过了可以大声地哭、喜欢的事就
        要放手去追逐</p>
        <p>欢迎开启我的青春封鉴,谁在青春的时候懂得青春
            张欣雨、遗忘在旧时光里的青春卡带</p>
            <h1>励志去哪儿了？</h1>
            <p> <h4>身边若有对自己好的人，瞬间亦是长生。能被人牢牢牵挂在心，永不忘记，消亡亦是长生—— 童玲 </h4>
                <h4>世界上那些最容易的事情中，拖延时间最不费力—— 佚名 </h4>
                <h4>一个伟大的人有两颗心，一颗心流血，一颗心宽容—— 纪伯伦 </h4> 
                <h4>今天太宝贵，不应该为酸苦的忧虑和辛涩的悔恨所消蚀。把下巴抬高，使思想焕发出光彩，像春阳下跳跃的山泉。抓住今天，它不再回来—— 卡耐基 
                时间，你不开拓它，它就悄悄长出青苔，爬上你生命的庭院，把你一生掩埋—— 佚名</h4></p>
</body>
</html>

技术图片

4.4 文本格式化标签

在网页中，有时需要为文字设置粗体，斜体或者下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

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

语义	标签	说明
加粗	<strong></strong>或者<b></b>	更推荐使用<strong>标签加粗，其语义更强烈
倾斜	<em></em>或者<i></i>	更推荐用<em>标签，其语义更强烈
删除线	<del></del>或者<s></s>	等推荐使用<del>标签，其语义更强烈
下划线	<ins></ins>或者<u></u>	更推荐使用<ins>，其语义更强烈

?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Long Time No See</title>
</head>
<body>
    我的功能是使字体<strong>加粗</strong><br/>
    我的功能也是使字体 <b>加粗</b>
   <br/>
   <h1>使字体变<em>倾斜</em></h1>
   <h1>也可以变<I>倾斜</I>哦</h1>
   <P>
      <h1> 你<del>删除</del>我的联系方式吧！</h1>
    <h1>我两天后<s>删除</s>吧！</h1>
   </P>
  <h2>重要的就画<ins>下划线</ins></h2> 
  <h2>重要的就画<u>下划线</u></h2> 
</body>
</html>

技术图片

4.5 <div>和<span>标签

<div>和<span>是没有语义的，他们就是一个盒子，用来装内容的。
    
    <div>这是头部</div>
    <span>你好呀</span>

div是diversion的缩写，表示分割，分区。span意为跨度，跨距。

特点：

1.<div>标签用来布局，但一行只能放一个<div>,这相当于一个大盒子。

2.<span>标签用来布局，一行可以放置多个span.。其相当于一个小盒子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>未来你好呀</div>
    <div>现在的你还好吗？</div>
    <span>数据结构</span>
    <span>Mysql</span>
    <span>java</span>
    
</body>
</html>

技术图片

div独占一行，而在一行可以显示多个span

4.6 图像标签和路径

1.图像标签

在HTML标签中，<img>标签用于定义HTML页面中的图像

<img src="图像URL"/>

单词img为image的缩写，意为图像。

src 是<img>标签的必然属性，它用于指定图像文件的路径和文件名。

所谓属性：简单理解是就是属于图像标签的特性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图像标签</title>
</head>
<body>
   <h1> <div>未来你好呀</div></h1> 
    <div>现在的你还好吗？</div>
    <p>时间如流水吧一去不复还，以后的你会想念现在的我吗？</p>
    <img src="刘亦菲.jpg"/>
</body>
</html>

图片要保存在与当前网页所在的同一个文件夹下。

技术图片

图像标签的其他属性

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本，图片不能显示时，提示的文字
title	文本	提示文本，鼠标放在图片上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图像标签</title>
</head>
<body>
   <h1> <div>未来你好呀</div></h1> 
    <div>现在的你还好吗？</div>
    <p>时间如流水吧一去不复还，以后的你会想念现在的我吗？</p>
    <p>alt 当图片出问题时，显示所写的注释</p>
    <p>title 鼠标悬浮在图片上时，显示注释</p>
    <p>width 调节图片的像素，虽然说图片的宽和高都可以调节，
        为避免图片过分扭曲，更改其中的一个，另一个则会按照相应的比例变小的</p>
    <p>border 给图片加一个边框</p>
    <img src="刘亦菲.jpg" alt="这是刘亦菲的图片" title="刘亦菲" 
    width=300 border=‘16‘/>
</body>
</html>

技术图片

注意：

1.图像标签可以有多个属性，必须写在标签名的后面。

2.图像的个属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开。

3.属性采取键值对的格式，即key="value"的格式，属性=“属性值”。alt(属性)=“注释”(属性值)。

4.在图像的标签属性中，src 这个属性必须要写。

5.图像标签中，alt（替换文本）与title（提示文本）的区别：alt是指图片故障，或者图片格式，图片名发生改变后（与HTML文档中的不一致）等故障后，才会显示。而title指的是当人们不知道这个图片是谁时，把鼠标悬浮在图片上会提示的文字。

2.路径（前期铺垫知识）

实际工作中，我们的文件不能随便乱放，否则再用的过程中很难找到它们，因此我们需要建一个文件夹来管理它们。

目录文件夹：就是普通的文件夹，但是里面存放了我们制作网页的相关材料，比如html文件，图片等。

根目录：打开文件夹的第一层就是根目录。

为方便图片的管理我们可以在目录文件夹**下面再创建一个文件叫做imgs,用来存放所有的图片。

路径：在页面的中的图片会非常多，通常我们会新建一个文件夹来存放这些图片文件（imgs），这时再查找图像，就需要采用路径的方式来指定文件的位置。

路径可以分为：相对路径与绝对路径

相对路径：这里简单来说，图片相对于html页面的位置

相对路径分类	符号	说明
1.同一级路径		图像文件与HTML文档位于同一级
2.下一级路径	/	图片文件位于HTML文件的下一级如
3.上一级路径	../	图片文件位于HTML文件的上一级如

举例说明：1. 技术图片

2. 技术图片

3. 技术图片

我们的HTML文档刘亦菲.html位于HTML文档下面，而图片始于HTML文档属于同一级的。此时位于HTML文档下面的

刘亦菲.html要插入图片，就要使用../,意思是使刘亦菲.html与HTML文档属于同一级，这是就可以使用图片了。

相对路径：即是图片相对于HTML页面的位置。

绝对路径：找到图片所在的位置，也就是值目录下的绝对位置，直接到达目标位置，即从盘符开始的路径。绝对路径用的较少。

技术图片

这是以第3种情况来说明的绝对路径，此时不用再写../ 否则，图片出错。

技术图片

这样写图片会出错。

4.7 超链接标签（重点）

再HTML标签中，<a>标签用于定义超链接，其作用是从一个页面跳转到另一个页面。

#### 1.链接的语法格式：

<a href="跳转目标" target="目标窗口的弹出方式">文本图像</a>

a 是单词anchor的缩写，意为：锚。

它有两个属性：

属性	作用
href	用于指定链接目标的url地址，（必须属性）当为href属性时，它就具有了超链接的功能。
target	用于指定链接页面的打开方式，其中selef为默认窗口打开，blank为在新窗口打开。

2.链接的分类：

1.外部链接：http：//+web的网址，如：百度

2.内部链接:网站内部页面之间的相互链接，直接链接内部页面的名称即可。如：刘亦菲

3.空连接：当没有确定链接的地址时，就可以使用空链接，如：空链接

4.下载链接：如果href里面的地址是一个文件或者压缩包，那么会下载这个文件。（下载链接：地址连接的是文件.exe 或者是 zip 或者是rar等压缩包形式）即当超链接里面我们写入的是压缩包的名字，当形成超链接时，如果我们点击这个链接，就会下载这个文件。

5.网页元素链接：在网页中的各种网页元素，如脚本，图像，音频，表格，视频等都可以添加链接。即把这些元素当成超链接，点击时，跳转到对应的超链接地址的网页。如：

6.锚点链接：当我们点击链接时，可以快速定义到页面中的某个位置。

#.在链接文本的href属性中，设置属性名为#名字的形式，如个人简介

#.找到目标位置标签，里面添加一个id属性=刚才的名字，如<h2 id="six">个人简介介绍</h2>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片标签</title>
</head>
<body>
    <img src="../imgs/刘亦菲.jpg" width=300 />
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>超链接</title>
</head>
<body>
    <h3>外部链接</h3>
    <a href="https://lady.vip.com/?wq=1" target="_blank">唯品会特卖</a><br>
    <a href="https://www.tmall.com/?ali_trackid=2:mm_26632258_3504122_55934697:1579326353_141_220382173&clk1=5af36f3e527aff5c419ff12d0a
    d3b6eb&upsid=5af36f3e527aff5c419ff12d0ad3b6eb" target="_self">天猫</a>
      <br>
    <h3>内部链接</h3>
    <a href="刘亦菲1.html" target="_self">刘亦菲</a>
    <h3>空链接</h3>
    <a href="#">空链接</a>
    <h3>下载链接</h3>
    <a href="../imgs/刘亦菲.rar">下载刘亦菲的图片</a>
</body>
</html>

技术图片

锚点链接：在同一个页面中实现快速定位，快速定位到读者想要浏览的地方。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>锚点链接t</title>
</head>
<body>
<h1 id="返回">刘亦菲个人资料</h1>
<a href="#信息">1.个人信息</a><br/>
<a href="#chuming">2.出名之前及其作品：</a><br/>
<a href="#作品">3.主要作品：</a><br/>
?
<br/>
<br/>
<br/>
?
?
?
<h1 id="信息">1.个人信息</h1>
    中文名：刘亦菲
    性别：女
    身高：170cm
    出生地：湖北
    出生日期：1987-08-25
    毕业院校：北京电影学院
    刘亦菲简介：
    刘亦菲，国籍：美籍华裔，职业：华语影视女演员、流行音乐歌手，1987年
    8月25日出生于湖北武汉，毕业于北京电影学院2002级表演系本科班。<br/>
<a href="#返回">返回顶部</a>
?
<h2 id="chuming">2.出名之前及其作品：</h2>
    2002年，因出演民国剧《金粉世家》踏入演艺圈；同年饰演《天龙八部》崭
    露头角。
    2004年参演武侠玄幻剧《仙剑奇侠传》获得高人气与关注度。2006年，
    因在金庸剧《神雕侠侣》中饰演小龙女再次受到广泛关注；同年，发行了首
    张国语专辑《刘亦菲》。2008年起，开始将其演艺事业的重心转向大银幕，
    并出演了好莱坞电影《功夫之王》。2011年开始，其主演的《新倩女幽魂》、
    《鸿门宴》、《四大名捕》系列等电影票房均过亿，而截止2011年底，刘亦菲
    连续七年跻身福布斯中国名人榜前列 。2014年，刘亦菲凭借历史片《铜雀台》
    女主人公灵雎一角获得第五届澳门国际电影节最佳女主角奖；同年，主演爱情片
    《露水红颜》。
2015年，主演都市爱情片《第三种爱情》，并凭借该片获得第16届华语电影传媒大奖
最受瞩目女演员；同年，在古装玄幻片《三生三世十里桃花》中饰演女主角白浅；此
外，她还主演了动作片《营救飞虎队》。2016年，其主演的文艺片《夜孔雀》入围了
第40届蒙特利尔国际电影节主竞赛单元；同年，主演青春爱情电影《原来你还在这里》
；11月，其主演的由陈国富监制的奇幻片《一代妖精》正式杀青。<br/>
<a href="#返回">返回顶部</a>
?
<h2 id="作品">3.主要作品：</h2>
刘亦菲演过的电视剧 南烟斋笔录 花开上海滩 好一朵茉莉花 神雕侠侣 黄晓明版 
阿宝的故事 仙剑奇侠传1 豆蔻年华 天龙八部 金粉世家 刘亦菲演过的电影 原来
你还在这里 三生三世十里桃花 二代妖精 二代妖精之今生有幸 营救飞虎队 一代
妖精 烽火芳菲 无神 重力反转 三生三世十里桃花2<br/>
<a href="#返回">返回顶部</a>
</body>
</html>

5. HTML中的注释和特殊字符：

#### 5.1注释

如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在网页中的文字，此时就可以使用注释标签。

HTML中的注释以“"结束。

添加注释是为了更好的解释代码的功能，便于相关人员理解和阅读代码，程序是不会执行注释内容的。

<!-- 注释标签你好呀！ -->

可以使用快捷键：CTRL+/ 便可快速打出注释标签。再点击一次，则注释撤销。

5.2特殊字符

空格：&nbsp ;(分号紧跟后面的，为了能看见，我就这样写)

小于号 < &lt ;(分号紧跟后面的；lt 是less than的缩写)

大于号 > &gt ;(分号紧跟后面的;gt是great than的缩写)

了解这几个即可，其余的当要用的时候，查阅即可。

<body>
    &nbsp;&nbsp;&nbsp;&nbsp;今年怎么还没有下雪呀，在全面实现小康社会的这一年，作为中国特色社会主义新世代的新青年的我们，将会以蓬勃的朝气来迎接 &nbsp;&nbsp;&nbsp;&nbsp;接下来的每一个挑战。
</body>

技术图片

在这之前我们所编写的所有关于文字的编辑，段首均没有空两格，在这里我们可以使用&nbsp来打空格，后面必须要打上分号; 每写一个&nbsp；就代表一个空格。

HTML基本标签（上）

标签：窗口知识文本格式没有注意福布斯上海滩目录文件去哪儿

原文地址：https://www.cnblogs.com/GZ1215-228513-Chichy/p/12231376.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

HTML基本标签（上）

HTML基本标签结构

目标：

目录：

1.HTML语法规范

1.1基本语法概述

1.2 标签关系

2.HTML 基本结构标签

2.1 第一个HTML 网页

title

body

3.网页开发工具

VS Code 工具生成骨架标签新增代码

3.1文档类型声明标签

3.2 Lang 语言种类

3.3字符集

注意：

3.4总结：

4.HTML 常用标签

4.1 标签语义

4.2 标题标签 h1-h6

4.3 段落标签和换行标签

无论你在HTML文档中打多少个空格，都会被忽略，最终对文档的显示没有影响，你想把文章分为几个段落，就写几个<P></p>标签。

换行标签

4.4 文本格式化标签

4.5 <div>和<span>标签

div独占一行，而在一行可以显示多个span

4.6 图像标签和路径

1.图像标签

图片要保存在与当前网页所在的同一个文件夹下。

图像标签的其他属性

注意：

2.路径（前期铺垫知识）

4.7 超链接标签（重点）

2.链接的分类：

锚点链接：在同一个页面中实现快速定位，快速定位到读者想要浏览的地方。

5. HTML中的注释和特殊字符：

可以使用快捷键：CTRL+/ 便可快速打出注释标签。再点击一次，则注释撤销。

5.2特殊字符