标签：book font mon one name ide kill legend form表单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title></head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.cnblogs.com/xiaoqianbook/">小钱</a> </body> </html>
注释： <!-- 注释的内容 -->
<meta http-equiv="Refresh" content="3"><!-默认3秒刷新页面->
<meta http-equiv="Refresh" content="3;url=http://www.cnblogs.com/xiaoqianbook/"><!-默认3秒刷新页面跳转->
<meta name="keyword" content="小钱,python">
<link rel="shortcut icon" href="图标的地址">
<meta http-equiv="X-UA-Compatible" content="IE=IE11;IE=IE8;" />
标签分类:
自闭合标签
<meta charset="UTF-8">
主动闭合标签
<title>小钱</title>
所有标签分为：
块级标签： div（白板），H系列（加大加粗），p标签（段落和段落之间有间距）
行内标签： span（白板）
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
标签之间可以嵌套
body标签
空格
> <添加特殊字符< 相当于 < ,> 相当于 >
<a href="http://www.cnblogs.com/xiaoqianbook/">小钱<a></a>
p标签，段落
br标签，换行
input type=‘text‘ 文本
input type=‘password‘ 密码
input type=‘submit‘ 提交按钮
input type=‘button‘ 按钮
input type=‘radio‘ 单选框 checked="checked" 默认选中 name属性（name相同则互斥）
input type=‘checkbox‘ - 复选框 checked="checked"，name属性（批量获取数据）
input type=‘file‘ 上传文件 依赖form表单的一个属性 enctype="multipart/form-data"
input type=‘rest‘ 重置
<textarea >默认值</textarea> 文本域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form enctype="multipart/form-data"> <div> <textarea name="meno" >asdfasdf</textarea> <select name="city" size="10" multiple="multiple"> <option value="1">北京</option> <option value="2">上海</option> <option value="3" selected="selected">南京</option> <option value="4">成都</option> </select> <input type="text" name="user" /> <p>请选择性别：</p> 男：<input type="radio" name="gender" value="1" /> 女：<input type="radio" name="gender" value="2" checked="checked"/> Alex：<input type="radio" name="gender" value="3"/> <p>爱好</p> 篮球：<input type="checkbox" name="favor" value="1" /> 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 皮球：<input type="checkbox" name="favor" value="3" /> 台球：<input type="checkbox" name="favor" value="4" checked="checked"/> 网球：<input type="checkbox" name="favor" value="5" /> <p>技能</p> 学习：<input type="checkbox" name="skill" checked="checked" /> 写字：<input type="checkbox" name="skill"/> <p>上传文件</p> <input type="file" name="fname"/> </div> <input type="submit" value="提交" /> <input type="reset" value="重置" /> </form> </body> </html>
跳转，锚
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="#i4">第四章</a> <div id="i1" style="height:600px;">第一章的内容</div> <div id="i2" style="height:600px;">第二章的内容</div> <div id="i3" style="height:600px;">第三章的内容</div> <div id="i4" style="height:600px;">第四章的内容</div> </body> </html>
src 图片地址
alt 无法加载显示
title 图片说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="http://www.cnblogs.com/xiaoqianbook/"> <img src="1.png" alt="美女" title="大美女" height="100px" width="100px"> </a> </body> </html>
ul 无序列表
li
ol 有序列表
li
dl 列表分层
dt
dd
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>小猫</li> <li>小狗</li> <li>小猪</li> </ul> <ol> <li>小猫</li> <li>小狗</li> <li>小猪</li> </ol> <dl> <dt>动物</dt> <dd>小猫</dd> <dt>植物</dt> <dd>小花</dd> </dl> </body> </html>
table标签
thead 表头
tr 行
th 列
tbody 表主体
tr 行
td 列
colspan 去行
rowspan 去列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>表头1</th> <th>表头1</th> <th>表头1</th> <th>表头1</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="3">1</td> </tr> <tr> <td rowspan="2">1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> </tbody> </table> </body> </html>
label 用于点击文件，使得关联的标签获取光标
fieldset
egend
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <fieldset> <legend>登陆</legend> <label for = "username">用户名：</label> <input id="username" type="text" name="user"> <br> <label for = "pwd">用户名：</label> <input id="pwd" type="password" name="pwd"> </fieldset> </body> </html>
div{ background-color:red; }
<div > </div>
.bd{ background-color:red; }
<div class=‘bd‘> </div>
#idselect{ background-color:red; }
<div id=‘idselect‘ > </div>
#idselect p{ background-color:red; }
<div id=‘idselect‘ >
<p> </p>
</div>
input,div,p{ background-color:red; }
input[type=‘text‘]{ width:100px; height:200px; }
优先级，标签上style优先，编写顺序，就近原则
css样式写在commons.css文件中
<link rel="stylesheet" href="commons.css" />
/* 注释的内容*/
height 高度 百分比
width 宽度 像素，百分比
text-align:ceter 水平方向居中
line-height 垂直方向根据标签高度
color 字体颜色
font-size 字体大小
font-weight 字体加粗
让标签浮起来，块级标签也可以堆叠
清除悬浮<div style="clear: both;"></div>
display: none; -- 让标签消失
display: inline; 块级标签变行内标签
display: block;行内标签变快级标签
display: inline-block; 块级标签和行内标签都包含
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
标签：book font mon one name ide kill legend form表单
原文地址：https://www.cnblogs.com/xiaoqianbook/p/9066596.html
