本章主要介绍前端设计中html页面设计
先对网页与网站、浏览器以及web标准的概念做个简单介绍：
网站：在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页：网站中的一页，通常是HTML格式，使用浏览器来阅读。常见以.htm或者.html后缀结尾，故也称为HTML文件。网页是构成网站的基本元素。
常用浏览器：IE、Firefox、Chrome、Safar和Opera等
浏览器内核主要负责了网页内容的读取、整理讯息、计算网页的显示方式并显示页面。
web标准：是由w3c组织和其他标准化组织制定的一系列标准集合。
web标准由结构（HTML）、表现（CSS）、行为（JavaScript）构成。其中最为重要的就是结构（HTML）的编写。
一、HTML（超文本标记语言--用来制作网页的一种语言）
HTML不是一种编程语言，而是一种标记语言。
所谓超文本：
1、超越了文本限制（可以加入图片、声音、多媒体等）。
2、超级链接文本（可以从一个文件跳转到另一个文件）。
标记语言是一套标记标签。
- 基本结构标签：每一个网页都会有一个基本的结构标签（也称为骨架标签）。页面内容在这些标签上书写。（可以使用开发工具VScode或者使用记事本来编写代码）
<html></html>HTML标签
<head></head>文档头部
<title></title>页面标题
<body></body>文档主题
例如：
<html>
<head>
<title>页面设计1</title>
</head>
<body>
前端设计
</body>
</html>
- 对于基本骨架的解释：（在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版本。
（2）lang用来定义当前文档显示的语言：en表示是一个英文网页、zh-CN表示是一个中文网页。但是文档内部使用的语言不受影响。就是说你可以在显示为英文网页的基础上在页面的body部分编写中文文档后，显示结果不受影响。
（3）charset字符集：是多个在字符的集合，以便计算机能够识别和存储各种文字。
在HTML代码编写中，使用<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
代码中使用的是：UTF-8，这是万国码，基本包含了全世界所有国家需要用到的字符。不写可能会造成乱码。
- HTML常用标签解释（会在文档最后附上一些常用标签的合集）
标题标签<h1>-<h6>：可作为标题使用，并且依据重要性依次递减（其中<h1></h1>标题显示的字体最大，<h6></h6>标题显示的字体最小）。
段落和换行标签：<p></p>标签用于定义段落，可以将整个网页分为若干个段落。
<br/>表示换行标签，是一个单标签。作用是可以强制换行。
使用了换行标签与段落标签后，显示页面上有所不同。使用了段落标签后，段落之间会有一些垂直距离，而换行标签则没有。
文本格式化标签：为了突出文档中某些文字的重要性，比普通文字更重要。下面是对于文本进行操作的一些标签。（其中加粗与倾斜较为常用）
加粗：<strong></strong>或者<b></b>
倾斜：<em></em>或者<i></i>
删除线：<del></del>或者<s></s>
下划线：<ins></ins>或者<u></u>
分块标签<div>和<span>标签：是没有语义的，就是一个盒子，用来装内容的。
<div>标签用来布局，一行只能放一个（div可译为分割、分区的意思）。而<span>标签一行可以放置多个<span>（span可译为跨度、跨距的意思）。
图像标签：（这是一个单标签）
<img src = "图像URL" />,其中src是使用图像标签必须包括的一个属性，用于指定图像文件的路径和文件名。
其他属性：
| alt | 文本 | 替换文本，当图像显示不出来时，显示的文本信息 |
| title | 文本 | 提示文本，鼠标放在图像上时显示出来的文字 |
| width | 像素 | 设置图片显示的宽度 |
| height | 像素 | 设置图片显示的高度 |
| border | 像素 | 设置边框粗细 |
其中当更改图片中width、height属性时，只用更改一个，显示时会自动调好图片大小。
图片中的路径问题：需要采用路径方式来指定图像文件的位置。（相对路径和绝对路径）
相对路径：以引用文件所在位置为参考，而建立的目录路径。
绝对路径：是指目录下的绝对位置，通常是指盘符开始的路径或者是完整的网络地址。
超链接标签：<a>标签，能实现从一个页面链接到另一个页面。
语法格式：<a href = "跳转目标" target = "目标窗口的弹出方式">文本或图像</a>
对各属性的解释：href--用于指定链接目标的url地址。
target--用于指定页面的打开方式。（默认：_self(不写出时，默认为_self在当前窗口打开)打开新窗口：_blank（当要打开新窗口时，使用））。
链接可分为以下6种：
注释和特殊字符：
使用<!--注释-->(ctrl+/)
特殊字符：空格： <：< >：> &：&（这几个较为常用，其他使用时上网百度即可）。
常用标签：
| 标题标签<h1></h1>...<h6></h6> | 作为标题使用，依据重要性递减 |
| 段落标签<p></p> | 可将整个网页分为若干段落 |
| 换行标签<br/> | 强制换行 |
| 图像标签<img src = "图像URL" /> | 用于插入图像 |
| 链接标签<a href = "跳转目标" target = "目标窗口弹出方式">文本或图像</a> | 实现页面的跳转 |
| <div></div>和<span></span>标签 | 页面分块，布局 |
HTML中表单写于下一个博客，未完。
8227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
