浏览器内核

• Trident(IE内核)：前缀名-ms-
• Gecko(Firefox):前缀名-moz-
• Webkit(safari):-webkit-
• Opera:-o-
• 谷歌浏览器:-webkit-

seo优化

• SEO，即Search Engine Optimization， 搜索引擎优化，是一种通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术。

  搜索引擎采用易于被搜索引用的手段，对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，提高网站的销售能力和宣传能力，从而提升网站的品牌效应。

  合理的title、description、keywords

  搜索对着三项的权重逐个减小，title值强调终点即可；description把页面内容高度概括，不可过分堆砌关键字；keywords例举出重要关键字。

  1.title

  title，就是浏览器上显示的那些内容，不仅用户能看到，也能被搜索引擎检索到(搜索引擎在抓取网页时，最先读取的就是网页标题，所以title是否正确设置极其重要)，title一般不超过80个字符，而且词语间要用英文"-"隔开,因为计算机只对英文的敏感性较高，对汉语的敏感性不高。

  用法:

  （1） 首页title写法，一般是"网站名称-主关键字词或一句含有主关键字的描述"。一般网站名称放在后面，因为搜索引擎给予标题最前面的词比后面高。比如:"冰箱_变频冰箱-海尔官网”

  （2）文章页title写法，一般有3种：“文章标题-网站名称”、“内容标题-栏目名称-网站名称”、“内容标题-网站名称”。其中，“内容标题-栏目名称-网站名称”的写法最规范，它能给用户很好的提示，让用户知道他在访问哪篇文章，并且是在哪个网站的哪个栏目下。

  2.description （内容摘要）

  description是对于一个网页的简要内容概况。description一般不超过150个字符，描述内容要和页面内容相关。

  用法：

  （1）首页description写法，一般是讲首页的标题、关键字和一些特殊目的的内容融合到里面，写成简单的介绍。

  （2）文章页keywords写法，建议提取文章中的关键字。

  3.keywords（关键字）

  keywords，主要作用是告诉搜索引擎本页内容是围绕哪些词展开的。因此keywords的每个词都要能在内容中找到相应匹配，才有利于排名。keywords一般不超过3个，每个关键字不宜过长，而且词语间要用英文","隔开。尽量将重要的关键字靠前放，因为靠后的关键字排名较差，除非你占有很高的权重。

  用法:

  （1）首页keywords写法，一般是"网站名称,主要栏目名,主要关键字"

快捷键

• html:5 !+tab
• ctrl + f:查找
• ctrl + / :注释
• h${内容$}*6:标题快捷

 //声明当前页面的版本，发展过程中的版本很多
lang = 'en'//说明整个文档使用的语言，en英文;zh中文，fr法语
charset='utf-8' // 设置字符集 常见的有Unicode utf-8 GB2312 GBK(兼容GB2312) BIG5
head // 元消息 
title // 网页的标题
body // 网页主题部分

标签分类

1. 单标签：没有结束标签，单个的
2. 双标签：有开始和结束标签

1. 块元素：自己独占一行；可以设置高度，宽度和内外边距；宽度默认是100%，如果不加高度里面油没有内容，即使是块级高度此时高度为0

2. 行内元素：相邻的在一行，直接写宽度和高度没有效果，默认的宽度是本身内容的宽度；严格意义来说没有行内块元素，添加了display: line-block，添加浮动等改变了元素的性质后才称为行内块元素

   行内元素可以设置水平方向的内外边距，但不能设置垂直方向的内外边距（本身可以设置，但后面的元素不认同垂直方向的）

3. 行内块级：可以设置宽高，但不换行

规范

1. 行内不能嵌套块级，块级可以嵌套行内

2. 有几个特殊块级只能嵌套行内元素 h1~h6 p dt

   p标签不能嵌套块级，包括它自己本身，不然p嵌套的块级设置css不起作用

3. li标签和dd标签可以嵌套任何元素

4. a标签最好不要嵌套块级元素，放块级元素，但是给a转换一下模式最安全，可以嵌套行内元素，但不能嵌套a标签和input标签

5. ul和ol子元素只能是li,不能是别的元素

6. button里面不要嵌套a，不然js里面会有两个事件，还有就是button里面放img要记得给图片添加alt属性

元素的显示模式转换：一个模式的元素需要另外一个模式的特性

• display: block转换为块级元素

• display: inline转化为行内元素

• display: inline-block转换为行内块元素

  注意：中间会有空隙 原因是元素间会有空格

  解决方法

  • 写在一行 (不好看)
  • margin (不好控制)
  • 父元素的font-size设置为0 子元素的font-size在重新设置
  • 设置浮动
  • 同理img图片之间的空隙也可以这样解决

路径

• 绝对路径：网络路径和磁盘路径

