博客

HTML学习6~29（HTML语法规范）

  • Post author:
  • Post category:其他

1 HTML语法规范

1.1 基本语法概述

  1. HTML标签是由尖括号包围的关键词,例如<html>。
  2. HTML 标签通常是成对出现的,例如<html>和</html> , 称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。
  3. 有些特殊的标签必须是单个标签 (极少情况),例如<br/> , 称为单标签。

1.2 标签关系

双标签关系可以分为两类：包含关系和并列关系
eg:head与title就是包含关系

<head>
    <title></title>
</head>

eg: head与body就是并列关系

<head></head>
<body></body>

2 HTML基本结构标签

2.1 第一个HTML网页

每个网页都会有一个基本的结构标签 (也称为骨架标签) , 页面内容也是在这些基本标签上书写。

HTML页面也称为HTML文档.

在这里插入图片描述

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

eg:

<html>
   <head>
	   <title> 第一个页面 </title>
   </head>
   <body>
     键盘敲烂，工资过万
   </body>
</html>

2.2 基本结构标签总结

在这里插入图片描述

3 网页开发工具

VSCode的使用

  1. 双击打开软件。
  2. 新建文件(Ctrl+N )。
  3. 保存(Ctrl + S ),注意移动要保存为.html文件
  4. Ctrl + 加号键, Ctrl + 减号键可以放大缩小视图
  5. 生成页面骨架结构。输入!按下Tab键。
  6. 利用插件在浏览器中预览页面:单击鼠标右键,在弹出出口中点击”Open In Default Browser”。

3.1 文档类型声明标签

文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页。

<!DOCTYPE html>

这句代码的意思是:当前页面采取的是HTML5版本来显示网页.

注意：

  1. 声明位于文档中的最前面的位置,处于\标签之前。
  2. 不是一个HTML标签,它就是文档类型声明标签。

3.2 lang语言种类

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

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

简单来说定义为en就是英文网页，定义为zh-CN就是中文网页。

对于文档显示来说,定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文。

这个属性对浏览器和搜索引擎(百度谷歌等)还是有作用的。

3.3 字符集

字符集(Characterset)是多个字符的集合。以便计算机能够识别和存储各种文字。

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

<meta charset=“UTF-8” />

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

注意:上面语法是必须要写的代码,否则可能引起乱码的情况。一般情况下,统一使用”UTF-8″ 编码,尽量统一写成标准的”UTF-8″,不要写成”utf8″ 或”UTF8″。

4. HTML常用标签

4.1 标签语义

指标签的含义，即这个标签是用来干嘛的

4.2 标题标签<h1> – <h6>

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

h是单词head的缩写，意为头部、标题。

标签语义:作为标题使用，并且依据重要性递减。

特点:

  1. 加了标题的文字会变的加粗,字号也会依次变大。
  2. 一个标题独占一行。

eg:

<!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>
    <h1>标题一共六级选，</h1>
    <h2>文字加粗一行显。</h2>
    <h3>从大到小依此减，</h3>
    <h4>从重到轻随之变。</h4>
    <h5>语法规范书写后，</h5>
    <h6>具体效果刷新见。</h6>
</body>
</html>

4.3 段落和换行标签(重要)

4.3.1 段落标签

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

<p>我是一个段落标签</p>

是单词paragraph的缩写,为段落。

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

特点:

  1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
  2. 段落和段落之间保有空隙。

4.3.2 换行标签

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

是单词break的缩写, 为打断、换行。

标签语义:强制换行。

特点:

  1. <br/>是个单标签。
  2. <br/>标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距。

eg:

