1.DOCTYPE解析
三种解析模式:
IE6,7准标准模式(兼容性问题,html5和CSS3 不支持)
标准模式
混杂模式(非标准)
2.HTML 链接
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:
<a href="http://www.w3school.com.cn">This is a link</a>
图片作为链接
<a href="../example/html/lastpage.html">
<img border="0" src="../i/eg_buttonnext.gif" />
</a>
3.小写标签
HTML 提示:使用小写标签
HTML 标签对大小写不敏感:<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
W3School 使用的是小写标签,因为万维网联盟(W3C)在 HTML 4 中推荐使用小写,而在未来 (X)HTML 版本中强制使用小写
4.关闭空元素
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法,HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的,但使用 <br /> 其实是更长远的保障
双击打开的html都是混杂模式,只有经过webstorm这类打开的才是标准模式
5.head部分和body部分
head可以写:引入文件,作者关键字
body :所有标签都要写到body里边
6.HTML基本语法
<p> </p>
有开始标签和结束标签,成对出现,有一些只有一个/,/:结束符
只要软件没有报错都是可以的,有些没有/,空标签
样式写在开始标签里边
简写方法,div 加tab键联想
注释:Ctrl + /
<!-- -->
所有不要的代码,直接注释代码,可能会把配对的标签删除
有下划线的都是在报错
所有标签和元素都必须小写,所有属性用""扩起来,里边嵌套用''
所有标签分为块级元素和行级元素。
块级元素和行内元素:
☆块级元素:可以独占一行,具有一定宽高,和内容无关 div,p,h1-6,dieldset
☆行级元素:不能设置高宽,宽高与内容相关 input,span,strong,a,img
空格: 
<em>斜体</em>
<b>加粗</b>
<strong>加粗</strong>
在样式里边设置:
font-weight: bold;
换行:<br/><br>
分割线:<hr />
必须用符号写特殊字符,不然样式可能不对
title:
mata:描述
7.语义化
比如标题,段落,head,foot,等这些就是语义化,见名知意
在没有css的情况下可以呈现出良好的内容结构和代码结构,
优化搜索引擎的搜索,便于网络爬虫跟多的获取优先资源
具有可读性,便于开发和维护
遵循w3c的标准,减少差异性
8.<div> 可定义文档中的分区或节(division/section)。
不管什么都可以用div标签
div样式直接为一排,没有显示出想要的
<div>
5
+6
-----
11
</div>
<pre>样式按照写的样式显示
<pre>
5
+6
-----
11
</pre>
①字体大小,边框,高宽设置
<span style=" 100px;height: 100px;border: 1px solid red;font-size:100px">我是格一个span</span>
②设置字体下划线和删除线
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>
<p style="color: red ;font-size: 30px" ><ins>会员注册 </ins></p>
<div style=" 500px;height: 500px;border: 1px solid red">我是一个盒子</div>
<strong>我是一个srtong</strong>
③单独设置某些字体的样式,用span
<p><span style="color: orangered">*</span> <b>基本个人信息</b>
(<span style="color: orangered">*</span>为必填项)</p>
9.锚点:(回到顶部/底部)
①创建锚点 <a herf = "" name = >
②指向锚点 <a herf = "#+名字">
缺陷:会刷新页面
10.无序列表
<ul>
<li>
11.有序列表
<
ol>
<li>
自定义列表
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
导航全部是用ul li做的
12.表格:
table
tr 行
td列
th列标题
caption 表格标题
rowspan = "2" 行合并,合并二行和三行。。
colspan = "2" 列合并 合并一行的连续几个
cellspacing="2" 外边框 单元格间距(Cell spacing)
cellpadding="2" 内13:54 2016/4/18 单元格边距(Cell padding)
align 对其方式,right ,center,lift
style="border-collapse:collapse" 单边框
thead
tbody
tfoot
内边距:cellpadding cellspacing
13.form表单
input type = ""
type 的值:
text:
password:
reset:
button:这里不能设置高宽
<input type="button" value="Hello world!">
checkbox:
placholder:描述输入域所期待的值
date:日历插件
number:数字插件
file:选择文件
image
color
hidden
submit
reset
email
url
search
readonly="readonly"
placeholder="请输入密码" 在输入框里边灰色提示
<input type="submit">自带提交按钮
用户名:<input class="username" id="username1" name="username2" type="text">
class:常用于HTML,CSS
id:常用于JS
name:常用于共后台操作
id唯一的,class可以不唯一
<form 表单 action="处理地址" method ="get/post" name="">
name 在后台要用到
METHOD="post" ="get"
get:显示,速度快,安全性低
post:不显示在地址上,速度慢,安全性高(封装,加密)
14.button 按钮
可以设置大小
<button style=" 50px;height: 30px;">按钮</button>
15.textarea 文本域
row:行
col:列
16.radio单选
<div>
<input type="radio" name = "sex">男
<input type="radio" name = "sex">女
</div>
17.checkbox多选,
<input type="checkbox">多选
18.下拉列表 select,option,
<select multiple="multiple">
<option value="sichuan" selected="selected">川菜</option>
<option value="guangdong">粤菜</option>
<option value="beifang">北方菜</option>
<option value="shanghai">上海菜</option>
<option value="west" >西餐</option>
<option value="thailand">泰国菜</option>
</select>
multiple="multiple"设置是否只显示一页
selected="selected"设置选中行
19.filedset,带标题的框
<div>
<fieldset>
<legend>标题</legend>
<p>男 <input name="sex" type="radio"></p>
<p>女 <input name="sex" type="radio"></p>
</fieldset>
</div>
20.label和input配合使用
for里边写相关的表单的id
扩大了作用域
<div>
<input type="radio" id="man" name="sex">
<label for="man">男</label>
<input type="radio" id="nv" name="sex">
<label for="nv">女</label>
</div>
21.视频
<video src="冰河世纪.mp4" controls = "controls" autoplay></video>
controls 控件
autoplay 自动播放
loop:播放完后循环播放
22.音频
audio src="冰河世纪.mp4" controls = "controls" autoplay></video>
controls 控件
autoplay 自动播放
loop:播放完后循环播放
23.盒模型:
一切网页皆为框:
margin:外边距,边框以外的,作用:几个盒子间的间距。有正值和负值
border:边框:
padding:内边距,没有负值
content:内容
谷歌浏览器内部调试,或者看源代码:右键审查元素,检查:F12
JS部分和CSS文件有可能看不到,打包或者加密看不到
其他基本都能看到。模仿网页可以用审查元素或者网页另存为
网页大小:最小一般为16px,火狐除外
查错:在谷歌浏览器里边,调试看结果
一般测试的浏览器:谷歌,火狐,IE可以不测试