• 相对路径

  ./能访问与当前文件同层级的文件或文件夹

  ../能访问当前文件上一层文件或文件夹

  注意：不要超过4层

  ../*n 能够访问当前文件夹上n层的文件或文件夹

特殊字符

 	空格
<	小于
>	大于
⊃	次方 
2¹ 只有123,没有4
©	版权符
90°	度数
®	注册商标
×	乘号
÷	除号
¥	人民币
<	小于
>	大于
«	&rlaquo;	//《》

标题标签

块级元素

~
 ...
~

会对字体进行放大和加粗的效果

注意：嵌套的时候不要放块级

段落标签

块级元素

一个段落

不会对文字进行修改

注意：嵌套的时候不要放块级

水平线标签

换行标签

div标签

块级元素

不修饰里面内容,用来布局会换行最多

span标签

行内元素

用来放文本用到最多,和普通文本一样，不会换行，不会修饰

文本修饰标签

倾斜
加粗
删除线
下划线
// --------------
倾斜
加粗
删除
下划线

区别：后者是有语义化的，h5趋向于语义化，建议使用后者，但实际效果没有变化

a超链接

行内元素

注意：a里不能放a标签

 

// 下载文件
//target="_self"就在当前的页面打开
//target="_blank"另外开一个窗口打开

• 外部链接 地址必须以http://开头

• 内部链接 内部页面的链接，直接写网页的名字

• 空链接 暂时没有连接地址，用#代替就可

• 下载连接 地址连接的是文件，是zip或是exe

• 网页元素的链接

• 锚点标签，可以迅速的定位页面的某个位置，如果没有写id名，则返回到页面顶部

  连接问本
  

base标签

可以设置整体链接打开的状态是以新窗口打开还是当前窗口打开

1. 只能应用与head标签之间
2. 网页上所有超链接打开方式
3. 网页上所有的相对路径都会拼接href里面的地址

img标签

//如果因为某种原因，图片没有正常显示，则出现alt里面的内容

注意：可以设置宽高，但不换行

表格标签

	//表格标签
			   	//行标签
			   	//行标签
				  
	//单元格标 签
				  
			  

th表头标签,文字加粗，居中显示

cellpadding:规定单元格与内容之间的空白，默认的1像素

cellsapcing:单元格边框和外层表格边框的空隙

align:center left(默认) right表格再网页中水平的排列方式

valign:middle(默认) top botm

合并单元格

跨行合并（rowspan ）：rowspan="合并单元格的个数"

跨列合并（colspan）：colspan="合并单元格的个数"

目标单元格

跨行:最上侧单元格为目标单元格，写合并代码

跨列:最左侧单元格为目标单元格，写合并代码

步骤:

1.先确定是跨行还是跨列

2.找到目标单元格,写上合并方式 = '合并单元格的数量' 比如

3.删除多余的单元格

列表

有序列表

ol和ul里面只能是li,li标签里面可以是任意标签

	//square:方形 circle:实心圆（默认）
			
刘德华 1000
			
肖战 3000
			
pink老师  100

无序列表

			
榴莲
			
香蕉
			
苹果

自定义列表

dl dt dd组合而成

dd可以嵌套任意元素

    
名词
    
名词描述
    ...

表单

表单：收集用户信息

组成：表单域，表单控件（表单元素）和提示信息三部分

from标签

表单域是一个包含表单元素的区域

from标签定义表单域，以实现用户信息的收集和传递

 
 //url表单内容提交服务地址

input输入标签

input::-webkit-input-placeholder {	// 修改input表单里的值的修改方法
    color: red;
}

name 和 value 的值属性值，主要给后台人员使用

size控制input框的宽度

type值

• text:文本框，用户可以输入任何文字

• password:用于密码框的输入,用户看不见

• radio:单选按钮 name的名字必须有同一个名字才可以多选一

• checkbox：复选框 可以实现多选

• image:和提交按钮一样，只不过是以图片形式

• checked：针对单选按钮和复选框，当页面打开时就选中

• maxlength：约束最多的字符数，少用，可以用正则表达式

• submit:表单域里面的值送到后台去

• reset：重置按钮，还原成默认状态

• button：普通按钮，不会提交数据，可以和js搭配使用

• file：文件域，获取文件信息

lable标签

放文本的地方
// for里是input里面的id
//效果：点文字男可以聚焦input

案例

 

			 用户名： 

			 密码： 

			 
			 性别：男 
			  女
			    

			 爱好：吃饭  睡觉 打豆豆 
		     

			  

			  

			  

			 选取文件： 

slect标签

下拉表达元素：节约页面空间，多个选线让用户选择

至少包含一对option标签,默认选项selected="selected",默认选中第一个

			  
				  1
				  2
				  3
			  
			  

button标签

button表示一个按钮，但是如果button放在from里面，相当于提交按钮

如果让button在from里是一个普通按钮，就要给出type属性是，属性是button

    立即注册