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  标签内的边距