本文档详细介绍HTML的基本知识，包括标签、属性、表单、表格、列表等元素的使用方法，同时涵盖了CSS的基础设置及如何实现简单网页布局。
1.网页基本知识（标红的需牢记）
标签：html、head、body
属性写在标签括号内部,形式：<a 属性1 属性2> </a>。如：<a href="http://www.baidu.com" target="_blank"></a>
1 <!DOCTYPE html> 2 <!-- 类似html这种格式,就称为标签，html标签 ：<html>fasdfasdf</html> 3 # 标签内部的属性--> 4 <html lang="en"> <!--# html标签开始，lang="en"叫做标签的属性--> 5 <head> <!-- 头部--head标签包括一下主要标签：meta、title、link、style、script--> 6 <meta charset="UTF-8"> <!--设置网页编码，meta是自闭合标签，就是不需要/meta --> 7 <!--<meta http-equiv="Refresh" Content="3">，设置页面每3秒自动刷新--> 8 <!--<meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn">设置页面每3秒自动跳转--> 9 <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,俱乐部"/> <!-- 关键字，让搜索引擎搜索用的--> 10 <meta name="description" content="汽车之家是提供信息最快最全的中国汽车网站。"/><!-- 网站描述--> 11 12 <link rel="shortcut icon" href="image/favicon.ico"> <!-- rel="shortcut icon"表示要设置图标，href是图标所在路径--> 13 <title>老男孩</title> 14 15 </head> 16 <body> 17 <!--<a href="http://www.oldboyedu.com">李 （空格符）>（大于符）<（小于符）a>杰</a>--> 18 19 <div></div> 20 21 <a href="http://www.oldboyedu.com">老男孩</a> 22 </body> 23 </html> #结束
[强制] 元素 id 必须保证页面唯一。
解释：
同一个页面中，不同的元素包含相同的 id，不符合 id 的属性含义。并且使用 document.getElementById 时可能导致难以追查的问题。
[建议] id 建议单词全字母小写，单词间以 - 分隔。同项目必须保持风格一致。
[建议] id、class 命名，在避免冲突并描述清楚的前提下尽可能短。
示例：
<!-- good -->
<div id="nav"></div> <!-- bad --> <div id="navigation"></div> <!-- good --> <p class="comment"></p> <!-- bad --> <p class="com"></p> <!-- good --> <span class="author"></span> <!-- bad --> <span class="red"></span>2.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Title</title> 6 </head> 7 <body> 8 <p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p> <!--p:段落 br：换行符--> 9 <p>123</p> 10 11 <h1>Alex</h1> <!--h1 到h6 ：设置标题，h1最大。h系列（字体加大加粗），p系列叫块标签（段落与段落之间有间距），一个块标签占一行--> 12 <h2>Alex</h2> 13 <h3>Alex</h3> 14 <h4>Alex</h4> 15 <h5>Alex</h5> 16 <h6>eric</h6> 17 18 <span>hello</span> <!-- span为行内标签或内联标签，span为白板，没有特性，行内标签不会换行--> 19 <span>hello</span> 20 <span>hello</span> 21 <span>hello</span> 22 23 <div>1</div> <!--div标签是块标签，没有任何属性，是白板，但是和其他块标签一样会换行。标签之间可以嵌套 --> 24 <div>2</div> 25 <div>3</div> 26 27 <!--<a href="http://www.oldboyedu.com">李 （空格符）>（大于符）<（小于符）a>杰</a>--> 28 </body> 29 </html>
3.
| HTML特殊字符编码大全：往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字。下面就是以字母或数字表示的特殊符号大全。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| HTML常用特殊字符：只要你认识了 HTML 标记，你便会知道特殊字符的用处。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
4.创建一个简单的前后台交互
前端：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action="http://192.168.1.31:8888/index" method="POST"> <!--form表单标签，提交方式有GET和POST两种。GET：将输入的内容放到url上给后台，在url上能看到，POST：将输入的内容放到body里给后台。
action指定后台程序的位置，'index'是后台程序定义的--> 9 <input type="text" name="user" /> <!--输入框--> 10 <input type="text" name="email"/> <!--输入框--> 11 <input type="password" name="pwd"/> <!--密码专用输入框--> 12 <!--{'user': '用户输入的用户','email': '用户输入的'email, 'pwd': '用户输入的密码' }给后台提交的数据是字典形式--> 13 <input type="button" value="登录1"/> 14 <input type="submit" value="登录2"/> <!--submit按钮 提交表单数据--> 15 </form> 16 <br/> 17 <form> 18 <input type="text" /> 19 <input type="password" /> 20 <input type="button" value="登录1"/> 21 <input type="submit" value="登录2"/> 22 </form> 23 </body> 24 </html>
后台程序：
1 import tornado.ioloop 2 import tornado.web 3 4 5 # pip3 install tornado 6 7 class MainHandler(tornado.web.RequestHandler): 8 def get(self): #前台以get方式提交数据，执行get函数 9 print(111) 10 u = self.get_argument('user') #获取user，跟前台form里定义的名字要一样 11 e = self.get_argument('email') #获取email，跟前台form里定义的名字要一样 12 p = self.get_argument('pwd') #获取pwd，跟前台form里定义的名字要一样 13 14 if u == 'wt' and p == '1' and e == 'alex@126.com': 15 self.write("OK") # self.write会将ok直接打印在网页上 16 else: 17 self.write("滚") 18 19 def post(self, *args, **kwargs): #前台以POST方式提交数据，执行post函数 20 u = self.get_argument('user', None) 21 e = self.get_argument('email', None) 22 p = self.get_argument('pwd', None) 23 print(u, e, p) 24 self.write('正在重启，请稍后') 25 26 27 application = tornado.web.Application([ 28 (r"/index", MainHandler), #这里定义了访问路径为index，所以前端访问后台时也要指定为index 29 ]) 30 if __name__ == "__main__": 31 application.listen(8888) 32 tornado.ioloop.IOLoop.instance().start()
5.input属性
相关用法介绍：
body标签 - 图标， 空格 > > < < - p标签，段落 - br，换行 ======== 小总结 ===== 所有标签分为： 块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距） 行内标签： span（白板） 标签之间可以嵌套 标签存在的意义，css操作，js操作 ps:chorme审查元素的使用 - 定位 - 查看样式 - h系列 - div - span - input系列 + form标签 input系列都可以给后台送数据，只有一下三种可以跟后台送数据 input type='text' - name属性，value="赵凡" （type为字典的key，value=为在按钮上显示的字） 送给后台的数据形式：name:value input type='password' - name属性，value="赵凡" （value=为在按钮上显示的字） input type='submit' - value='提交'（value=为在按钮上显示的字） 提交按钮，表单 input type='button' - value='登录' （value=为在按钮上显示的字）按钮 <input type='radio' name='gender' value='1'(不同的框可以弄不同的值，作为字典的value)/> - 单选框 value，checked="checked"（checked表示默认选中），name属性（name相同则互斥） input type='checkbox' - 复选框 value, checked="checked"，name属性（批量获取数据） input type='file' - 依赖form表单的一个属性 enctype="multipart/form-data"，有了转让个人属性，文件才会一点一点上传 用法：<input type='file' enctype="multipart/form-data"> input type='rest' - 重置，将输入框中的内容清空，并且不会将数据发送给后台，也就是网页刚打开时的状态 <textarea name='task'>默认值value</textarea> - name属性 textarea可以跟后台送数据 送给后台的数据形式：name:value select标签 下拉框 select可以跟后台送数据 送给后台的数据形式：name:value - name,内部option value, 提交到后台，size，multiple
2.设置两个div的上下边距
<div style="margin-bottom:10px;">设下边距为10像素</div>;
<div style="margin-top:10px;">设上边距为10像素</div>;
此外，还可以用padding(内边距)来定义，padding-top:10px; padding-bottom:10px; 定义上（下）边距为10px；
此法的好处是，当有浮动存在的时候，可以解决ie6的双边距问题。
3.设置两个div的左右边距
<div style="margin-left:10px;">设左边距为10像素</div>;
<div style="margin-right:10px;">设右边距为10像素</div>;
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form enctype="multipart/form-data"> <!--设置可以上传文件，不加enctype属性，则不能上传文件--> 9 <div> 10 11 <textarea name="meno" >asdfasdf</textarea> #提交给后台的数据是：meno=asdfasdf 12 13 <select name="city" size="10" multiple="multiple"> #size框的高度，默认为1,；multiple可以多选，按住crtl 14 <option value="1">北京</option> #提交给后台的数据是city=1 15 <option value="2">上海</option> 16 <option value="3" selected="selected">南京</option> #默认选中南京 17 <option value="4">成都</option> 18 </select> 19 20 21 <input type="text" name="user" /> 22 <p>请选择性别： 单选框</p> 23 男：<input type="radio" name="gender" value="1" /> <!--有3个性别，（name相同则互斥），name是返回给后台字典的key，value是返回给后台字典的值--> 24 女：<input type="radio" name="gender" value="2" checked="checked"/> #提交给后台的数据是：name=2 25 Alex：<input type="radio" name="gender" value="3"/> 26 <p>爱好 复选框</p> 27 篮球：<input type="checkbox" name="favor" value="1" /> 28 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 29 皮球：<input type="checkbox" name="favor" value="3" /> 30 台球：<input type="checkbox" name="favor" value="4" checked="checked"/> 31 网球：<input type="checkbox" name="favor" value="5" /> 32 <p>技能 复选框</p> 33 撩妹：<input type="checkbox" name="skill" checked="checked" /> 34 写代码：<input type="checkbox" name="skill"/> 35 <p>上传文件</p> 36 <input type="file" name="fname"/> 37 </div> 38 39 40 41 42 43 <input type="submit" value="提交" /> 44 <input type="reset" value="重置" /> 45 </form> 46 </body> 47 </html>
6.- a标签,做跳转之用，只有a标签可以做跳转
- 跳转 href='http://www.baidu.com'
- 锚 href='#某个标签的ID' 标签的ID在同一个网页中不允许重复
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a href="http://www.baidu.com" target="_blank">百度一下</a> <!--做跳转，超链接--> 9 <a href="#i1">第一章</a> <!--做锚点，必须以#开头，点一下锚点，就会跳转到相应id的div--> 10 <a href="#i2">第二章</a> 11 <a href="#i3">第三章</a> 12 <a href="#i4">第四章</a> 13 14 <div id="i1" style="height:600px;">第一章的内容</div> <!--给div指定id，id在同一个网页里不能重复--> 15 <div id="i2" style="height:600px;">第二章的内容</div> 16 <div id="i3" style="height:600px;">第三章的内容</div> 17 <div id="i4" style="height:600px;">第四章的内容</div> 18 </body> 19 </html>
7.图片列表
- img
src
alt
title
- 列表
ul 点
li
ol 数字
li
dl 列下边是详细内容
dt列明
dd详细内容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a href="http://www.oldboyedu.com"> 9 <img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女"> 10 </a> 11 <!--用a标签将图片链接包裹起来，点一下图片就可以跳转到相应网站。图片链接格式：img src ='图片路径'，title=文字，style，alt=‘美女’（当图片加载不出来，就会显示alt的字）--> 12 <ul> <!--列表，前边是点--> 13 <li>asdf</li> 14 <li>asdf</li> 15 <li>asdf</li> 16 <li>asdf</li> 17 </ul> 18 19 <ol> <!--列表，前边是有序数字--> 20 <li>asdf</li> 21 <li>asdf</li> 22 <li>asdf</li> 23 <li>asdf</li> 24 </ol> 25 26 <dl> <!--列表，dt：是列明，dt：详细内容--> 27 <dt>ttt</dt> 28 <dd>ddd</dd> 29 <dd>ddd</dd> 30 <dd>ddd</dd> 31 </dl> 32 </body> 33 </html>
8.表格：
- 表格
table 建表
thead 建表头
<tr> 一行
<th> sds</th> 一个表头格子
</tr>一行
tbody 建表身体
<tr> 一行
<td> sdsA</td> 一个格子A
<td> sdsB</td> 一个格子B，格子A和格子B横着排列
</tr>一行
colspan = '2' 合并2行
rowspan = '2' 和并2列
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 10 <table border="1"> <!--创建表 border指定边框宽度，0为无边框 --> 11 <thead> <!--创建表头 thead 包的是表头--> 12 <tr> <!--tr表示一行 --> 13 <th>表头1列</th> <!--th表示一列 --> 14 <th>表头2列</th> 15 <th>表头3列</th> 16 <th> 17 <a href="s2.html">查看详细</a> <!-- 加个a标签，使表格内的内容可以跳转 --> 18 <a href="#">修改</a> <!-- #表示不可以跳转 --> 19 </th> 20 </tr> 21 </thead> 22 <tbody> <!--创建表身体 --> 23 <tr> <!-- 创建一行--> 24 <td>1</td> <!--创建一列 --> 25 <td colspan="3">2</td> <!-- colspan="3":合并3个行单元格--> 26 </tr> 27 <tr> 28 <td rowspan="2">1</td> <!--rowspan="2"：合并2个列单元格 --> 29 <td>1</td> 30 <td>2</td> 31 </tr> 32 <tr> 33 <td>1</td> 34 <td>1</td> 35 <td>1</td> 36 </tr> 37 <tr> 38 <td>1</td> 39 <td>1</td> 40 <td>1</td> 41 <td>1</td> 42 </tr> 43 </tbody> 44 </table> 45 46 </body> 47 </html>
9.用一个边框将用户名、密码包裹起来
- label
用于点击文件，使得关联的标签获取光标
<label for="username">用户名：</label>
<input id="username" type="text" name="user" />
- fieldset
legend
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 10 <fieldset> #设置一个边框 11 <legend>登录</legend> <!-- 在边框上写字--> 12 <label for="username">用户名：</label> <!-- 将框与文字关联起来，点击文字，框里就有光标 这里for与id的值得一样才能关联--> 13 <input id="username" type="text" name="user" /> 14 <br /> 15 <label for="pwd">密码：</label> 16 <input id="pwd" type="text" name="user" /> 17 </fieldset> 18 </body> 19 </html>
10.css标签属性
CSS
在标签上设置style属性：
background-color: #2459a2;
height: 48px;
...
编写css样式：
1. 标签的style属性
例子：
<div style="">
</div>
2. 写在head里面 style标签中写样式
- id选择区
#i1{
background-color: #2459a2;
height: 48px;
}
- class选择器 ****** 最常用*************
.名称{
...
}
在body中这样调用属性
<标签 class='名称'> </标签>
- 标签选择器
div{
...
}
所有div设置上此样式
- 层级选择器（空格） ******
.c1 .c2 div{
...
}
- 组合选择器（逗号） ******
#c1,.c2,div{
...
}
- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n='alex']{ width:100px; height:200px; }
PS: - 优先级，标签上的style优先，然后按编写顺序，越靠近div的样式越优先，也就是就近原则
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*<!--在head-->style标签-->内设置样式属性，下边创建一个样式命名为‘ .c1’，其他div就可调用该样式-->*/ 8 .c1{ 9 background-color: #2459a2; 10 height: 10px; 11 } 12 13 /*!* #c2{ *! 类似于c1，但是在div中可以id=‘c2’*/ 14 /*background-color: black;*/ 15 /*color: white;*/ 16 /*}*/ 17 18 span div{ /*将span下的div设置为以下属性 */ 19 background-color: black; 20 color: white; 21 } 22 23 /* .c1 div{ 将c1下的div设置为以下属性 */ 24 /*background-color: black;*/ 25 /*color: white;*/ 26 /*}*/ 27 .i1,.i2,.i3{ 28 /*将i1，i2，i3全部设置为以下样式，.是对应div中的class；#i1，#i2，#i3对应id*/ 29 background-color: black; 30 color: white; 31 } 32 .c3[n='alex']{ width:100px; height:200px; } /*自定义属性选择器，命名为.c1，[括号内设置相应值，表示有相应值的div设置本属性]*/ 33 </style> 34 </head> 35 <body> 36 <div class="c1">ff</div> <!-- 调用上边的.c1样式--> 37 <div>kkkkk</div> 38 <div class="i1">ff</div> <!-- 调用上边的.i1样式--> 39 <div class="i2">ff</div> 40 <div class="i3">2</div> 41 <input class="c3" type="text" n="alex"> <!--调用上边的自定义属性--> 42 <input class="c1" type="password"> 43 </body> 44 </html>
11.一个div可以有多个属性
<div class="c1 c2 c3">ff</div>
12. 引用其他css文件的样式
例子：
写一个common.css，该css文件用于让其他文件引用
1 .c2{ 2 font-size: 58px; 3 color: black; 4 } 5 6 .c1{ 7 background-color: red; 8 color: white; 9 }
再写一个html，来引用这个css
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="css/commons.css" /> <!--commons.css的相对路径--> 7 </head> 8 <body> 9 <div class="c1 c2" style="color: pink">asdf</div> 10 <div class="c1 c2" style="color: pink">asdf</div> 11 </body> 12 </html>
13.字体属性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="border: 1px solid red;"> <!-- 设置边框样式：宽度、样式（虚线还是实线）、颜色--> 9 asdfasdf 10 </div> 11 <div style=" <!--设置字体属性--> 12 height: 48px; <!--字体高度--> 13 width:80%; <!--字体宽度--> 14 border: 1px solid red; <!--边框属性--> 15 font-size: 16px; <!--字体大小--> 16 text-align: center;<!--字体水平居中--> 17 line-height: 48px; <!--字体上下居中--> 18 font-weight: bold; <!--字体加粗--> 19 ">asdf</div> <!--文字--> 20 </body> 21 </html>
14.让div等块级标签堆叠在一行，用float
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="width: 20%;background-color: red;float: left">1</div> 9 <div style="width: 20%;background-color: black;float: left">2</div> <!--如果这个div的宽度大于80%，则不会和上一个堆叠在一起，因为和上一个相加大于100%，就会另起一行--> 10 </body> 11 </html>
15.改变行内标签与块级标签属性 display
display
******
行内标签：无法设置高度，宽度，边距(padding margin)
块级标签：可以设置高度，宽度，边距(padding margin)
display: none; -- 让标签消失
display: inline; 将块标签变成行内标签
display: block; 将行内标签变成块标签
display: inline-block; 既具有行内标签属性,默认自己有多少占多少
又具有块标签属性，可以设置高度，宽度，padding margin
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--<div style="background-color: red;display: inline;">asdf</div> display: inline;将块标签变成行内标签--> 9 <!--<span style="background-color: red;display: block;">asdf</span> display: block;将行内标签变成块标签--> 10 <span style="display:inline-block;background-color: red;height: 50px;width: 70px;">Alex</span> <!-- 让行内标签既具有块标签属性又有行内标签属性--> 11 <a style="background-color: red;">Eric</a> 12 </body> 13 </html>
16.综合示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> /*<!-- 定义一个样式--> */ 7 .pg-header{ 8 height: 38px; 9 background-color: #dddddd; 10 line-height: 38px; 11 } 12 </style> 13 </head> 14 <body style="margin: 0"> <!--将body与屏幕上沿的缝隙去掉--> 15 <div class="pg-header"> <!--应用自定义样式--> 16 <div style="width: 980px;margin: 0 auto;"> 17 <div style="float: left;">收藏本站</div> <!--让子div飘起来，可以堆叠在一行--> 18 <div style="float: right;"> 19 <a>登录</a> 20 <a>注册</a> 21 </div> 22 <div style="clear: both"></div> 23 </div> 24 </div> 25 <div> 26 <div style="width: 980px;margin: 0 auto;"> <!--将本div设置为980像素，将其设置为外边框为0，左右自动居中--> 27 <div style="float: left"> 28 Logo 29 </div> 30 <div style="float: right"> 31 <div style="height: 50px;width: 100px;background-color: #dddddd">购物车</div> 32 </div> 33 <div style="clear: both"></div> <!--这里必须设置一下clear，因为上边俩div设置为float浮动，否则下边的红色div会和上边的这俩重叠--> 34 </div> 35 </div> 36 <div style="background-color: red;"> 37 <div style="width: 980px;margin: 0 auto;"> 38 asdfsdf 39 </div> 40 </div> 41 <div style="width: 300px;border: 1px solid red;"> 42 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 43 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 44 <div style="clear: both;"></div> <!--当子div飘起来后，父div就管不住子div了，用clear来约束子div--> 45 </div> 46 </body> 47 </html>
html常用标签的使用方法
1 html标题
<h1> to <h6>
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> </body> </html>
2 html水平线 <hr/>
按 Ctrl+C 复制代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h6>h6</h6> <hr/> </body> </html> 水平线演示代码
按 Ctrl+C 复制代码
3 html注释<!-- comment -->
注释并不会显示在网页上
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h6>h6</h6><!-- hello world --> <hr/> </body> </html>
4 html段落<p>以及段落换行<br/>
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world</p> <p>hello world</p> <hr/> </body> </html>
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
段落换行使用<br/>
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world</p> <p>hello <br/> world</p> <hr/> </body> </html>
5 html文本格式化
6 html超链接<a>
<a>比较重要的属性有两个，分别是href、target
href指定超链接地址
target指定打开方式
_blank 新页面打开
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world</p> <a href="http://www.baidu.com">百度</a> <hr/> </body> </html>
另提供了较为全面的<a>标签使用方法链接：http://blog.youkuaiyun.com/ao_xiaoqiang/article/details/44345565
7 html的图像<img>
使用格式：<img src="url">
alt 定义当图片无法加载时，显示什么信息
width 定义宽度，单位可以为像素 也可以为百分比
height 定义高度
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world</p> <a href="http://www.baidu.com"><img src="l.jpg"/></a> <hr/> </body> </html>
8 html的表格<table>
表格由<table>来定义，每行<tr> 有许多单元格<td>。表头可以使用<th>
<table>标签属性：
border 定义边框
在<table>中可以嵌入<th> <tr> <td>等标签
<tr> 定义行
<th> 定义表头
colspan 定义表头单元格可以横跨的列数。
rowspan 定义表头单元格横跨的行数
heardes 定义与表头单元格相关联的一个或者多个单元格。(html5新增)
<td> 定义单元格
colspan 定义单元格可以横跨的列数。
rowspan 定义单元格横跨的行数
heardes 定义与单元格相关联的一个或者多个单元格。(html5新增)
按 Ctrl+C 复制代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px"> <tr> <th colspan="2" >name</th> <th rowspan="2">list</th> </tr> <tr> <th headers="name">first name</th> <th headers="name">last name</th> </tr> </table>
按 Ctrl+C 复制代码
在浏览器中显示如下：
另外，若某个单元格为空，浏览器可能无法显示出这个单元格的边框。为了防止这种情况，可以在该单元格加一个空格占位符 。
9 html列表<ul> <ol>
列表分为
无序列表<ul>
有序列表<ol>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
<ul>
<li>male</li> <li>female</li> </ul> <hr/> <ol> <li>male</li> <li>female</li> </ol>
浏览器显示为：
10 html表单<form>
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素
<form>中的属性：
action：后面加url 指定当提交表单时向何处发送表单数据
method：get/post两个值，get为明文 post为加密
name：指定表单的名称
target：_blanket _self _parent _top 指定网页打开方式
<from>标签中较为常用的标签有<input> <select> <label> <button>
<fieldset> 标签可以将表单内的相关元素分组。 会在相关表单元素周围绘制边框。
name 规定fieldset的名称
form 值：form_id 规定fieldset所属的表单
<legend> 定义了 <fieldset> 元素的标题。
<input>中最为常用的几个属性:
form 后面跟所属form的id。规定所属的form
required 值：required 规定必需在提交表单之前填写输入字段。
disabled 值： disabled disabled 属性规定应该禁用的 <input> 元素。
type:决定输入类型
text 文本域
radio 单选按钮
checkbox 复选框
submit 提交按钮
password 密码输入
reset 重置
color 设置拾色器 html5
number 定义用于输入数字的字段（您可以设置可接受数字的限制）
range 定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受数字的限制
name:input元素的名称
value：input元素的值
size：输入字段的宽度
pattern 规定用于验证 <input> 元素的值的正则表达式。pattern 属性适用于下面的 input 类型：text、search、url、tel、email 和 password
list 值为datalist的id 该属性引用 <datalist> 元素，其中包含 <input> 元素的预定义选项。
autofocus 该属性是一个 boolean 属性，让页面载入后，input自动获得焦点
<datalist> html5中的新特性 标签规定了 <input> 元素可能的选项列表。<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。
用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。
与<option>标签配合使用
<button> 定义一个点击按钮
form 所属的form表单
name button名称
type
button 该按钮是可点击的按钮
reset 该按钮是重置按钮
submit 该按钮是提交按钮
<label>标签为 input 元素定义标注（标记）
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
for 值为某个元素的id 规定 label 与哪个表单元素绑定。
form form_id
<textarea>
name 规定textarea的名称
form form_id 规定从属的表单
cols 规定可见列数
rows 规定可见行数
<select>使用<option>标签定义下拉列表的可用选项.常见的属性：
name：指定select名称
multiple：规定可选择多个选项
<optgroup> 用于把相关的选项组合在一起。
label 为选项组规定描述。
<option> 常见的属性：
value：指定送往服务器的选项值
selected：只有一个值--selected 默认选项
<keygen> 定义了表单的密钥对生成器字段
form 所属的表单名称
name 名称
keytype 使用的加密算法
rsa 默认的算法
dsa
es
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form name="biaoge" action="/return/" method="get"> 请选择语言: <br/><br/><input type="radio" name="language" id="jtzw" value="chinese"/><label for="jtzw">简体中文</label><br/><br/> <input type="radio" name="language" value="english" id="eng"/><label for="eng">English</label><br/><br/> 请选择熟悉的编程语言:<br/><br/> <fieldset> <legend>编程语言</legend> <input type="checkbox" name="python" />python <input type="checkbox" name="c" />c <input type="checkbox" name="swift" />swift<br/><br/> </fieldset><br/> 请选择地区： <select name="district"> <optgroup label="China"> <option value="shandong">山东</option> <option value="zhejiang" selected="selected">浙江</option> <option value="guangdong">广东</option> </optgroup> <optgroup label="USA"> <option value="ny">纽约</option> <option value="lsj">洛杉矶</option> </optgroup> </select><br/><br/> 请选择颜色:<input type="color"><br/><br/> name:<input type="text" name="name" value="slyoyo"/> password:<input type="password" name="passwd" value="hahaha"/> <input type="submit" value="login"
扫一扫
1815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
