一、html简介：超文本标记语言
<!DOCTYPE html> 网页类型的声明
<html lang="en"> lang="en" 网页的语言类型，通常有en,ch
<head>
<meta charset="UTF-8">
浏览器的编码格式（网页上所有的编码格式都是UTF-8，若是没有设置编码格式，
会出现乱码的情况
<title></title> 网页的标题标签位置
</head>
<body> 网页的内容区域
第一个页面
</body>
</html>
1.作用：
创建网页标准的标记语言（目前所写的网页都为静态页面）
2.服务器网址：
http://localhost:63342/web%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B1017/1017-1/index.htmlhttp:// 协议（https:// 协议比http://协议更安全）localhost：主机名称63342：服务器端口号
3.HTML元素的书写格式
[1]HTML元素以开始标签起始， HTML元素以结束标签终止[2] 空标签在开始标签中进行关闭(以开始标签的结束而结束）
4.浏览器的渲染模式：从左到右、从上到下
5.HTML元素的分类：
6.网页标签的快捷键
写标签的快捷键：
[1] 标签名称+Tab[2] 注释：ctrl+/[3] 格式化代码快捷键：ctrl+alt+d+l[4] 生成一组标签快捷键：tagName(标签名称)>tagName+Tab
7.HTML元素浏览器的默认样式
[1]display: block(默认块级元素)[2] font-weight: bold(默认加粗)
二、HTML标签
1.标题标签：h1-h6
特点：换行、加粗、字体大小：大-小
2.水平线标签：hr
特点：块级标签
3.段落标签：p
[1] 作用：将文档分段[2] align属性：设置文字的对齐方式（right,left,center）[3] 块级标签
4.强制换行标签：br
作用：强制换行
5.文本格式化标签：
[1] b标签 作用：文本加粗 行级标签[2] strong标签： 作用：文本加重 行级标签[3] i斜体标签： 作用：文本倾斜 行级标签[4] em斜体标签： 作用：文本倾斜 行级标签[5] small标签： 作用：小号字体 行级标签[6] del标签： 作用：添加删除线 行级标签[7] ins标签： 作用：插入 添加下划线 行级标签[8] sub、sup标签： 作用：上、下标标签 行级标签[9] code标签： 作用：放置代码标签 行级标签[10] pre标签： 作用：按照原样输出到网页 块级标签
6.超链接标签：a
[1] 超文本链接 属性href连接的地址 行级标签[2] href地址有两种写法： [3] 相对路径写法：直接写：意味着同级目录./：一个点代表向外跳转一级[4] a连接的属性： [5] href属性值可以默认写# ：指当前页面[6] 使用a连接做锚标记当前页面的锚标记 使用a连接的属性，随便一个元素的id属性来做，也可以使用name属性来做，但是必须得是a连接，其他元素无效
<a href="#z">水果
</a>
<a id="z">石榴
</a>
跨页面标记：先跳转页面再找标记
index.html:
<a href="../例子/a.html#zjm">火锅
</a>
例子/a.html:
<a id="zjm">巴沙鱼片
</a>
[7] 请求网页到渲染完成的过程
7.img标签
[1] 图像标签 行级标签属性：src为图像的路径（可远程、可相对）远程路径：
<img >src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720>d6cf.png"/>
相对路径：
<img src="../image/a.jpg" alt="图片加载失败" width="300px" height="200px"/>
alt：图像加载失败所显示的信息weight、height：设置图像的宽和高align：文字的对齐方式。这个方式是周边的文字环绕。
8.ul/ol列表标签
[1] 作用：主要实现一些导航，也可以做数据，块级元素[2] ul标签：无序列表[3] ol标签：有序列表[4] li标签：子集标签，主要是显示内容 有序列表可以通过type属性修改序号 有序列表和无序列表可以嵌套使用
9.自定义列表：dl、dt、dd 块级元素
[1] dl标签类似于ul/ol[2] dt相当于li[3] dd指的是dt的内容 （也可以按照ul或者ol的写法写）
10.文字标签：span
作用：主要放文字，行级元素
11.区块标签：div
作用：容器，可搭配别的元素使用，主要用于网站的结构，块级元素
12.table表格元素
[1] tr(行)、td（列）/th（默认文本居中，加粗）、caption设置表头[2] 属性：border 给表格添加边框[3] cellspacing 设置表格和单元格之间的距离（设为0就合并了）[4] width 设置table的宽[5] align设置表格的对齐方式[6] cellpadding 设置单元格的内间距[7] bgcolor 设置背景颜色，网页里面颜色值：（1）单词；（2）十六进制颜色值（#ffffff)；rgb(0,0,0)；rgba(0,0,0,0.5)[8] 跨行（rowspan) 跨列（colspan) 在计算时要包括自身
<table border="1" bgcolor="#ff7f50" align="center" cellspacing="0" width="500" cellpadding="10">
<caption align="center">
学生基本信息表
</caption>
<tr>
<th rowspan="4">电商1803班
</th>
<th>姓名
</th>
<th>性别
</th>
<th>年龄
</th>
<th>专业
</th>
<th>地址
</th>
</tr>
<tr align="center">
<td>杨扬
</td>
<td>女
</td>
<td>20
</td>
<td>电子商务
</td>
<td>西安市
</td>
</tr>
<tr align="center">
<td>赵佳敏
</td>
<td>女
</td>
<td>20
</td>
<td>电子商务
</td>
<td>咸阳市
</td>
</tr>
<tr align="center">
<td>张雨蒙
</td>
<td>女
</td>
<td>20
</td>
<td>电子商务
</td>
<td>咸阳市
</td>
</tr>
<tr align="center">
<td colspan="6">备注：学生个人信息
</td>
</tr>
</table>
13.表单标签以及表单元素对象标签
[1] form标签：包含表单元素对象的，做表单提交的属性：action = " " 写的是当前表单提交的服务器路径 method = “” 表单提交的方式 ：get（显式提交，值拼接在路径的后边，不安全，数据量较大，类似在loction地址栏输入地址，访问http://www.maodu.com?id=10086&name=zhangsan) post（隐式提交，安全的，提交的数据量比较小） put delete insert **[2] 表单对象元素（常见的表单元素）< input/>标签： type属性控制标签的类型，属性也有差别[3] 按钮：button标签 type属性：button（普通按钮）、reset（重置按钮）、submit（提交按钮） 重置和提交只有在form表单中有效。
<input type="button" value="按钮"/>相当于
<button type="button">按钮
</button>
<input type="submit" value="提交"/>相当于
<button type="submit">提交
</button>
<input type="reset" value="重置"/>相当于
<button type="reset">重置
</button>
[4] 单行文本框：<input type = "text"/>input元素不写type属性默认单行文本框属性：placeholder = “” 智能提示 value = " " 当前元素的值 maxlength = " " 限制输入的最大长度 name = " " 名称属性[5] 单选按钮：<input type = "radio" value = "男"/>男属性：checked 默认选择若单选按钮要做多选一，只要标签具有相同的name就可以。
<input type="radio" value="男" name="sex" checked/>男
<input type="radio" value="女" name="sex"/>女
[6] 复选框：
<input type="checkbox" value="篮球" checked/>篮球
<input type="checkbox" value="排球"/>排球
<input type="checkbox" value="足球"/>足球
<input type="checkbox" value="羽毛球"/>羽毛球
<input type="checkbox" value="乒乓球"/>乒乓球
属性：checked默认选择[7] 文件资源管理器：
<input type="file" accept=".mp3,.mp4" multiple/>
属性：multiple 支持多选accept = “.mp3,.mp4” 限制文件格式[8] 密码框：
<input type="password" value="123456"/>
[9] 下拉菜单：
<select name="" id="">
<option>---请选择---
</option>
<option value="西安市">---西安市---
</option>
<option value="咸阳市" selected>---咸阳市---
</option>
<option value="商洛市">---商洛市---
</option>
</select>
option标签是select标签的子集，value为当前项的值属性：默认选择：selected[10] 文本域：
<textarea cols="30" rows="10" placeholder="请输入..."></textarea>
属性：rows = “10” 控制行cols = “30” 控制列placeholder = “请输入…” 只能提示
14.Iframe框架标签：
[1] 作用：主要做小型的企业系统[2] 在当前网页内部内嵌其他网页：
<iframe src="http://www.baidu.com"></iframe>
[3] 属性：src为嵌入的路径[4] label标签： 作用：包表单中文字的标签，for指向后面跟他有关联的元素的name属性[5] 搭建小型企业系统： a连接的target属性指向iframe的name属性
<a href="../例子/one.html" target="target">one页面
</a>
<a href="../例子/two.html" target="target">two页面
</a>
<a href="../例子/three.html" target="target">three页面
</a>
<iframe name="target" src="../例子/one.html"></iframe>
