一、html的概念
1、概念：超文本标记语言。
2、超文本，超链接；超级不仅有文本，图片，还有音频，视频等。
3、html:作用: 显示服务器端的响应结果。
二、互联网三大基石
1、url:统一资源定位符，如：www.baidu.com
2、http协议：https://
3、html：显示页面
三、文档结构
<!DOCTYPE html> <!--文档的类型 h5-->
<html> <!--网页的开始标签-->
<head> <!--文档的标题，字符编码格式....-->
<meta charset="utf-8" />
<title>第一个网页</title>
</head>
<!--显示的内容-->
<body>
<h1>HelloWorld</h1>
</body>
</html><!--结束标签--> 四、常用标签
4.1梗概
1、行级元素：根据元素的大小决定所占用的空间。
img,a,embed,audio,video 2、块级元素：独占一行
h1-h6,p,br,hr,ul,ol,dl 3、文本标签
h1-h6, <p>,<br/>,<hr/>,<pre> 4、图片标签
<img src=”” width=”” height=”” title=”” alt=””/> 5、音频、视频
<embed src=”” width=”” constrols=”constrols”></embed>
<audio src=”” width=”” height=”” constrols=”constrols” > <audio>
<video src=”” width=”” height=”” constrols=”constrols” ></video> 6、超链接
<a href=”” target=””>XXXXXXXXXXXXXXX</a> 7、锚链接
<a name=” goods”>XXXXX</a>
<a href=”#goods”>YYYYY</a>
<a href=”index.html#goods”>zzzzzzzzzz</a> 8、列表标签
（1） 无序列表 <ul type=”disc”> <li></li></ul>
（2） 有序列表 <ol type=”A”><li></li></ol>
（3） 定义列表 <dl> <dt></dt> <dd></dd></dl> 4.2 head标签中子标签
meta标签 ：描述文档，定义文档的关键词
title标签:文档的标题
base标签 ：url地址
style:样式
script:脚本
link:链接 4.2.1 title的使用
<title>第一个网页</title> 4.2.2 meta的使用：定义了与文档相关链的名称/值 （键值对）
<meta charset="utf-8" /><!--单标签 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="第一个网页,html文档" />
<meta name="description" content="第一个网页........." /> 三秒钟后自动跳转到url所指定的网址
<meta http-equiv="refresh" content="3;url=https://www.baidu.com" /> 4.2.3 base的使用:为页面上所有的链接规定默认地址
<base href="https://www.baidu.com" />
<!--<base target="_self" />--> 覆盖自身页页
<base target="_blank" /> 新建页面打开
<a href="">百度</a>
<a href ="">淘宝</a>
<img src=”/a.jpg”/> 路径为 https://www.baidu.com/a.jpg 4.2.4 style：用于为html定义样式信息
<style type="text/css">
body{
background-color: blueviolet;
}
h1{
color: yellow;
}
</style> 4.2.5 script:用于定义客户端的脚本信息
<script type="text/javascript">
function test(){
alert("helloworld");
}
</script> 页面加载 时test()被调用
<body onload="test();"> 4.3 body中的子标签
4.3.1 文本操作的标签
1、 标题标签 h1-h6：块级标签
黑体，加粗，字号放大，自动换行
<h1>标题标签h1</h1>
<h2>标题标签 h2</h2>
<h3>标题标签 h3</h3>
<h4>标题标签 h4</h4>
<h5>标题标签 h5</h5>
<h6>标题标签 h6</h6> 2、段落标签 p ：前后自动换行 块级标签
3、加粗 strong ,倾斜 em
4、段内换行 <br/>
5、水平线 <hr/>
6、预格式化文本 <pre>
4.3.2 图片，音频，视频
1、图片: img
【1】 属性 :src 图片的路径(1可以是网络地址， 2.本地地址)
<img src="https://www.baidu.com/img/bd_logo1.png" width="200px" /><br />
<img src="https://www.baidu.com/img/bd_logo1.png" width="30%" /><!--浏览器的页面大小--><br />
<img src="img/SXT_2470.jpg" width="300px"/>
【2】属性:width ,heigh (1,像素值,2，百分比<浏览器页面的百分比> )
只写一个width或者heigh,使用图片自动配置比例显示
【3】 属性:title 图片的标题，
【4】 属性:alt:图片的替换文本 搜索引擎所使用
<img src=”” width=”” height=”” title=”” alt=”” /> 2、音频
embed:音频，视频，flash动画
<embed src="video/青花瓷.mp3" height="200px" width="200px"></embed>
<embed src="video/1382329602.swf"></embed>
<embed src="video/蜗牛与黄鹂鸟.MP4" width="200"></embed> audio:专门的音频文件
<audio src="video/青花瓷.mp3" controls="controls"></audio> 3、视频
video:专门播放视频
<video src="video/蜗牛与黄鹂鸟.MP4" width="300" controls="controls"></video
4.3.3 a标签
1、href: 指定一个url地址
2、target:规定在何处打开链接文档
默认:_self: 在自身打开
_blank:新建页面打开
_top:在顶级页面打开
framename：在框架集中打开
用法一： 用于超链接 从一个页面跳转到另外一个页面
<a href="https://www.baidu.com">百度</a><br /><!--默认打开方式是_self-->
<a href="https://www.taobao.com" target="_blank">淘宝</a> <!--target属性，决定打开方式-->
<a href="body_demo.html">打开本站中的页面</a> 用法二： 锚链接 用于链接到页面中的相应位置
<h2><a name="aichi">爱吃</a></h2> 需要锚链接的位置
<a href="#aichi">爱吃</a> href写上锚链接的名称
<a href="index.html#aichi">爱吃</a> 4.3.4 列表
1、无序列表
<ul type="disc"> <!--type :circle 空心圆点 square 实心方块 disc 实心圆点 type=-->
<li>用户注册</li>
<li>余票查询</li>
<li>用户登录</li>
<li>我的保险</li>
</ul> 注意事项： type=”1”,火狐和IE中以有序列表的形式进行显示， 谷歌不识别type=”a”,从a开始
2、有序列表
定义列表通常用于图文混排，图片放到 dt中， 文本描述信息放到dd中，dd可以有多个
<dl>
<dt><a href="#"><img src="img/photo_01.jpg" title="时尚女装" alt="全国包邮！韩版修身长袖T恤打底衫纯棉圆领T恤"/></a></dt>
<dd><a href="#">一口价：49.00</a></dd>
<dd>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤</dd>
</dl> 五、html实体
html中的预留字符被替换为实。
[1] 空格
[2] 一个tab键的距离
[3]<小于号
[4]>大于号
[5]©版权符号
[6]"双引号 六、表格
6.1 格式
<table border="1" width="50%" cellpadding="20" cellspacing="30">
<tr>
<td>出发地</td>
<td>目的地</td>
<td>8月 22日</td>
</tr>
<tr>
<td>北京</td>
<td>成都</td>
<td><a href="#">123</a></td>
</tr>
<tr>
<td>北京</td>
<td>拉萨</td>
<td><a href="#">28</a></td>
</tr>
</table> 6.2 表属性
1、<table></table>
table标签中的属性:
border:边框的宽度
表格的宽度
cellpadding:边框与内容之间的空白
cellspacing:格与格之间的空白 2、行<tr></tr>
3、单元格<td></td>
4、表格的表头部分通常是居中，加粗显示
<tr>
<th>出发地</th>
<th>目的地</th>
<th>8月 22日</th>
</tr> 5、表格进行分区块
<table border="1" width="400">
<thead>
<tr>
<td colspan="2"><img src="img/newS.gif" /></td>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/register.jpg" /></td>
<td><a href="#">新用户注册</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2"><img src="img/ico_tltel.gif"/></td>
</tr>
</tfoot>
</table> td的属性:
(1)colspan:跨列，横跨的列数<td colspan="4">北京尚学堂C02学生成绩表</td>
(2)rowspan:跨行，横跨的行数<td rowspan="4">2</td>
(3)align:表格中内容的水平对齐方式 left, center, right
(4)valign:表格中内容的垂直对齐方式 top , middle , bottom 七、表单元素
<form></form>属性:
action：提交数据的处理地址
method：以什么方式进行提交 get ,post
表单元素标签：<input />
最重要的属性:type 属性值:
text 文本框
password 密码框
radio 单选按钮
checkbox多选按钮
file文件上传
button：普通按钮
submit:提交按钮
reset:重置
image:图片 –》与submit相同
属性 readonly 属性值readonly
属性 checked 属性值 checked
属性 id 属性值 自定义
属性 name 属性值 自定义 案例
<form action="" method="get"> <!--表单-->
用户名:<input type="text" name="username" id="username" value="zhangsan"/> <br /> <!--文本框 -->
密码:<input type="password" maxlength="4" /><br /><!--密码框-->
性别:<input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex"/>女<br />
你的兴趣爱好<input type ="checkbox"/>蓝球
<input type ="checkbox"/>网球
<input type ="checkbox"/>足球
<input type ="checkbox"/>台球<br />
<input type="file" /><br />
<input type="button" value="按钮" onclick="test();"/>
<input type="submit" value="提交" />
<input type="reset" value="重置" /><br/>
<textarea rows="8" cols="40" readonly="readonly">请认真阅读本协议
</textarea><br />
<input type="image" src="img/next.jpg" /><br />
<select name="cardtype">
<option value="0">二代身份证</option>
<option value="1">护照</option>
</select>
</form> action ：
%E6%9D%8E%E5%9B%9:汉字的十六进制
http://127.0.0.1:8020/test_html_02/input_2.html?wd=%E6%9D%8E%E5%9B%9B&pwd=123212323&uname=zhangsan
?之前是action 中的请求地址 ,action =””提交到本页面
?之后是请求参数
http://127.0.0.1:8020/test_html_02/input_2.html?wd=sxt&pwd=31231&uname=zhangsan
多个请求参数之间使用&连接
wd:是百度的搜索框的name
sxt:是搜索框中的value form中的method 默认是get
post：
(1)相对比较安全
(2)数据大小默认不受限制
(3)效率低，没有缓存
get：
(1) 不安全
(2) 数据比较小，因为url地址栏有限制
(3) 效率高 有缓存 label 标签的作用：用户良好的体验度
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
<form action="" method="post">
<label for="username">用户名:</label><input type="text" id="username" name="wd" /><!--文本框-->
密码 :<input type="password" name="pwd" />
性别:<input type="radio" name="sex" id="male"/><label for="male">男</label>
<input type="radio" name="sex" id="famale"/><label for="famale">女</label>
<input type="hidden" value="zhangsan" name="uname"/>
<input type="submit" id="" name="" value="提交"/>
</form> 八、框架集
网页布局: (1)表格布局table (2)框架布局 (3)div+css布局
框架集 frameset
<frameset rows="20%,50%,*"> 分三行 cols=” 20%,50%,*”分三列
<frame name="left" src="index.html" scrolling="no" noresize="noresize"/>
<frame name="middle" src="register.html" />
<frame name="right" src="input_2.html" />
</frameset> 内联框架 iframe
<body>
<iframe src="top.html" width="100%" height="190" scrolling="no" frameborder="0">
<p>你的浏览器无法解析iframe内联框架</p>
</iframe>
<iframe src="left.html" width="200" height="500" frameborder="0">
<p>你的浏览器无法解析iframe内联框架</p>
</iframe>
<iframe src="right.html" width="1000" height="500" scrolling="no" name="right" frameborder="0">
<p>你的浏览器无法解析iframe内联框架</p>
</iframe>
</body> 框架集与内联框架共有的属性
src: 链接地址
name: 框架的名称
scrolling：是否显示滚动条 yes,no,auto
frameborder：框架的边框
widthà宽度, px,%