一、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,%