html
百度截取的旁边的页面描述 SEO search engine optimization 搜索引擎优化
<meta name="Dscription" content=""/>
<meta name="keywords" content="网易,百度"/> 关键词 告诉搜索引擎这个网页是干什么的，提高搜索正确性
UTF-8里面存储一个汉字3个字节。而gb2312中存储一个汉字2个字节。
保存大小： UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
总结：
UTF-8 字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
gb2312字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
我们用meta标签可以声明当前这个html文档的字库，但是一定要和保存的类型一样，否则乱码！（重点）
空白折叠：代码之间无论怎么空格、换行 都只会是一个空格。
标签严格封闭
h标签没有嵌套关系 h1-h6
标签分为：容器级和文本级。 容器级里面什么都可以放 文本级只能放文字图片表单元素。P
能插入图片的类型：jpg jpeg bmp gift 不能插入的：psd ao
<img src="地址" alt="代替文字"/> 目前学习自封闭标签只有五个以内
src是img标签的属性
../../image/1.jpg表示上两级文件夹中的image文件夹里的图片
超级链接
<a href="1.html" title="悬停文本" target="_blank">结婚照</a>
_blank设置在新的窗口打开
页面内锚点
<a href="#锚点名">点击查看我的作品</a>
<a name="锚点名">我的作品</a>一个A标签有name或id属性那么就是一个锚点
相当于 1.html#锚点名
跨页面锚点
<a href="1.html#锚点名">查看××</a>
<a id="锚点名">××</a>
#表示默认页面最顶端
文本级里可以放文本级
<a href=""><img src="" alt="" /></a>图片链接
css
<ul> 无序列表(unordered list) 第一个组标签 要么不写要么写一组 li不能单独存在只能在ul里，ul里下一级也只能是li
<li>这里什么都可以放<li>
<ul> 浏览器会默认给无序列表小圆点的“先导符号”
但是ul的作用并不是给文字加小圆点的，而是增加无序列表的语义。
<ol> 有序列表（ordered list）使用的不多 如果表达顺序 一般手动写上序号
<li>这里什么都可以放<li>
<ol> 浏览器会给有序列表加上序号（1.）
<dl> 定义列表 definition list
<dt>北京<dt> definition title
<dd>描述北京的内容<dd> definition description
<dd><a href="*"> </a><dd> 可以用多个dd描述北京
<dl> dd解释最近的一个dt
div and span×××××××××××××××
div(划分）和span（范围） 都是非常重要的盒子
但是span只是一个文本级标签
常用div划分一大块 最重要的布局标签
为了标记div一般为了标识加上一个class
<div class="header">
<div class="logo"> <div>
<div class="nav"> <div>
</div>
<div class="coentent">
<div class="guanggao"></div>
<div classs="dongxi"></div>
</div>
<div class="footer"></div>
.logo{
float: left;
width:200px;
height: 60px;
background-color:red;}
.nav{
float: right;
width:600px;
height: 60px;
background-color:blue;}
.guanggao{
float: left;
width: 250px;
height 400px;
background-color: darkblue;}
.dongxi{
float: ringht;
width: 650px;
height 400px;
background-color: skyarkblue;}
所以我们一般称这种模式为“div+css”
div负责布局，负责结构，负责分块。
css负责样式
表单<form></form>
表单是收集用户信息，让用户填写选择的。
<div>
<h3>欢迎注册本站<h3>
<form action="">所有的表单内容都要写在form中
<p>请输入你的姓名
<input type="text"/>
</p>
</form>
<div>
form标签里有action属性和method属性，在 ajax会提到
action属性表示表单将会提交到哪里。
method属性表示用什么http方法提交，有get、post两种方法。
文本框 text
<input type="text" value=“文本框中默认有的值”/>
input 表示输入，指的是这是一个“出入小部件”
type 表示类型
text 标识文本 指的是这是一个文本的输入小部件
password 密码狂类型
value="文本框中默认有的值"
这是一个自封闭的标签
目前为止学到的自封闭标签有：
<meta name="Keywords" content=""/>
<img src="" alt=""/>
<input type="text"/>
密码框 password
<input type="password"/>
单选按钮 radio 非常像收音机 按下一个另外一个取消掉
<p>请选择你性别：
<input tpye="radio" name="xingbie"/>男 注意name属性必须相同且必须写否则全部选择上
<input tpye="radio" name="xingbie"/>女
</P>
重点：单选按钮天生不能互斥的，如果想要互斥必须加上一个相同的name属性。
复选框（多选） chekbox
<p>请选择你的爱好：
<input type="chekbox"/>睡觉
<input type="chekbox"/>学习
</p>
虽然name写不写都行，好习惯加上name标识。
选择颜色 color
<p>请选择你喜欢的颜色：
<input type="color"/>
</p>
选择日期 date
<p>选择你的生日：
<input type="date"/>
</P>
下拉列表 select option
<p>请选择你的籍贯
<select>
<option>北京</option>
<option>河北</option>
</select>
多行文本框（文本域）
<textarea cols="30" rows="10"></textarea>
cols 列 rows 行
这个标签是个标签对 对里不用写文字，如果写了就是默认的文字
三种按钮
<input type="button" value="按钮上的文字"/>
</p>
<p>提交按钮
<input type="submit" value="按钮上的文字"/>不写value 默认显示提交
</p>
这个按钮点击是真的能提交。数据的保持读取是后端工程的问题。
这个表单会提交到form标签中的action 属性中的地址中去。
<p>
重置按钮
<input type="reset"/>
</p>
重置form中的所有表单
html5中会有更多
label标签 解决点名字也可以选择选项
<input tpye="radio" name="xingbie" id="nan"/><label for="nan">男</label>
<input tpye="radio" name="xingbie" id="nv"/><label for ="nv">女</label>
本质上讲男女和input元素没有关系
label包裹住文本框
其他同理
默认选择
<input type="radio" name="xingbie" checked="checked"/>男 默认选择男
注释字符实体
”ctrl“+/ 本行成为注释 注释<h1> 注释成<h1>;
&+lt;=<
&+qt;“=>
&+copy;=©
&+nbst表示空格“ &nbst;&nbst;&nbst;&nbst;表示四个空格
HTML废弃标签介绍
HTML一开始连样式也包办
1. font <font siez="7" color="red">haha</font> 2004年之前
2. <b> <u> <i> <del> 加粗 下划线 倾斜 删除线 都不用 现在都用作css钩子使用 而不是原意
3. <hr /> 一条水平线 <em>强调<em> <br /> 换行不另外起一个段落 进行换行 用P不用
标准的div+css 页面，用的标签种类很少：
div p h1 span a img ul dl input
网友评论