标签：
Html基础知识点
1.在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障
2.HTML 提示：使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写
3.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>
4.DOCTYPE解析
三种解析模式：
IE6,7准标准模式（兼容性问题，html5和CSS3 不支持）
标准模式
混杂模式（非标准）
双击打开的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.盒模型：
一切网页皆为框：
margin：外边距，边框以外的，作用：几个盒子间的间距。有正值和负值
border：边框：
padding：内边距，没有负值
content：内容
谷歌浏览器内部调试，或者看源代码：右键审查元素，检查：F12
JS部分和CSS文件有可能看不到，打包或者加密看不到
其他基本都能看到。模仿网页可以用审查元素或者网页另存为
网页大小：最小一般为16px,火狐除外
查错：在谷歌浏览器里边，调试看结果
一般测试的浏览器：谷歌，火狐，IE可以不测试
8.<div> 可定义文档中的分区或节（division/section）。
不管什么都可以用div标签
div样式直接为一排，没有显示出想要的
<div>
5
+6
-----
11
</div>
<pre>样式按照写的样式显示
<pre>
5
+6
-----
11
</pre>
①字体大小，边框，高宽设置
<span style="width: 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="width: 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="width: 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.语意话
比如标题，段落，head，foot,等这些就是语义化，见名知意
在没有css的情况下可以呈现出良好的内容结构和代码结构，
优化搜索引擎的搜索，便于网络爬虫跟多的获取优先资源
具有可读性，便于开发和维护
遵循w3c的标准，减少差异性
在工程路径下分为三个文件夹html,css,img。分别存放相对应的文件
html里边的样式外联css里边的样式
html的结构：
在body部分分为 头，内容，脚，写上注释
<div class="qiu">
<header></header>
<!--头结束-->
<div class="content"></div>
<!--内容结束-->
<footer></footer>
</div>
CSS样式格式
/********************************整体******************************/
.qiu{
width: 1000px;
background: rebeccapurple;
margin: 0 auto;
}
/********************************头******************************/
header{
height: 100px;
background: scroll;
}
/********************************内容******************************/
.content{
height: 500px;
background: green;
}
/***************标题1样式***************/
.div1{
}
/********************************整体******************************/
footer{
height: 300px;
background: bisque;
}
标签：
原文地址：http://www.cnblogs.com/chenyuanqiu2008/p/5463981.html
