一、网页
- 网页
网站是指在网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页合集。 - 网页是网站中的——“页”，通常是HTML格式的文件，它要通过浏览器来阅读。
- 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。
二、HTML
HTML是超文本标记语言，是一种用于创建网页的标准标记语言。HTML运行在浏览器上，由浏览器来解析。
HTML不是一种编程语言，而是一种标记语言
标记语言是一套标记标签。HTML使用标记标签来描述网页。
HTML文档也叫web页面
三、Web标准
Web标准是由W3C组织和企业标准化组织制定的一系列标准的集合。
Web标准主要包括结构、表现、行为。
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学的是HTML |
| 表现 | 表现用于设置网页元素的板式、颜色、大小等外观形式，主要指的是CSS |
| 行为 | 行为是指用网页模型的定义及交互的编写，现阶段主要学的是Javascript |
四、HTML标签
4.1 HTML语法规范
- HTML标签是由尖括号包围的关键词，<html>
- HTML标签通常是成对出现的，<html>和</html>，我们称为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。
- 有些特殊的标签必须是单个标签(极少情况)，例如<br />,我们称为单标签。
4.2 标签关系
双标签关系可以分为两类：包含关系和并列关系。
4.3 HTML基本结构标签
每个网页都会有一个基本的结构标签(也成为骨架标签)，页面内容也是在这些基本标签上书写的。
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，我们称为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中，我们必须要设置的标签是title |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
<html>
<head>
<title>小石的第一个页面</title>
</head>
<body>
键盘敲烂，工资过万
</body>
<html>
五. 网页开发工具
5.1 文档类型声明标签
<!DOCTYPE>文档类型声明，作用是告诉浏览器使用的那种HTML版本来显示。
==<！DOCTYPE html>==这句代码的意思是：当前页面采取的是HTML5版本来显示网页。需要注意的是：
- <!DOCTYPE>声明位于文档中的最前面的位置，处于标签之前
- <!DOCTYPE>不是一个HTML标签，他就是文档类型声明标签。
5.2 lang语言种类
用来定义当前文档显示的语言。
- en定义语言为英语
- zh-CN定义语言为中文
但是其实对于文档显示来说，定义成en的文档也可以显示中文，反之亦然。
5.3 字符集
字符集是多个字符的集合。以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码。
<meta charset=“UTF-8”>
万国码，采取UTF-8来保存文字。如果不写就会出现乱码情况。
六. HTML常用标签
6.1 标签语义
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
6.2 标题标签
<h1>~<h6>
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题。
<h1>这是一级标题</h1>
单词head的缩写，意味头部、标题
标签语义：作为标题使用，并且依据重要性递减。
特点：
- 为了标题的文集会变的加粗，字号也会依次变大。
- 一个标题独占一行。
6.3段落和换行标签
段落标签
<p></p>
标签语义：可以把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>
<p>按照《中华人民共和国食品卫生法》第54条和《食品添加剂卫生管理办法》第28条，以及《食品营养强化剂卫生管理办法》第2条和《中华人民共和国食品安全法》第九十九条，中国对食品添加剂定义为：食品添加剂，指为改善食品品质和色、香和味以及为防腐、保鲜和加工工艺的需要而加入食品中的人工合成或者天然物质。</p>
<p>按照GB2760-2011《食品安全国家标准 食品添加剂使用标准》 [2] ，对食品添加剂定义为“为改善食品品质和色、香、味，以及为防腐、保鲜和加工工艺的需要而加入食品中的人工合成或者天然物质。营养强化剂、食品用香料、胶基糖果中基础剂物质、食品工业用加工助剂也包括在内。”</p>
</body>
</html>
换行标签
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才会自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br />
<br />
单词break 的缩写，意味打断、换行。
标签语义：强制换行
特点：
- 单标签。
- <br />标签只是简单的开始新的一行，和段落不一样，段落之间会插入一些垂直的间距。
<!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>
<p>按照《中华人民共和国食品卫生法》第54条和《食品添加剂卫生管理办法》第28条，<br />以及《食品营养强化剂卫生管理办法》第2条和《中华人民共和国食品安全法》第九十九条，中国对食品添加剂定义为：食品添加剂，指为改善食品品质和色、香和味以及为防腐、保鲜和加工工艺的需要而加入食品中的人工合成或者天然物质。</p>
<p>按照GB2760-2011《食品安全国家标准 食品添加剂使用标准》 [2] ，对食品添加剂定义为“为改善食品品质和色、香、味，以及为防腐、保鲜和加工工艺的需要而加入食品中的人工合成或者天然物质。营养强化剂、食品用香料、胶基糖果中基础剂物质、食品工业用加工助剂也包括在内。”</p>
</body>
</html>
6.4 文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者<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">
<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>
<p><strong>加粗</strong>效果</p>
<p><em>倾斜</em>效果</p>
<p><del>删除线</del>效果</p>
<p><ins>下划线</ins>效果</p>
</body>
</html>
6.5 没有意义标签
<div>和<span>标签都是用来布局的。
<div>和<span>标签是没有语义的，它们就是一个盒子，用来装内容的。
div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点：
- <div>标签用来布局，但是一行只能放一个<div>。大盒子
- <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>Document</title>
</head>
<body>
<div>大盒子</div>
<span>小盒子one</span>
<span>小盒子two</span>
</body>
</html>
6.6 图像标签和路径
图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像。
<img src="图片名">
src是<img>标签的必须属性，它用于制定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
图像标签的其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图形的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
<!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>
<h4>图像标签的使用：<br /></h4>
<img src = "img.jpg"/>
<h4>alt的使用：<br /></h4>
<img src = "img.jpg" alt="刘德华"/>
<h4>title的使用：<br /></h4>
<img src = "img.jpg" alt="刘德华" title="刘德华"/>
</body>
</html>
图像标签的注意事项
- 图像标签可以拥有多个属性，必须卸载标签名的后面。
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
- 属性采取键值对的格式。key=“value”
六. 超链接标签
在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面
6.1 链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
两个属性的作用如下：
| 属性 | 作用 |
|---|---|
| href | 用于制定链接目标的url地址，（必须属性）当为标签应用herf属性时，它就具有了超链接的功能。 |
| target | 用于制定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式 |
<!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>
<h4>链接的用法：</h4>
<a href="http://www.baidu.com" target="_self" > 百度一下，你就知道 </a>
</body>
</html>
6.2 链接的分类
- 外部链接：例如<a href=“http://www.baidu.com”>百度
- 内部链接：网站内部页面之间的相互链接。直接链接内部页面名称。<a href=“index.html”>
- 空链接：如果当时没有确定链接目标时，<a href="#">
- 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
- 网页元素链接：在网页中的各种元素，如文本、图像、表格、音频、视频等都可以添加超链接。
- 锚点链接：点击链接，可以快速定位到页面中的某个位置
在链接文本的herf属性中，设置属性为==#名字==的形式，如<a href="#one">our live</a>
找到目标位置标签，里面添加一个id属性，<h3 id=“one”>our live</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>Document</title>
</head>
<body>
<h4>链接的用法：</h4>
<a href="http://www.baidu.com" > <img src="img.jpg"> </a>
</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>Document</title>
</head>
<body>
<h4 id="return"></h4>
<a href="#baocang">1.食品保藏</a><br />
<a href="#diwen"> 1.食品低温保藏</a><br />
<a href="#gancang">1.食品干藏</a><br />
<h4 id="baocang">1.食品保藏</h4>
<p>食品保存的原理主要可分为两大部分，分别为减缓微生物滋长与食品本身劣变。微生物滋长为食品败坏的重要原因，影响食品败坏速度有几个主要因素。若刚开始食品中的微生物数量低，微生物要能长到足以影响食品品质的时间就会较长，例如罐头经过灭菌后，内部的微生物基本上被杀灭，所以不需要额外使用其他添加物，保存期就蛮长。腌过，例如牛肉干。</p>
<h4 id="diwen">2.食品低温保藏</h4>
<p>食品的低温保藏，即降低食品温度，并维持低温水平或冻结状态，以延缓或阻止食品的腐败变质，达到食品的远途运输和短期或长期贮藏的目的的保藏方法。食品在低温下不易变质之原因主要有三： 在低温下可抑制微生物之生长和繁殖。 。</p>
<h4 id="gancang">3. 食品干藏</h4>
<p>食品干藏是指将食品的水分降低至足以使食品能在常温下长期保存而不发生腐败变质的水平，并保持这一低水平的食品保藏过程。这种利用自然条件或在人工控制的条件下将食品干燥到不易腐败变质的程度来加以保藏的食品保藏方法历史悠久，应用最广。</p> <a href="#return">返回顶部</a>
</body>
</html>
七. 注释和特殊字符
注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示咋页面中毒的注释文字，就需要使用注释标签。
HTML中的注释以“<!- -”开头，以- - >结束，快捷键是：ctrl + /
特殊字符
| 字符 | 字符代码 |
|---|---|
| 空格符 |   |
| 小于号 | < |
| 大于号 | > |
扫一扫
2327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
