HTML
1.HTML
什么是HTML
超文本标记语言，通过标签语言来标记要显示的网页中的各个部分，一套规划，浏览器认识的规则
浏览器按顺序渲染网页文件，然后根据标记符解释和内容显示，对于不同的浏览器，对同一标签可能会有不完全相同的解释（兼容性）
静态网页文件扩展名：.html和htm
HTML不是什么
HTML不是一种编程语言，而是一种标记语言
HTML使用标记标签来描述网页
HTML结构
<!DOCTYPE html> #告诉浏览器使用什么样的HTML或者XHTML来解析HTML文档
<html lang="en"> #文章的开始标记，定义语言，HTML声明开始
<head> #元素出现在文档的开头部分，<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其中的元素有特殊重要的意义。
<meta charset="UTF-8"> #定义网页编码
<title>网页标题</title> #在浏览器标题栏显示
</head>
<body>
#文本体，文本是可见的网页主题内容
</body>
</html> #文章的结束标记
HTML只有两个标签一个head一个body标签。
HTML标签格式
1. HTML标签是由尖括号包围的关键字，如<html>
2. HTML标签通常是成对出现的（双边标记），比如<div>和</div>
3. 标签不区分大小写，<html>和<HTML>。推荐使用小写
4. 标签分为两部分：开始标签<a>和结束标签</a>。两个标签之间的部分 我们叫做标签体。
有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签
5. 标签可以有若干个属性，也可以不带属性。比如<head>元素就不带任何属性
6. 标签可以嵌套，但是不能交叉嵌套。
标签语法
<标签名 属性1="属性值1" 属性2="属性值2"...>内容部分</标签名>
<标签名 属性1="属性值1" 属性2="属性值2".../>
1.1 常用标签
<!DOCTYPE>标签
<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前。此标签可告知浏览器使用哪种HTML或XHTML规范。
作用：
声明文档的解析类型(docuent,compatMode)，避免浏览器的怪异模式
1.backCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
2.css1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCRTPE的声明，那么compatmode默认就是backcompat
head 内常用标签
<meta>标签
meta介绍：
<meta>元素可提供有关页面的元信息 ，针对搜索引擎和更新频度的描述和关键字
<meta>标签位于文档的头部，不包含任何内容
<meta>提供的信息是用户不可见的
meta标签的自称：
meta标签共有两个属性，他们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。
1.name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索机器人查找信息和分类信息用的。
<meta name="keywords" content="meta总结，HTML meta属性，meta跳转">
<meta name="description" content="meta元素可提供有关页面的元信息，针对搜索引擎和更新频度的描述和关键词">
2.http-equiv属性：相当于http的文件头作用，他可以向浏览器传回一些有用的信息，以帮助正确的显示网页内容，与之对应的属性为content，content中的内容其实就是各个参数的变量值。
#自动刷新并指向新页面
<meta http-equiv="Refresh" content="2;URL=https://www.oldboy.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)
#设定页面使用的字符集
<meta http-equiv="content-Type" charset=UTF8">
#使用EmulateIE7的标准渲染模式
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />
非<meta>标签
<meta charset="UTF-8"> <!--使用utf-8编码解码-->
<title>Title</title> <!--元素可定义文档的标签-->
<link rel="icon" href="https://www.jd.com/favicon.ico"> <!--定义标题图片-->
<link rel="stylesheet" href="css.css"> <!--连接一个外部样式表--->
body 内常用标签
<body>内常用标签
基本标签（块级标签和内联标签）
<hn></hn> :n的取值范围1~6；从大到小。用来表示标题
<p></p> :段落标签。包裹的内容被换行，并且也上下内容之间有一行恐艾
<b></b> ：加粗标签
<strong></strong> ：加粗标签
<em></em> ：文字变成斜体
<i></i> ：文字变成斜体
<strike></strike> ：为文字加上一条中线
<sup></sup> ：上角标 和 下角标
<br> ：换行
<hr> ：水平线
特殊字符：
空格   ¡ ¡ ¡
¢ ¢ ¢ £ £ £
<div>和<span>
<div></div>：<div>只是一个块级元素，并无实际意义。主要是通过CSS样式为其赋予不同的表现。
<span></span>：<span>表示了内联行（行内元素），并无实际意义，主要通过CSS样式为其赋予不同的表现。
块级标签和内联标签
特性：
块级（block）
独占一行
可设置长宽
内联（inline）：
按内容占位
不可设置长宽
块级元素和行内元素的区别
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需要另一一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
标签分类
块标签：独占一行的标签
block
h1-h6
p
table
ul
li
tr
div
内联标签：只控制自己需要的区域
inline
b
i
em
strong
img
span
图形标签<img>
格式：
<img title="loggo-in" src="https://www.jd.com/favicon.ico" alt="loggo">
src ：要显示图片的路径，可以放图片的连接或者相对路径，放图片的绝对路径需要修改配置文件
alt ：图片没有加载成功时的提示
title ：鼠标悬浮时的提示信息
width ：图片的宽
height ：图片的高（宽高两个属性只用一个会自动等比缩放。）
超链接标签（锚标签）<a></a>
什么是超链接
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮箱地址，一个文件，甚至是一个应用程序
示例：
<a href="https://www.jd.com/favicon.ico" target="_blank"><img title="loggo-in" src="https://www.jd.com/favicon.ico" alt="loggo" ></a>
<a href="">标签体</a>
href属性指定目标网页地址，改地址可以有几种类型
绝对url - 指向另一个站点（比如 href="https://www.jd.com/favicon.ico" ）
相对url - 指当前站点中确切的路径（href="index.html" ）
锚 - 指向页面中的锚（href="#top"）
列表标签
<ul> ：无序列表 [type属性:disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
<ol> ：有序列表
<li> ：列表中的每一项
<dl> :定义列表
<dt> ：列表标题
<dd> ：列表项
示例：
<ul type="circle">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
</ol>
<dl>
<dt>河北省</dt>
<dd>邯郸市</dd>
<dd>石家庄市</dd>
<dd>唐山市</dd>
</dl>
锚点
锚点（anchor）是超链接的一种应用，也叫命名锚记，锚点可以像一个定位器一样，可以实现页面内的链接跳转，运动相当普遍。例如，我们有一个网页，由于内容太多，导致页面很长，而且里面的内容，可以分为N个部分。这样的话，我们就可以在网页的顶部设置一些锚点，这样便可以方便浏览器点击相应的锚点，到达本页内响应的位置，而不必在一个很长的网页里自行寻找。又例如，我们页面中，有个链接需要跳转到另一个页面的中间或者脚部去，这时候也可以运用上锚点技术来解决这个问题。
示例
点击相应的章数，便能跳转到对应的内容框中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--渲染内容-->
<style>
/*设置每个模块的高度*/
.item{
height: 1000px;
}
.c1{
background-color: brown; /*定义每个内容的颜色*/
}
.c2{
background-color: aquamarine;
}
.c3{
background-color: rebeccapurple;
}
</style>
</head>
<body>
<div> <!-- 设置锚点 -->
<h1><a href="#i1">第一章</a></h1>
<h1><a href="#i2">第二章</a></h1>
<h1><a href="#i3">第三章</a></h1>
</div>
<div> <!-- 设置文本内容 -->
<div id="i1" class="item c1">111</div>
<div id="i2" class="item c2">222</div>
<div id="i3" class="item c3">333</div>
</div>
</body>
</html>
表格标签：<table>
表格概念
表格是一个二维数据空间，一个表格由若干行组成，一个行又有若干单元格组成，单元格里可以包含文字、列表、图案、表单、数字符号、预置文本和它的表格等内容
表格最重要的目的是显示表格类数据。表格类数据是指最适合组织为表格格式(即按行和列组织)的数据
表格的基本结构
<table 属性>
<tr>
<th>标题</th>
<th>标题</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
属性：
<tr>: table row 表格行
<th>: table head cell 表头单元
<td>: table data cell 表格单元数据
属性：
border：表格边框。
align：规定标签的对齐方式 left 左边（默认） center：居中 right 右边
cellpadding：内边距
cellspacing：外边距
width：像素 百分比。（最好通过CSS来设置长宽）
rowspan：单元格竖跨多少行
colspon：单元格横跨多少列（即合并单元格）
示例
<table border="1" cellpadding="20" cellspacing="10">
<tr>
<th>标题</th>
<th>标题</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<table border="1"> <!--表格-->
<thead> <!--表格头部-->
<tr> <!--表格行-->
<th>姓名</th> <!--表头单元-->
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tdody>
<tr>
<td>张三</td> <!--表格单元数据-->
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>16</td>
</tr>
</tdody>
表单标签
表单标签：<form>
功能：表单用于向服务器传输数据，从而实现用户与web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和label标签。
表单属性
action：表单提交到那，一般指向服务器端一个程序，程序接收到表单提交过来的数据（即表单元素值）作相应处理，
method：表单的提交方式post/get默认取值就是get
表单元素
基本概念：
HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容
表单一般用于收集用户的输入信息
表单的工作原理：
访问者在浏览器表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息功能通过Internet传送到服务器上。
服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
一个表单元素有三个基本组成部分
- 表单标签，包含了表单处理程序所在的url以及数据提交到服务器的方法等表单信息。
- 表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上框等表单控件。
- 表单按钮，包含提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CG脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。
在HTML中创建表单用form标签，每个表单都可以包含一到多个表单域或者按钮。form标签属性
| 属性 | 值 | 描述 |
|---|---|---|
| action | 服务端表单处理程序的URL地址 | |
| method | post，get【默认值】 | 表单数据的提交方法 |
| target | 参考超链接的target属性 | 表单数据提交时URL的打开方式 |
| enctype | application/x-www-form-urlencoded[默认值] multipart/formdata [用于文件上传] text/plain [用于纯文本数据发送] | 表单提交数据时的编码方式 |
<input>系列标签
默认值
checked="checked" #设置元素默认值
checked #简写方式
示例：
足球 <input type="checkbox" name="hobby" value="football" checked="checked"> <!--足球 默认值-->
1. 表单类型
type: text 文本输入框
password 密码输入框
radio 单选框
checkbox 多选框
submit 提交按钮
button 按钮（需要配合js使用）
file 提交文件：form表单需要加上属性enctype="multipart/form-data"
上传文件注意两点：
1.请求方式必须是post
2.enctype="multipart/form-data"
2.表单属性
name 表单提交项的键
注意：name和id属性的区别：
name属性是服务器通信时使用的名称
而id属性是浏览器端使用的名称，该属性主要是为了方便客户端编程，而在css和JavaScript中使用的
value：表单提交项的值，对于不同的输入类型，value 属性的用法也不同
type="button","reset","submit" - 定义按钮上显示的文本
type="text","password","hidden" - 定义输入字段的初始值
type="checkbox","radio","image" - 定义与输入相关联的值
checked：radio 和 checkbox默认被选中
readonly ：只读 .text 和 password
disabled ： 对所用input都好使
<select> 标签：下拉选标签属性
selected="selected" 设置元素默认值 简写selectd
name：表单提交项的键
size：选项个数
multiple：multiple
<optgroup>为每一项加上分组
<option>下拉选中的每一项 属性：
value：表单提交项的值。
selected：selected下拉选默认被选中
<textarea> 多行文本框
<form id="forml" name="forml" method="post" action="">
<textarea cols="宽度" rows="高度" name="名字">
默认内容
</textarea>
</form>
<lable> 标签
定义：<label>标签为input元素定义标注(标记)
说明：
1.label元素不会向用户呈现任何特殊效果
2.<label>标签的for属性值响应与相关元素的id属性值相同。
#基本格式
<form method="post" action="">
<label for="username">用户名</label>
<input type="text" name="username" id="username" size="20" >
</form>
#示例 点击用户名将鼠标定位到文本框
<form action="http://127.0.0.1:8888" method="get" >
<p><label for="user">用户名：</label>：<input type="text" name="user" id="user"></p>
<p><label for="pwd" >密码</label>：<input type="password" name="pwd" id="pwd"></p>
</form>
<fieldest>
<legend>登录吧</legend>
<input type="text">
</fieldest>
HTML标签常用属性
设置长宽：
width: 200px;
设置高低
height: 200px;
content: "连接地址：";
color: red;
display: block;
| 文本相关属性 | |||
|---|---|---|---|
| font-family | font-size | letter-spacing | line-height |
| font-style | font-variant | text-align | text-indent |
| font-weight | font | text-transform | word-spacing |
| color | direction | ||
| 列表相关属性 | |||
| list-style-image | list-style-position | list-style-type | list-style |
| 表格和其他相关属性 | |||
| border-collapse | border-spacing | caption-side | empty-cells |
| cursor |
border，margin，passing，background
1.3 CSS的属性操作
1.3.1 文本属性
- font-style（字体样式风格）
属性值：
normal：设置字体样式为整体。默认值
italic：设置字体样式为斜体。这是选择字体库中的斜体字
oblique：设置字体样式为斜体。人为的使用文字倾斜，而不是去使用字体库的斜体字。
- font-weight（字体粗细）
属性值
normal：设置字体为正常字符。相当于数字值400
bold：设置字体为粗体。相当于数字值700.
bolder：设置字体为比父级元素字体更粗的字体。
lighter：设置字体为比父级元素字体更细的字体。
number：用数字表示字体粗细。从小到大，越来越粗，取值范围100,200,300,400,500,600,700,800,900
注意：
font-weight的常用值有两个normal和bold。其他的值在浏览器中的支持并不太好。
- font-size（字体大小）
font-size的值有很多，有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger，也可以设置默认值为具体的数值加上对应的计算单位来表示字体的大小。字体单位有像素（px）、字符（em，默认lem等于16px，2em等于32px，根据不同浏览器的默认字体大小而决定）、百分比（%）、磅（点）（pt）。
字体不指定大小时，主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器，字体最小只能设置成12像素，新版本已经修复。
- font-family（字体族）
font-family可以指定元素使用的字体系列或者字体族。当我们使用font-family指定字体族的时候，可以指定多种字体，作为候补。指定多个字体的时候，需要使用逗号隔开。
如果CSS中没有声明当前内容使用的字体族的时候，默认：
中文：宋体 【win7以后默认是 微软雅黑】
英文：Arial
- color（字体颜色）
可以使用color来表示字体的颜色，颜色值最常用的有三种形式，英文单词，十六进制，RGB十进制。更高级的有RGBA、HSL、HSLA，不过最低版本的浏览器并不支持
代码
另外要注意，使用十六进制表示颜色值的时候，如果字符的格式类似于“AAAAAA”的这种，六个字符一样的；又或者是“AABBCC”，这种，一二，三四，五六 位置上的数字一样的，我们可以使用简写ABC来表达
- text-align（文本对齐方式）
text-align属性可以设置文本内容的水平对齐方式。属性值常用的有
左对齐left
居中对齐center
右对齐right
justify 实现两端对齐文本效果
- text-decoration
使用text-decoration可以设置文本内容的装饰线条，正常的文本是没有线条的，常用的值有none，underline，overline，linethrough四种
none ：不设置装饰
underline ：下划线装饰
overline： 上实线装饰
linethrough：中实线装饰
- line-height（字体行高）
字体行高即字体最低端与字体内部顶端之间的距离。值可以是normal，px，number，%。
行高=字体大小 + 上半行距 + 下半行距
- vertical-align
vertical-align属性设置元素的垂直对齐方式。
代码
1.3.2 背景属性
- background-color（背景颜色）
页面的背景颜色有四种属性值表示，分别是transparent（透明），RGB十进制颜色表示，十六进制颜色表示和颜色单词表示。
属性使用：
background-color: transparent; /* 透明 */
background-color: rgb(255,0,0); /* 红色背景 */
background-color: #ff0000; /* 红色背景 */
background-color: red; /* 红色背景 */
rgb() red green blue,数值越大颜色越深
- background-image（背景图片）
background-image可以引入一张图片作为元素的背景图像。默认情况下，background-image防止在元素的左上角，并在垂直和水平方向重复平铺。
语法：
background-image:url('图片地址')
当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上，所以当背景图片没有被加载到，或者不能完全铺满元素时，就会显示背景颜色。
- background-repeat（背景平铺方式）
CSS中，当使用图像作为背景了以后，都是默认吧整个页面平铺满的，但是有时候在很多场合下面，页面不需要这种默认的效果，而可能需要背景图像只显示一次，或者只按照指定方式进行平铺的时候，可以使用background-repeat来进行设置。
background-repeat专门用于设置背景图像的平铺方式，一般有四个值
| repeat | 平铺（默认值） |
|---|---|
| no-repeat | 不平铺 |
| repeat-x | x轴平铺 |
| repeat-y | y轴平铺 |
- background-position（背景定位）
CSS中支持元素对背景图像的定位摆放功能，就是利用background-position属性来实现，以页面中元素的左上角为圆点（0,0），把元素的内部区域当成一个坐标轴（上边框为x轴，越往左x的值越大，左边框为y轴，越往下y轴的值越大，反之亦然），然后计算出背景图片的左上角与圆点的距离（x轴和y轴的距离），然后把背景图片放入到指定的职位上，对背景图片的位置进行精确的控制和摆放。
background-position的值分成两个，使用空格隔开，前面一个是背景图片左上角的X轴坐标，后面一个是背景图片左上角的Y轴坐标。两个值都可以是正、负值。
语法
background-position：x轴坐标 y轴坐标
背景定位的值除了是具体的数值以外，还可以是左（left）、中（center）、右（right）
- background（背景样式缩写）
和字体属性一样，多个不同背景样式属性也是可以同时所写的，不过不需要像字体那样按照一定的顺序，背景样式的缩写属性的顺序是不固定的，可以任意编排。
background：背景颜色 背景图片 背景平铺方式 背景定位；
1.3.3 边框属性
- border-style（边框风格）
定义边框的风格、值可以有
none:没有边框，当border的值为none的时候，系统将会忽略[border-color]
hidden：隐藏边框，低版本浏览器不支持
dotted：点状边框
dashed：虚线边框
solid：实线边框
double：双实线边框，两条单线与其间隔的和等于border-width
border-style的值可以缩写的：
只有一个值的时候表示同时控制上下左右的边框风格。
只有两个值的时候表示分别控制上下、左右的边框风格。
有三个值的时候表示分别控制上、左右、下的边框风格。
有四个只的时候表示分别控制上、右、下、左的边框风格
border-style还可以单独指定不同方向
border-top-style 设置上边的边框风格
border-bottom-style 设置下边的边框风格
border-left-style 设置左边的边框风格
border-right-style 设置右边的边框风格
- border-width（边框宽度）
使用border-width可以定义边框的厚度，值可以是medium，thin，thick和指定数值的宽度。 同时，border-width也可以进行缩写：
只有一个值的时候表示同时控制上下左右的边框宽度。
只有两个值的时候表示分别控制上下、左右的边框宽度。
有三个值的时候表示分别控制上、左右、下的边框宽度。
有四个只的时候表示分别控制上、右、下、左的边框宽度。
border-width也可以单独指定不同方向
border-top-width 设置上边的边框宽度
border-bottom-width 设置下边的边框宽度
border-left-width 设置左边的边框宽度
border-right-width 设置右边的边框宽度
- border-color（边框颜色）
定义边框的颜色，值表示的方式可以是十六进制，RGB十进制和单词表示法
border-colorde的缩写
只有一个值的时候表示同时控制上下左右的边框颜色。
只有两个值的时候表示分别控制上下、左右的边框颜色。
有三个值的时候表示分别控制上、左右、下的边框颜色。
有四个只的时候表示分别控制上、右、下、左的边框颜色。
border-color也可以单独指定不同方向：
border-top-color 设置上边的边框颜色
border-bottom-color 设置下边的边框颜色
border-left-color 设置左边的边框颜色
border-right-color 设置右边的边框颜色
- 边框样式缩写
还可以把边框风格，边框宽度，边框颜色进行组合在一起，进行缩写：语法：
border: 边框宽度 边框样式 边框颜色;
注意，border的缩写值可以不按照顺序来进行书写。这样的缩写可以同时控制4个方向的边框样
式。
1.3.4 列表属性
CSS中提供了一些列表属性可以用来：
(1)、设置不同的列表项标记为有序列表
(2)、设置不同的列表项标记为无序列表
(3)、设置列表项标记为图像
list-style-type（系统提供的列表项目符号）
list-style-image（自定义的列表项目符号）
li { list-style-image:url('qq.gif'); }
浙公网安备 33010602011771号