HTML\CSS

HTML基本结构
<!DOCTYPE html>
<html lang="en">

</html>

一般标签
<!DOCTYPE html> 声明标签写在顶行声明这是一个H5页面
<html lang="zh-CN"> </html> 告诉浏览器html文档的范围包含head 和body
<head> </head> 头标签定义网页头信息编码格式关键字页面简介标题
<meta charset="utf-8"> 定义页面编码格式 h5中单个出现 xhtml 必须</meta>关闭
<title> </title> 标题标签网页标题
<body> </body> body标签网页显示的主体内容
topmargin 属性距离浏览器窗口顶的距离输入数值
<h1> </h1> 标题标签设置章节让SEO爬虫识别页面结构自带大小加粗样式
<p> </p> 段落标签代表一个段落多个p之间带间距样式
<br /> 强制换行标签让内容强制换行

实体字符
空格
> 大于号
< 小于号

块标签
没有具体语义主要配合样式使用
<div> </div> 块元素表示一块内容一个段落但是多个DIV之间没有间距
<span> </span> 行内元素表示一行中的一小段内容没有任何样式

带样式的标签
<i> </i> 行内元素表示专业词汇自带斜体样式
<em> </em> 行内元素表示语气中的强调词自带斜体样式
<b> </b> 行内元素表示关键字或者产品名称自带加粗样式
<strong> </strong> 行内元素表示非常重要的内容一般直接包括一整段内容自带加粗样式

图片标签
<img /> 在网页上定义一个图片单个出现
src 属性定义图片的地址
alt 属性定义图片的描述 SEO爬虫对图片的alt进行读取

连接标签
<a> </a> 在网页上定义一个连接地址
<a>显示的内容</a> 标签显示的内容
href 属性定义跳转的地址
title 属性鼠标悬停时提示的文字
target 属性定义打开连接时的方式
target="_self" 缺省值在本窗口打开页面
target="_blank" 在新窗口打开页面

<a href="#"> </a> 点击跳转到页面顶部
<a href="跳转地址" title="连接描述"><img src="图片地址" alt="图片描述"></a> 点击图片跳转到连接

列表标签
有序列表
<ol></ol> 有序列表默认会给有序列表中的li项目编号
<ol>
<li></li>
</ol>
无序列表
<ul></ul> 无序列表默认会给无序列表中的li项目前加点
<ul>
<li></li>
</ul>
定义列表
<dl></dl> 定义列表定义列表中dt代表项目同级dd代表对这个dt的描述默认dd带首行缩进
<dl>
<dt><dt>
<dd></dd>
</dl>

表格标签
<table></table> 创建一个表格标签
border 属性定义表格的边框设置数值
width 属性设置表宽度设置数值
height 属性设置表高度设置数值
align 属性设置表格相对浏览器或外部table的位置 left|center|right
cellpadding 属性设置单元格内容与边框的距离设置数值
cellspacing 属性定义单元格与单元格之间的距离设置数值
<tr></tr> 创建表格中的一行
<th></th> 创建一行中的一格但是表示表头单元格自带样式居中粗体
<td></td> 创建一行中的一格普通单元格
width 属性设置表宽度设置数值或百分比
height 属性设置表高度设置数值或百分比
align 属性设置单元格内容水平对齐方式 left|center|right
valign 属性设置单元格内容垂直对齐方式 top|middle|bottom
colspan 属性设置单元格水平合并设置数值
rowspan 属性设置单元格垂直合并设置数值

表单
<form></form> 定义整体表单区域

action 属性定义表单数据提交地址
method 属性定义表单提交方式 get小于1024 post大文件

<label></label> 为表单元素定义文字标注
<input type="" name="" value=""> 定义通用的表单元素

type 属性定义表单元素的值值不同功能不同
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义文件上传
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="image" 定义图片作为提交按钮 src属性定义图片地址
- type="hidden" 定义隐藏区域用来存储值或者当复选框选择某项时通过js删除hidden属性来显示
name 属性定义表单元素的名称提交表单时的键名
- type为radio单选性别时 name 设置为gender 可以排他 value 设置为男或女
value 属性定义表单内默认显示的内容
- 当type="button", "reset", "submit" 定义按钮上的显示的文本
- 当type="text", "password", "hidden" 定义输入字段的初始值
- 当type="checkbox", "radio", "image" 定义与输入相关联的值

<textarea>默认显示内容</textarea> 多行文本输入框
<select></select> 定义下拉菜单元素
<option></option> 下拉菜单选项

CSS
css 文本设置
color:red; 设置颜色
font-size:16px; 设置字体大小默认16px
font-family:'微软雅黑'; 设置文字字体
font-style:'normal'; 设置文字不倾斜 'italic' 设置文字倾斜
font-weight:bold; 设置文字是否加粗 normal 文字不加粗
line-height:24px; 设置文字高度

text-decoration:none; 将文字下划线去掉
text-indent:24px 设置文字首行缩进
text-align:center; 设置文字水平居中

css 颜色表示
颜色名表示如 red
rgb表示如 rgb(255,0,0)
rgba表示如 rgba(255,0,0,0.7)
16进制如 #ff0000

css 选择器
*{} 影响所有标签
标签选择器
div{}
对应所有应用<div>标签的项目

id选择器
#box{}
对应所有<div id="box">id等于box的项目

类选择器
.red{}
对应所有<div class="red">class等于red的项目

层级选择器
.box .span{}
对应<div class="box"><em class="span">class等于box下的class等于span的项目

组选择器
div, span, .red{}
对应所有<div> <span>和<div class=red>的项目
并且组选择器可以在下方覆盖重写或添加

伪类及伪类选择器
.link:hover{}
设置一个伪类当<div class=link>的连接被鼠标触及时的显示效果
.box:before{content:"."}
设置一个伪元素对应<div class=box>的内容前面添加一个点并且这个.无法被选中
.box:after{content:"."}
设置一个伪元素对应<div class=box>的内容后面添加一个点并且这个.无法被选中

HTML\CSS

推荐阅读更多精彩内容