<!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>
    <p>电影网讯 当地时间9月3日，<br />
        电影《园艺大师》在第79届威尼斯电影节首映，导演保罗·施拉德获颁终身成就金狮奖。现场，他的老友兼老搭档马丁·斯科赛斯发来了视频表达了祝福，“在过去的50年间，我对这位艺术家的尊重，随着他每拍一部电影而增加。保罗曾在最差劣的条件下工作，亦拍过任何预算水平的电影……作为一名艺术家，他从没停止成长。他是所有年青新导演的楷模——当你感到失意的时候，看看保罗如何熬过来且继续向前。”</p>
    <p>此次，保罗·施拉德携自己的新作《园艺大师》亮相本届威尼斯电影节，影片讲述园艺师（乔尔·埃哲顿 饰）照料一座美丽庄园。富有的雇主（西格妮·韦弗 饰）又提新要求，让园艺师照顾她的侄女。在此过程中，尘封已久的秘密被揭开。本片已入围第79届威尼斯电影节非竞赛单元。</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>体育新闻</title>
</head>
<body>
    <h1>76人球员更衣室通道被群殴？土耳其篮协：拿不到监控录像就退出欧锦赛</h1>
    <h4>数据统计</h4>
    <p>今日欧锦赛小组赛，土耳其男篮83比88双加时不敌格鲁吉亚。比赛中，为土耳其男篮征战的76人球员科尔克马兹与格鲁吉亚球员发生冲突，场面一度非常混乱……</p>
    <p>在比赛还剩下4分48秒的时候，科尔克马兹左侧突破到篮下，被格鲁吉亚球员萨那泽犯规。就在所有人都等待着科尔克马兹走上罚球线执行罚球的时候，他与萨那泽发生了冲突。当值主裁判和双方队友将他们二人拉开，科尔克马兹和萨那泽都没能逃过被驱逐的命运。本以为，这场事端就将这样被平息。然而，更衣室通道里面却发生了更为令人意想不到的事情。</p>
    <h4>科尔克马兹与对手发生冲突</h4>
    <p>土耳其篮协副主席奥马尔-奥南表示：“当科尔克马兹和我们的训练师走在前往更衣室的走廊时，未在激活名单上的格鲁吉亚球员、被驱逐的那个球员（萨那泽）以及保安一起袭击了他。进入更衣室的球员不应该遭到攻击。我们已经正式告知国际篮联，不要让任何人以为我们是愚蠢的，他们必须给我们那个走廊上的监控录像，不能有任何遗漏。如果我们拿不到这些录像，我们将退出比赛。”  </p>
    <p>土耳其队主帅阿塔曼在第二个加时也被驱逐出场，助教德米尔在出席新闻发布会时说：“今天，格鲁吉亚球员和过道里的一些保安不尊重我们，我们来这里是为了打篮球，不是为了其他。所以，一切都应该留在球场上，但不幸的是，一个大丑闻发生在球场外，这样的事情违背了体育精神。这本该是一场篮球比赛，但遗憾的是，发生的不仅仅是篮球。我们在格鲁吉亚还有两场比赛，我们期待的是更绅士的待遇，但不幸的是它没有发生。”</p>
    <p>丫丫<br />
        2022-9-5</p>
</body>
</html>

效果如下图：
在这里插入图片描述

4.4 文本格式化标签

为文字设置粗体，斜体，下划线，删除线等效果

这里都推荐用第一组

重点记住加粗和倾斜

<!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>
    我是<strong>加粗</strong>的文字
    我是<b>加粗</b>的文字
    我是<em>倾斜</em>的文字
    我是<i>倾斜</i>的文字
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下划线</ins>
    我是<u>下划线</u>
</body>
</html>

4.5 <div> 和 <span> 标签

<div> 和<span>是没有语义的，它们就是一个盒子，用来装内容的

特点：

  1. < div >标签用来布局，但是现在一行只能放一个< div > 大盒子
  2. < span>标签用来布局，一行上可以多个< span> 小盒子
<!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>div和span标签</title>
</head>
<body>
    <div>我是一个div标签我一个人单独占一行</div>
    <div>我是一个div标签我一个人单独占一行</div>
    <span>百度</span>
    <span>新浪</span>
    <span>搜狐</span>
</body>
</html>

4.6 图像标签和路径（重点）

4.6.1 图像标签

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

<img src=“图像URL” />

src是<img>标签的必须属性，它用于这个图像标签的特性。

图像标签的其他属性：
在这里插入图片描述

