1. 基本知识
网站是指因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的==网页的集合==网页是网站的一页， 通常是HTML格式的文件， 它主要通过浏览器来阅读网页是网站的基本元素 green, 通常由文字、图片、视频等组成。通常我们看到的网页是以
.html或者.htm为后缀的文件，俗称为HTML文件 green网页是由
网页元素组成的，这些元素是利用html标签描述，然后通过浏览器解析来显示**
HTML**：超文本标记语言(Hyper Text Markup Language)，是用来 描述网页 的一种语言，由多种标签组成不是编程语言，而是标记语言
所谓
超文本：- 超越了文本限制，可以添加音频、图片、视频等内容
- 超链接文本，可以从一个文件跳转到另一个文件，与世界各地主机的文件相连
浏览器内核：渲染引擎 green，负责读取网页内容，整理讯息，计算网页的显示方式并显示页面**
Web标准**：是由W3C组织和其他标准组织制定的==一系列标准的集合==Web标准的构成：结构(Structure)、表现(Presentation) 和 行为(Behavior)标准 说明 结构 结构用于对网页元素进行整理和分类 表现 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS 行为 行为指网页模型的定义及交互的编写
2. HTML
所有的标签都必须包含在
< >中标签都是成对出现的，称为
双标签， 即开始标签和结束标签（"/"）1
<html> </html>
也有
单标签：1
<br />
标签关系
包含关系（父子关系）
1
2
3<head>
<title> </title>
<head>并列关系
1
2<head> </head>
<body> </body>
1. 基本结构标签
每个网页都会有一个基本的结构标签，也称为`骨架标签`| 标签名 | 定义 | 说明 |
|---|---|---|
| <html> </html> | HTML标签 | 根标签，页面中最大的标签 |
| <head></head> | 文档的头部 | 在head标签中必须要设置title |
| <title></title> | 文档的标题 | 让页面有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容 |
<!DOCTYPE>标签：文档类型声明，声明HTML版本必须写在文件第一行，声明标签—不属于HTML标签
lang语言：定义当前文档显示的语言，eg：zh-CN、en、fr
标签内，可以通过标签的charset 属性来规定 HTML文档应该使用哪种字符编码。charset字符集：在1
2
3
4
5
6<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>
2. HTML常用标签
！！！根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰！！！标题标签<h1> - <h6>
HTML提供了6个等级的网页标题，从H1 — H6。
1 | <h1>标题一共六级选，</h1> |
特点:
- 加了标题的文字会变的加粗，字号也会依次变大。
- 一个标题独占一行
段落标签和换行标签
<p> </p>：段落标签，将HTML文档分成若干段落
1 | <p> |
特点:
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落和段落之间保有空隙
\<br />：换行标签，强制换行
1 | <p> |
特点:
- <br/>是个单标签
- <br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距
文本格式化标签
突出重要性，比普通文字更重要
| 语义 | 标签 |
|---|---|
| 加粗 | **<strong></strong>**或者<b></b> |
| 倾斜 | **<em></em>**或者 <i></i> |
| 删除线 | **<del></del>**或者<s></s> |
| 下划线 | **<ins></ins>**或者<u></u> |
<div> 和 <sapn> 标签
\<div> 和 \<sapn> 标签是没有语义的，只是一个盒子，用于装内容
1 | <div>这是内容1</div> |
div – division，表示分割、分区
span 意为跨度、跨距
特点:
- <div>标签用来布局，但是现在一行只能放一个<div>。大盒子
- <span>标签用来布局，一行上可以多个<span>。小盒子
图像标签和路径
图像标签
<img>，单标签，用于定义HTML页面中的图像
1 | <img src="data/106184969_p0.jpg" alt=""> |
`` 是``标签的必备属性，用于`指定图像文件的路径和文件名`
图片标签的其他属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
- 图像标签可以拥有多个属性，必须写在标签名的后面
- 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
- 属性采取键值对的格式，即key=“value”的格式，属性=“属性值”
路径：
相对路径：相对于HTML页面的位置
相对路径分类 符号 说明 同一级路径 图像文件位于HTML文件同一级 如<img src=”baidu.gif” /> 下一级路径 / 图像文件位于HTML文件下一级 如<img src=”images/baidu.gif” />。 上一级路径 ../ 图像文件位于HTML文件上一级 如<img src=”../baidu.gif” /> 绝对路径：指目录下的绝对位置，通常是从盘符开始的路径
超链接标签
<a> 标签用于定义超链接，作用是从 一个页面链接到另一个页面
超链接的语法格式
1 | <a href="跳转目标" target="目标窗口的弹出方式" > 文本或图像</a> |
| 属性 | 作用 |
|---|---|
| href | 指定链接的url地址，必须属性，当为标签应用href属性时，就具有了超链接功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，当前窗口打开，_blank为在新窗口中打开 |
超链接的分类
外部链接：eg： <a href=”http://www.baidu.com“ target=”_blank”>1. 外部链接 – 百度 </a>内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，eg：<a href=”体育新闻.html” target=”_blank”>2. 内部链接 – 体育新闻 </a>空链接：没有确定链接目标，eg：<a href=”#” target=”_blank”>3. 空链接 – 首页</a>下载链接：如果href地址是一个文件或者压缩包（exe或者zip 等压缩包），会下载这个文件网页链接元素：在网页中的各种网页元素，如文本，图像等锚点链接：快速定位到页面中的某个位置在链接文本的
href属性中，设置属性值为 #名字的形式，eg：<a href=”#星期四”, target=”_blank”>6. 锚点链接 – 星期四</a>找到目标位置标签，里面添加一个
id属性，值为刚才的名字，eg：<p id=”星期四”>明天星期四、、</p>1
2
3
4
5
6
7
8
9
10
11
12
13
14<a href="跳转目标" target="目标窗口的弹出方式" > 文本或图像</a>
<h4>1. 外部链接</h4>
<a href="http://www.baidu.com" target="_blank">1. 外部链接 -- 百度</a>
<h4>2. 内部链接</h4>
<a href="体育新闻.html" target="_blank">2. 内部链接 -- 体育新闻 </a>
<h4>3. 空连接 # </h4>
<a href="#" target="_blank">3. 空链接 -- 首页</a>
<h4>4. 下载链接</h4>
<a href="data/106184969_p0.zip" target="_blank">4. 下载链接 -- 文件</a>
<h4>5. 网页元素链接</h4>
<a href="http://www.baidu.com" target="_blank"> <img src="data/106184969_p0.jpg" alt="图片显示错误", height="128", width="72"> </a>
<h4>6. 锚点链接</h4>
<a href="#星期四", target="_blank">6. 锚点链接 -- 星期四</a>
<p id="星期四">明天星期四</p>
3. HTML中的注释和基本字符
注释
HTML中的注释以 <!--开头，以-->结尾
特殊字符
在 HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
表格标签
表格主要用于显示、展示数据
<table> </table> 用于定义表格
<tr></tr>用于定义行，必须嵌套在<table> </table> 中
<td></td>用于定义单元格，需嵌套在<tr></tr>中
字母td指表格数据(table data)，即数据单元格的内容
表头单元格标签：<th></th>，文本加粗居中显示标签表示HTML表格的表头部分(table head 的缩写) 表格属性
通常使用CSS来设置表格属性，表格标签属性基本不常用
这些属性要写到表格标签`
表格结构标签
表格可以分为
表格头部和表格主体两大部分表格头部：<thead></thead>， 内部必须有<tr>标签
表格主体：<tbody></tbody>
合并单元格合并单元格方式
- 跨行合并，rowspan=”合并单元格的个数”
- 跨列合并，colspan=”合并单元格的个数”
目标单元格（写合并代码）
若是跨行合并，写在最上侧
若是跨列合并，写在最左侧
注意删除多余的单元格
列表标签
列表是用来布局的
根据使用情景不同，可分为
无序列表
1
2
3
4
5<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>- 无序列表的各个列表项之间没有顺序等级之分，是并列的
- <ul>之间只能嵌套<li>，不允许嵌套其他标签或者文字
- <li>之间相当于一个容器，可以嵌套任何元素
- 无序列表会带有自己的样式属性，但在使用时，通常使用CSS
有序列表
1
2
3
4
5<ol>
<li>A: 1000</li>
<li>B: 2000</li>
<li>C: 3000</li>
</ol>- <ol>之间只能嵌套<li>，不允许嵌套其他标签或者文字
- <li>之间相当于一个容器，可以嵌套任何元素
- 无序列表会带有自己的样式属性，但在使用时，通常使用CSS
自定义列表
使用场景：常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号
1
2
3
4
5
6<dl>
<dt>数字</dt>
<dd>数字1</dd>
<dd>数字2</dd>
<dd>数字3</dd>
</dl>- <dl>标签之间只能包含<dt>和<dd>
- <dt>和<dd>个数没有限制，经常一个<dt>包含多个<dd>
表单标签
表单的组成：表单域、表单控件（表单元素）、提示信息
表单域：一个包含表单元素的区域
<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把它范围内的表单元素信息提交给服务器
常用属性
属性 属性值 作用 action url地址 用于指定接收并处理表单数据的服务器程序的url地址 method get/post 用于设置表单数据的提交方式，其取值为get或者post name 名称 用于指定表单的名称，以区分一个页面中的多个表单域 表单控件（表单元素）
Input输入表单元素
<input>标签用于收集用户信息，单标签
1
<input type=" " name="" id="">
单选/复选框中的name属性要一致，才可以实现多选一/多选
name和value是每个表单元素都有的属性值，主要给后台人员使用name是表单元素的名字，要求单选按钮和复选框都要有相同的name值- 单选按钮和复选框有
checked属性，当页面打开时，默认选中这个按钮 maxlength是用户可以在表单元素输入时设置的最大字符数，一般较少使用
<label>标签
<labe>标签用于绑定一个表单元素， 当点击<label>标签内的文本时，浏览器就会自动将点(光标转到或者选择对应的表单元素上用来增加用户体验
1
2<label for="sex1">男：</label> <input type="radio" name="sex" id="sex1" value="男">
<label for="sex2">女：</label> <input type="radio" name="sex" id="sex2" value="女"><label>标签的 for 属性应当与相关元素的id 属性相同
<select>表单元素
1
2
3
4
5<select name="" id="">
<option value="">北京</option>
<option value="">天津</option>
<option value="">山东</option>
</select><select>之间至少包含一对<option>
在<option>中定义selected =“selected”时，当前项即为默认选中项
<textarea>文本域表单元素
1
