8.19（周一）：html
一.概述
- HTML全称：Hyper Text Markup Language(超文本标记语言)
- HTML特点：简易性、可扩展性、平台无关性、通用性
- HTML标签通常是成对出现的，有开始就有结束，这样的标签称为成对标签，没有结束标签称为空标签。HTML标签不区分大小写,建议小写。文件名后缀为.html或.htm
二.基本标签
2.1结构标签
<html><html>:根标签 <head></head>：头标签
<title></title>:页面的标题 <body></body>：主体标签：网页内容
属性：
color:文本的颜色 size: 文本的大小
bgcolor:背景色 background:背景图片
背景图片和背景颜色同时存在，背景颜色会被背景图片覆盖
2.2排版标签
注释标签：<!--注释--> 换行标签：<br/>
段落标签：<p>文本文字</p>
特点：段与段之间有行高；属性：align对齐方式
水平线标签:<hr/>(默认是窗口长度)
属性：width：水平线的长度 size: 水平线的粗细 (像素表示)
color:水平线的颜色 align:水平线的对齐方式
css控制p标签之间的高度，p是块级元素，有三种方法：
使用line-height；如 p { line-height:1.8}
使用margin；如 p { margin-bottom:10px}
使用padding；如 p { padding-top:10px}
2.3标题标签
<h1></h1>—<h6></h6>数字越大文字越小，字体加粗，内置字号，默认占据一行；
2.4容器标签
<div></div>:块级标签，独占一行，换行，主要是结合css页面分块布局
<span></span>:行级标签，不换行，主要用于进行友好提示信息
2.5列表标签
列表标签可以不同种类之间进行嵌套
type属性控制显示的符号类型
无序列表标签： <ul><li></li><li></li></ul> 列表项：<li></li>
type :三个值，分别为circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
有序列表标签：<ol></ol> 列表项： <li></li>
type：1、A、a、I、i（数字、字母、罗马数字）
定义列表 <dl><dt><dd></dd><dd></dd></dt></dl> dt 定义标题 dd 定义描述
2.6图片标签
<img/> 独立标签
src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）
width:宽度 height:高度 border:边框
align:控制图片和其他内容的对齐方式 top-顶部对齐，middle-居中，bottom-底部对齐
alt:图片的文字说明 title:图片的悬停显示
hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近
2.7链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>链接标签</title>
</head>
<body>
<!--锚点-->
<a name="mytop"></a>
<!-- -->
<a href="#bottom">去底部</a>
<h1>链接标签的使用</h1>
<h2>1.实现页面跳转</h2>
<h5>
href:链接的地址<br />
target:打开的位置：
（1）_self在自身窗口打开
（2）_blank在新的窗口中打开
（3）_parent在父窗口打开
（4）_top在顶部窗口打开
（5）_search任意名字
</h5>
<a href="https://www.baidu.com">去百度</a>
<a href="http://www.qunar.com">去哪儿网</a>
<a href="sub.html"><img src="../img/01.jpg" ></a>
<h2>2.实现锚链接</h2>
<p>段落</p>（*n）
<a href="#mytop">回到顶部</a>
<!--默认锚点:top-->
<a href="#top">回到顶部</a>
<a name="bottom"></a>
</body>
</html>
2.8表格标签
border:边框的宽度
bordercolor:边框的颜色
cellspacing:单元格的边距
width:宽度 height:高度
table的align属性：控制表格的对齐方式 left center right
td的align属性： 控制内容对齐方式 left center right
td的valign属性： 控制内容对齐方式 top middle bottom
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2>
表格标签的使用
table：表示表格
tr：表示行
td：表示单元格
</h2>
<h3>实例一</h3>
<h5>
table表格的属性
（1）border:边框：1px
（2）width：宽度
（3）height：高度
</h5>
</h5>
tr、td的属性
（1）align：控制表格内容水平对齐方式
（2）valign：控制表格内容垂直
<h5>
<table border="1" bgcolor="aqua" bordercolor="red" width="500" height="100" cellspacing="0">
<tr align="center" valign="top">
<td align="left">第一行第一个单元格</td>
<td>第一行第二个单元格</td>
</tr>
<tr align="right" valign="top">
<td>第一行第一个单元格</td>
<td>第一行第二个单元格</td>
</tr>
</table>
<h3>实例二：跨列</h3>
<table border="1" width="500" height="300">
<tr><td colspan="3">学生成绩</td></tr>
<tr><th>姓名</th><th>语文</th><th>数学</th></tr>
<tr><td>张三</td><td>30</td><td>80</td></tr>
<tr><td>李四</td><td>90</td><td>80</td></tr>
</table>
<h3>实例三：课程表跨行</h3>
<table border="1" width="500" height="300">
<tr><td rowspan="3"></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td rowspan="3"></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</body>
</html>
2.9文本格式化标签
<b> 定义粗体文本。 <big> 定义大号字。
<em> 定义着重文字。 <i> 定义斜体字。
<small> 定义小号字。 <strong>定义加重语气。
<sub> 定义下标字。 <sup> 定义上标字。
<ins> 定义插入字。 <del> 定义删除字。
三.表单标签(重要)
3.1 form标签（重点）
get:一般情况用于查询数据
1.数据存在地址栏中,请求参数都在地址后拼接 path?name=张三&password=123456
2.不安全
3.效率高
4.get请求大小有限制，不同浏览器有不同，但是大约是2KB
post：一般用于插入修改等操作
1.地址栏没有数据：请求参数单独处理。
2.安全可靠
3.效率低
4.post请求大小理论上无限。
还有put 、delete、header，但一般不使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单标签的使用</title>
</head>
<body>
<h2>表单标签的使用</h2>
<!--建议使用post，因为get不安全，用户名和密码会显示在地址栏中-->
<form action="" method="post" enctype="application/x-www-form-urlencoded">
用户名：<input type="text" name="uesrname" /><br/>
密码：<input type="password" name="password" /><br/>
<input type="submit" value="登陆" />
</form>
</body>
</html>
3.2 input标签
type: 以下为type可能要取的值：
text文本框; password密码框
radio 表示是单选，name必须一致；value：提交给服务器的数据( checked ="checked" 表示选中)
checkbox 表示多选，name必须一致，返回值是个数组( checked ="checked" 表示选中)
file ：表示上传控件，可以作为图片按钮
以上具有输入性质的必须要有name属性,初始开始写value表示是默认值(以后获取输入框的内容要根据name来取)
以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
submit提交 ;reset重置; image图片提交按钮; button普通按钮
hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)
email 表示邮箱格式的数据
name属性：表单元素名字，只有name属性才能提交给服务器。
value属性：提交给服务器的数据
placeholder：提示信息
高级属性：
disabled:禁用
readonly:只读
3.3 select元素(下拉列表)
select标签添加该属性，multiple="multiple"表示多选 、size表示显示的个数
option表示下拉列表项
3.4 textarea元素(文本域)
<textarea cols="100" rows="5"> 表示5行100列的区域可以输入内容，该元素没有value属性
四.框架标签(重要)
4.1 frameset
框架结构标签，把body删掉，使用framset代替body
rows/columns 的值规定了每行或每列占据屏幕的面积
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head>
<!--
1.去掉body：frameset标签
属性：rows水平分隔 cols垂直分割
noresize="noresize"不能调整框架的大小，默认在网页上可以进行调整
frameborder="no":控制框架边框的有无
scrolling="yes"设置滚动条
-->
<frameset rows="20%,*" frameborder="yes" border="5" bordercolor="red">
<frame src="top.html" name="top" noresize="noresize"/>
<frameset cols="10%,*">
<frame src="left.html" name="left"/>
<frame src="right.html" name="right" scrolling="yes"/>
</frameset>
</frameset>
</html>
4.2内联框架(iframe)
body不删，注意target的使用
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>内联框架</title></head>
<body><div>
<a href="default.html" target="iframe">首页</a>
<a href="intro.html" target="iframe">公司简介</a>
<a href="list.html" target="iframe">商品列表</a>
</div><div>
<iframe name="iframe" src="01.html" width="100%" height="500"></iframe>
</div></body>
</html>
五.特殊字符
< 小于号 > 大于号 & 与字符 " 引号
® 己注册 © 版权 ™ 商标 空格
<!--页面自动跳转,2秒后跳转到百度-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--该网页的编码-->
<meta charset="UTF-8"> html5
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