eg:

<!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>
    <h4>图像标签的使用：</h4>
    <img src="img.jpg" />
    <h4> alt 替换文本 图像显示不出来的时候用文字替换：</h4>
    <img src="img.jpg" alt="我是丫丫"/>
    <h4> title 提示文本 鼠标放到图像上，提示的文字：</h4>
    <img src="img.jpg" alt="我是丫丫" title="我是罗某思密达"/>
    <h4> width 给图像设定宽度：</h4>
    <img src="img.jpg" alt="我是丫丫" title="我是罗某思密达" width="500"/>
    <h4> height 给图像设定高度</h4>
    <img src="img.jpg" alt="我是丫丫" title="我是罗某思密达" height="100"/>
    <h4> height 给图像设定高度</h4>
    <img src="img.jpg" alt="我是丫丫" title="我是罗某思密达" width="500" border="15"/>
</body>
</html>

图像标签注意点：

  • 图像标签可以拥有多个属性，必须写在标签名的后面。
  • 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
  • 属性采取键值对的格式，即key=”value”的格式，属性=“属性值”。

4.6.2 路径

  1. 目录文件夹和根目录：
  • 目录文件夹：就是普通文件夹，存放我们做页面所需要的相关素材，比如html文件、图片等。
  • 根目录：打开目录文件夹的第一层就是根目录。
  1. VSCode打开目录文件夹
  • 文件—–打开文件夹，选择目录文件夹，后期非常方便管理文件。

路径可分为：

  1. 相对路径

以引用文件所在位置为参考基础，而建立出的目录路径。简单来说，图片相对于HTML页面的位置

在这里插入图片描述

  1. 绝对路径

目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
例如：“D:\前端\HTML&CSS\day1\案例\img.jpg”或完整的网络地址”http://www.itcast.cn/images/logo.gif”

4.7 超链接标签（重点）

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

  1. 链接的语法格式

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

在这里插入图片描述

  1. 链接分类

  • 外部链接

    例如<a href=“http://www.baidu.com”>百度

  • 内部链接

    网站内部页面之间的相互链接，直接链接内部页面名称即可，例如<a href=“index.html”>首页</a>

  • 空链接

    如果当时没有确定链接目标时，<a href=“#”>首页</a >

  • 下载链接

    如果href里面地址是一个文件或者压缩包，会下载这个文件

  • 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接

eg:

<!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>
    <h4>1.外部链接</h4>
    <a href="http://www.qq.com" target="_blank">腾讯</a>
    target 打开窗口的方式 默认值是_self 当前窗口打开页面 _blank 新窗口打开页面
    <a href="http://www.itcast.cn" target="_blank">传智播客</a>
    <h4>2.内部链接：网站内部页面之间的相互链接</h4>
    <a href="公司简介.html" target="_blank">公司简介</a>
    <h4>3.空链接：#</h4>
    <a href="#" target="_blank">公司地址</a>
    <h4>4.下载链接：地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
    <a href="img.rar">下载文件</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="img.jpg" /></a>
</body>
</html>
  • 锚点链接：点击链接，可以快速定位到页面中的某个位置

在链接文本的href属性中，设置属性值为#名字的形式，如<a href=“#two” 第二集</a>

找到目标位置标签，里面添加一个id属性=刚才的名字，如：<h3 id=“two”>第二集介绍</h3>

eg:

<!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>
   <h2 id="dingbu">目录</h2>
   演艺经历<br />
   <a href="#live">早年经历</a><br />
   <h3>演艺经历</h3>
   港剧时代
1981年，刘德华考进第10期无线电视艺员训练班；同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙；该剧获得美国电视节电视剧特别奖 [18]  。
刘德华电视剧剧照
刘德华电视剧剧照(11张)
1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB [19]  ；同年在喜剧《花艇小英雄》中饰演败家仔钱日添；12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注 [20]  。
1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过 [21]  ；该剧在香港播出后取得62点的收视纪录；同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将” [22]  。
......
   <h3 id="live">早年经历</h3>
   刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [14]  。1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [15]  。刘德华从黄大仙天主教小学毕业后升读可立中学 [16]  。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路 [17]  。
   <a href="#dingbu">返回顶部</a>
