Html
<!-- --> Html注释
head标签内使用的标签
<meta http-equiv="Refresh" Content="3" /> 自动刷新
<meta http-equiv="Refresh" Content="3; Url=https://baidu.com" /> 自动跳转
<meta name='keywords' content="python" /> 网站匹配关键词
<meta name='description' content="python" /> 网站描述信息
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE7" />兼容IE,按指定版本顺序兼容
<link rel='shortcut icon' herf='image/favicon.ico'> 标签页图标
body标签内使用的标签
特殊符号编码
<a herf=""></a> 超链接标签 属性herf指定跳转链接 也可写成#关联标签id用作锚,target="_blank" 在新的标签页打开
<p></p> 段落标签
<br /> 换行标签
<h1></h1> 标题标签,数字代表字体大小,从1到6递减
<span></span> 行内白板标签
<div></div> 块级白板标签 属性id标记当前标签
<img src="" /> src指定图片路径 style="height:200px;width:200px" 指定图片显示大小 将它放在a标签中可以实现点击图片跳转 alt没有图片时显示该属性值 title鼠标悬停在图片上时显示该属性值
<ul></ul> 列表,内容以点排序
<ol></ol>列表,内容以数字排顺序
<li></li> 列表内容
<dl><dl>分层列表
<dt></dt>第一层内容
<dd></dd>第二层内容
<table></table>表格 border="1" 表格边框
<thead></thead>表头
<tbody></tbody>表内容
<tr></tr>表格行
<th></th>表头列
<td><td>表内容列 colspan="2"指定该列占同一行的两列位置,rowspan="2"指定该行占同一列的两行位置
<lable></lable> for="input标签的id属性值" 获取关联标签的光标
<fieldset></fieldset> 区域标签
<legend></legend> 区域标签命名
<form></form> 表单标签 提交数据 属性action 提交数据的连接,method 提交数据的方式. 数据提交方式区别,GET将输入的参数拼接到url上发送给服务端;POST将输入的参数放在http数据包的内容部分中发给服务端
<input type="text" name=""/> 单行文本输入框标签,type定义类型 服务端根据name值获取对应数据,id标记当前标签
<input type="password" name=""/>
<input type="button" value="登录"/> value指定默认值
<input type="submit" value="登录"/>
<input type="radio" name="" value=""/> 单选框,name属性值相同的之间为单选关系,服务端根据value知道用户的选择 checked ='checked'默认选择
<input type="checkbox" name="" value=""/>复选框 通过name批量获取数据 checked ='checked'默认选择
<input type="file" name=""/> 提交文件 需要form表单加上enctype="multipart/form-data"属性
<input type="reset" value="重置"/>
<textarea>默认值</textarea> 多行文本输入 属性name,默认值放在中间
<select></select> 下拉框 属性name multiple=multiple多选 size属性指定显示都少个选项
<option></option> 选项 属性value 默认selected=selected
<optgroup></optgroup> 下拉框选项分组 lable属性给分组起标题
CSS
注释 /* */
1在标签的style属性中写css样式
2在head标签内的style标签中写css样式
<style>#i1{}</style> 统一样式,当其他标签id值等于i1时就自动为该标签应用这种样式,id选择器
<style>.c1{}</style> 统一样式,当其他标签class值等于c1时就自动为该标签应用这种样式,class选择器
<style>div{}</style> 统一样式,为div标签应用这种样式,标签选择器
<style>span div{}</style> 统一样式,为span下div标签应用这种样式,层级选择器
<style>#i1,#i2,#3{}</style> 统一样式,当其他标签id值等于i1或i2或i3时就自动为该标签应用这种样式,组合选择器
<style>input[type="text"]{}</style> 统一样式,为标签名为input并且属性为type="text"的标签应用这种样式,属性选择器
3 可以专门写一个css文件,其他html引用时,在head标签下的link标签中指定属性rel="stylesheet",href="css文件路径"
优先级
style属性优先级最高,统一样式中应用的顺序越后面优先级越高
边框
border :4px dotted(solid) red dotted表示边框线为虚线,solid表示实线 red表示边框线为红色
常用样式
高度height:45px 宽度width:34px(80%) 字体大小font-size 文本水平居中text-align 垂直居中line-height:45px 字体加粗font-weight 字体颜色color
float浮动
只有相邻的块级标签可以浮动拼接,多个标签所占宽度总和不能超过100%否则无法在一行内完整拼接
<div style="width:20%;background-color:red;float:left">1</div>
<div style="width:80%;background-color:black;float:left">2</div>
display
display:inline (block) 块级标签转换行内标签,或者相反 inline-block同时具有行内标签属性又能设置高度宽度边距 none让标签消失
行内标签无法设置高度,宽度,边距
margin外边距 padding内边距
margin:0 auto 标签与外部的边距 auto让当前标签居中
padding:10 标签内的边距