HTML
前提简述
以下内容纯属个人总结，如有错误，敬请谅解
做网站的流程
简单的可以分为以下步骤
买域名 -> 租用空间->网站建设->网站推广->网站维护
网站建设分为：确定网站素材、搜索资料、规划网站、制作页面
什么是w3c标准
简单的来说分为以下几个部分 w3c制定了结构和表现的规则，ECMA指定了行为的规则
* 结构 结构就是HTML、XHTML、XML语法
* 表现 表现即为css层叠样式表
* 行为 行为即是DOM ECMAScript JavaScript标准
WHATWG 是一个推动HTML5发展的组织，由（opera，Mozilla基金会，苹果等浏览器厂商组建）
HTML标签
html概念
HTML指的是超文本标记语言(hyper text markup language)
XHTML指的是可拓展超文本标记语言，语法规则比HTML更为严格
HTML标签
文档类型声明
1.XHTML1.1
语法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
2.XHTML 1.0 Frameset
语法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
3.XHTML 1.0 Transitional
语法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4.XHTML 1.0 Strict
语法：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
5.HTML 4.01 Frameset
语法：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
6.HTML 4.01 Strict
语法：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
7.HTML 5
语法：<!DOCTYPE html>
<html></html>根标签
html标签有一个lang属性，值为"en"会提示浏览器此网页为英文网站，当浏览器装有翻译
插件时，会提示翻译此网站，所以当编写的网站为中文网站时，可以选择不写lang属性
值，或者将属性值修改为"zh-cn",代表此网站是中文
<meta/>标签用法 它是一个单标签
1.标签可以用来设置禁止用户或者浏览器自动缩放窗口
语法：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
2.设置页面的字符编码
语法：<meta charset="utf-8"/>
国际通用编码为utf-8，都可以识别，如果不是utf-8编码可是，中文网站可能会乱码
<title></title>标签
用来设置网页选项卡标签名，类似于打开百度是，网站上方显示的“百度一下！你就知道”
此标签对浏览器友好，利于网站后期的SEO优化
<link/>标签
1.link标签是一个单标签，可以用来导入css外部样式表
语法：<link rel="stylesheet" type="text/css" href="css文件路径"/>
2.用来导入title标题前面的小图标
语法：<link rel="shortcut icon" type="image/x-icon" href="小图标的路径"/>
一般网站的title前面的小图片，在网址后面加/favicon.ico可以跳转到小图标
<style></style>样式标签
1.用来编写网页内部样式表
语法：<style type="text/css"></style>
在HTML5中支持直接写<style></style>
<body></body>内容主题标签
所有的需要在网页中显示的内容都必须写在body标签中
*注意
使用之前body有一个默认的外边距，在每个浏览器中产生的默认的外边距大小都不一样
<div></div>标签
div是一个块级元素，通常作为盒子使用，所有有之前的div+css布局说法，基本上所有的
网站可以只用div+css搭建出来
1.div是一个块级元素，所以它会独占一整行
2.div是一个干净的块级元素，他没有默认的margin和padding值
<h1>~</h6>标签
1.<h1>~<h6>是标题标签,是一个双标签，是一个块级元素，有默认的字体粗细以及字体大小
2.有默认的margin值，每个游览器默认的大小不一定
3.<h1>~<h3>标签对浏览器友好，利于后期SEO优化
4.<h1>标签一般在一个网页中只出现一次，用来包裹网站logo,表示非常重要
5.<h2>标签在一个网页中使用次数最多三次，次于logo重要性的使用
6.<h3>标签在网页中可以重复使用
<p></p> 标签
1.<p>标签是段落标签，且是一个双标签，是一个块级元素
2.有默认的margin值，且每个浏览器默认的大小不一致
<br> 标签
1.<br>标签是强制换行标签，是一个单标签
2.html5的写法直接<br>，但是之前的版本会写<br/>代表这个标签结束
<hr> 标签
1.<hr>标签是水平分割线，是一个单标签
2.html5的写法直接<hr>，但是之前的版本会写<hr/>代表这个标签结束
<img/> 标签
1.<img/>标签是一个图片标签，用来引入图片，是一个行内块元素，是一个单标签
2.属性
* src 用来设置需要引入的图片的路径(可以写相对路径，也可以写绝对路径，实际开发
中一般使用相对路径来引入图片)
* alt 设置alt属性以后，当图片的路径有误，或者图片加载不出来的时候，就会显示alt
里面的文字内容，提示用户这个地方是一个什么东西
*title 设置title属性以后，当用户浏览到这张图片的时候，鼠标悬停在图片上的时候，会
显示title属性值里面的内容
3.当编写的网页需要兼容ie的时候，需加上图片样式border：0；在ie9以下的浏览器中，
图片会有一个自带的border蓝色边框
4.由于<img/>标签是一个行内块元素，所有当在盒子中插入<img/>标签引入图片的时候，
会把父级元素撑大几像素，需给img设置vertical-align:top;来解决
<a></a> 标签
1.<a>标签是一个链接标签，一个行内元素，是一个双标签
2.属性
* href 设置链接跳转的域名地址
* title 鼠标悬停在此链接标签上显示title内容
* target 此属性有两个常用值，用来设置跳转页面打开方式
>>"_blank"在新窗口中打开
>>"_self"在当前窗口中打开（默认值）
3.一般用来做链接跳转
例：跳转到百度 <a href="http://www.baidu.com"></a>
4.可以用来做锚点定位，给盒子设置一个ID属性名，将<a>标签的href设置为"#ID名"，即
可点击此<a>标签调到此ID属性盒子
例：<div id="a"></div>
<a href="#a"></a>
5.<a>标签是所有标签中的一个特例，此标签里面可以包含块级标签，且自带下划线
6.<a>标签不可以继承父元素的颜色，需要继承需要给<a>标签添加css样式"color: inherit;"
其他行内标签
1.加粗标签
<b></b>
<strong></strong> 比b标签更具有语义化，起强调作用
2.倾斜标签
<i></i> 一般i标签用来做字体图标
<em></em> 比i标签更具有语义化，起强调作用
3.下划线标签
<u></u>
<ins></ins> 比u标签更具有语义化，起强调作用
4.删除线标签
<s></s>
<del></del> 比<s>标签 更具有语义化，起强调作用
5.上角标标签
<sup></sup>
6.下角标标签
<sub></sub>
7.span标签
<table></table> 标签
1.table是表格标签，且是一个怪异盒子模型，一般配合<tr><td>标签使用
语法：<table>
<tr>
<td></td>
</tr>
</table>
2.td有默认的padding值
3.属性
* border 定义表格的边框
* width 定义表格的宽度
* height 定义表格的高度
* bgcolor 定义表格的背景颜色
* bordercolor 定义表格的边框颜色
* cellspacing 单元格和单元格之间的距离
* cellpadding 单元格和内容之间的距离
* colspan 合并列单元格
* rowspan 合并行单元格
* align="center" 表格在网页中居中，(tr,td)是内容居中
* border-collapse:collapse; 表格边框合并
* table-layout:fiexd； 固定表格宽度
注意： 三个标签必须一起使用
列表标签
*有序列表 ol>li
- ol有默认的margin和padding
- 会产生一个有序号的列表
*无序列表 ul>li
- ul有默认的margin和padding
- 会产生一个带有黑点前缀的列表
*自定义列表 dl>dt+dd
- dl和dd有一个默认的margin值
- 一般dd是用来解释dt里面的内容的
去除列表自带的序号已经样式黑点，给列表添加list-style:none;属性
form表单
1.form属性有个action 用来设置表单提交地址
2.<input/>标签，是一个单标签
* 属性 type="value";
value
- text 代表文本框,placeholder可以设置默认的提示信息
- password 代表密码框
- file 文件上传按钮
- radio 单选按钮，必须加name属性值，且同一组name属性值相同
- checkbox 复选按钮
- submit 提交按钮
- reset 重置按钮
3.<textarea></textarea>文本域标签
4.<button></botton> 按钮
5.<select></select>下拉菜单，需配合<option></option>使用
6.<label for="id名"></label>绑定单选按钮或者复选按钮，可以修改按钮样式
代码标签嵌套原则规则
1.块级标签嵌套行内块标签已经行内标签
2.单标签不能嵌套元素，例如：<a>标签
3.<div>可以嵌套所有的标签，包括<div>自己
4.<h1>~<h6>、<p>标签只能嵌套行内块标签和行内标签
5.行内块标签(行内标签)可以嵌套行内块标签(行内标签)
6.<a></a>标签可以嵌套块级标签(嵌套例外)