</body>
</html>

5 HTML中的注释和特殊字符

5.1 注释

在HTNL文档中添加便于阅读和理解但又不需要显示在页面中的注释文字

HTNL中的注释以“<!–”开头，以“–>”结束

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

5.2 特殊字符

在这里插入图片描述

<!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>
    <!-- 我想喝手磨咖啡 -->
    讲&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;究
    <!-- <p>是一个段落标签 -->
        &lt; p &gt;是一个段落标签
</body>
</html>

综合案例:圣诞节的那些事

demo.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>
    1.圣诞节是怎样由来的<br />
    2.<a href="#oldman">圣诞老人的由来</a><br />
    3.<a href="#tree">圣诞树的由来</a><br />
    <h2>圣诞节是怎样由来的</h2>

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

    <h2 id="oldman">圣诞老人的由来</h2>
    <p>圣诞节当然少不了<a href="oldman.html" target="_blank">圣诞老人</a>，根据圣经记载，书中并没有提起这一号人物。到底他是如何成为圣诞的主角之一呢？</p>

    <img src="images/2.jpg" width="200">
    <p>相传在一千六百多年前，荷兰巴里地方有一个老人，名叫尼古拉斯，他一生最爱帮助贫穷的人家。其中有一次他帮助三个贫穷的少女，送她们三袋金子以逃过被卖的不幸。</p>

    <p>到了一八二二年，由荷兰传教士把这位伟大慈善家的故事传到美国，装扮圣诞老人渐渐地流行于世界各国。根据调查，以上故事还有下文；当尼古拉斯偷偷把其中一袋金子送给其中一名女子时，他把金子从其中一个窗户扔进去，恰好掉进晾在壁炉上的一只长袜中。于是，将礼物放在圣诞袜子的送礼方法便传到至今。</p>
    <p>在平安夜里，孩子总会把一双双色彩缤纷的袜子挂在床头，然后在袜子旁边放杯热牛奶让圣诞老人喝，以让劳苦功高的圣诞老人解渴，并送份大礼给自己。</p>
    <img src="images/3.jpg" alt="" width="200">
    <h2 id="tree">圣诞树的由来</h2>
    <p>圣诞一直是庆祝圣诞节不可少的装饰物，如果家中没有圣诞树，就大大减少了过节气氛。关于圣诞树的来源有多种不同的传说。</p>
    <p>其中一个是说：大约在十六世纪，圣诞树最先出现在德国，德国人把长青的松柏枝拿到屋中去摆设，将之成为圣诞树。后来，由德国人马丁路德把蜡烛放在树林中的枞树枝，然后点燃蜡烛，使它看起来像是引导人们到伯利恒去。而近今日，人们已经改用粉色的小灯泡了。</p>
    <p>另一个传说记载。在很久以前，曾有一位农民，在圣诞节那天遇到一个穷苦小孩，他热情地接待了这个儿童。儿童临走时折下一根松枝插在地上，松枝立即变成一棵树，上面都挂满礼物，以答谢农民的好意。</p>
    <p>圣诞树真正出现在圣诞节时，首先见于德国，之后又传入欧洲和美国，并以其优美的姿态，成为圣诞节不可缺少的装饰。圣诞树的种类繁多，有天然松柏圣诞树、也有人造圣诞树及白色圣诞树。
        每棵圣诞树上都挂满琳琅满目的装饰品，但每棵树的顶端必定有个特大的星星，象征三博士跟随该星而找到耶稣，而且也只有该家庭的一家之主可以把这棵希望之星挂上。
        更多内容可以百度一下</p>

    <img src="images/4.jpg" width="200">

    <p>更多内容可以 <a href="http://www.baidu.com" target="_blank">百度一下</a> </p>
</body>
</html>

oldman.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/5.jpg" width="400">
</body>
</html>
版权声明：本文为m0_57809042原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。