HTML

   怀揣着自己的梦想开始了自己H5的学习，开了自己的博客，记录着自己的成长过程。

[meta]标签
1.charset属性，单独使用，设置文档字符集文档字符集码格式
>>>写法：<meta charset="UTF-8">
>>>常见的中文编码格式
GB-2312：国标码，简体中文
GBK:扩展的国标码，简体中文
UFT-8:万国码 Unicode码 基本兼容各国语言
2.http-equiv属性： 需配合content属性使用。主要声明浏览器如何解释编译文件
>>>写法：<meta http-equiv="属性值" content="属性值详细内容">
>>>常用属性值：Conment-Type HTML4.01之前的文档内容编码声明
refresh 网页刷新 set-Cookie设置浏览器cookie缓存
3.name属性：需配合content属性使用。主要用于给搜索引擎提供必要信息。
>>>写法：《meta name="属性值" content="属性值详细信息">
>>>重要属性值： auther 作者，声明网站作者，常用公司网址表示
keywords 网站关键字， 多个关键字，用英文逗号分隔
description 网页描述，搜索引擎显示在title下的描述内容
http-equiv和name属性，必须与content属性配合使用。前俩者只用于声明即将修改哪些属性值，
而实际的属性值内容，在content中描述

描述：[link标签]
1.作用：用于为网页连接各种文件。
2.常用属性：
rel:用于表明被连接文件与当前文件的关系。此处选icon，表明被链接图片是当前网页的icon图标
type:表明被链接文件是什么类型。可以省略。
href:表明链接文件的地址

 

[常见的块级标签]
标题标签<h1></h1>……<h6></h6>：默认加粗，H1最大，H6最小
水平线<hr/>
段落<p></p>
换行<br/>
引用<blockquote></blockquote >
预格式<pre></pre>

常见的行级标签
span（文本）
img（图片）
em（强调）
strong（强调）
q（短引用）
a（超链接）
i（倾斜）
b（加粗）.7
small（缩小字体）

[img 图片标签]
1.src属性：表示图片引用路径。
>>>常用路径写法。
相对路径：
.图片在当前文件下一层时：文件夹名/图片名img/abc.jpg
.当图片与当前文件在同一层时：图片名 src="abc.jpg"
当图片在当前文件上一层时：../图片名src="abc.jpg"
使用相对路径时，图片最外层只能放在网站根目录（图片必须在项目文件夹里）
绝对路径：写法file:///E:aaa.png.,严禁使用
网络连接：直接使用图片的网络地址，但是由于在别人服务器，不可控，所以不建议使用。

2.title：当鼠标指上时，显示的文字
3.alt：当图片无法加载时，显示的文字
4.width/height：图片的宽度高度，相当于CSS中的style="width:,height:,"
5.align:图片周围的文字相对于图片的排列方选值：top/center/bottom

[超链接]
1.href超链接的跳转地址，歇一歇网络连接，活本地HTML文件的相对路径，确定方式同img的src路径。
2.terget:设置超链接打开窗口的位置。-self自身页面打开（默认），-blank新页面打开
3.title：鼠标指上后显示的文字
4.rel:表明即将跳转的页面，与当前页面的关系；
rel="prev"即将跳转页面，是当前文档的前一篇文章
rel="next"预加载，是当前文章的后一篇文章
rel="prefetch"预加载，当前文档加载完成后，利用空余网速，预加载即将跳转的页面

for
m表单
俩个重要属性
action：表单需要提交的服务器地址
method：表单提交数据使用的方法你，get/post
>>>get和post的区别
1.get传参使用URL传递，所有参数在地址栏可见，不安全；get传参数据量有限；
2.post传参使用http请求传递，比较安全，post可以传递大量数据；
但是，get请求的传输速率要比post快。

>>>URL传参的形式：链接URL地址?name1=value1&name2=value2

2.input的常用属性：
type：设置input的输入类型
name：给input输入框起名。一般情况下，name属性必不可少。因为，传递数据时，使用name=value（输入内容）的形式传递
placehoider：输入框的提示内容。当input有默认的value或者输入值时，placehoider消失
3.input-type属性的常用属性值
text：文本输入框
password：密码输入框，输入内容默认显示小黑点
radio:单选框 z
使用radio/CheckBox时，value属性必填，提交时，提交的为value中的默认值；
>>>radio/CheckBox凭借name属性，确定是否属于同一组，name相同为同组，只能选一个
>>>使用checket=checket属性，设置默认选中项
file文件上传
>>>使用accept="类型"，设置只能上传的文件类型，image/任意类型图片
submit：提交按钮，将所有表单数据提交后台服务器
reset：重置表单数据，将表单数据恢复到默认状态
image：图形提交按钮，跟submit一样，具有表单提交功能，
>>>使用src属性，选择图片路径
button：普通按钮，没有任何用
4、属性名等于属性值的情况：
① checked="checked" 设置radio或CheckBox的默认选中项
② multiple="multiple" 设置select为多选
③ selected="selected" 设置select控件，默认选中的option选项
④ readonly="readonly" 设置textarea为只读模式，不允许编辑
⑤ disabled="disabled" 禁用控件。
>>>当input被disabled禁用时，该input的name和value将无法向后台传递
⑥ hidden="hidden"隐藏控件。等效于<input type="hidden"/>

5、【下拉选择控件 select】
① 写法：<select>
<option></option> //可以有N多个
</select>
② name属性，应该写在<select>上，所有选项只有一个name
③ multiple="multiple" 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选。一般不用。
④ option常用属性：
value="":当option没有value属性时，往后台传递的是<option></option>标签中的文字；
当option有value属性时，往后台传递的是value属性的值。
title="":鼠标指上后显示的文字。
selected="selected":默认选中。
⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组，label属性表示分组名。
selected="selected"设置selected,默认值
6、 【文本域 textarea】
① 写法：<textarea></textarea>
② 设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性，但不常用
③ readonly="readonly" 设置为只读模式，不允许编辑。
④ style="resize: none;" 设置为宽高不允许修改。
⑤ style="overflow: ;" 设置当文字超出区域时，如何处理。
>>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
>>> 常用属性值:hidden 超出区域的文字，隐藏无法显示
scroll 无论文字多少，均会显示滚动
auto 自动，根据文字多少自动决定是否显示滚动条（默认样式）
7、表格的边框与标题
<fieldset>
<legend>联系方式</legend>表格的标题
。。。N多个元素（inputelect/textarea)
</fieldset>
注：一个表单，可以有多组边框+标题

-->

<!-- [HTML5智能表单]
① H5新增input的form属性，用于指向特定form表单的id，实现input无需放在form标签中。即可通过表单进行提交
<FORM id=foo></FORM>

新增input属性：
>>>Autocomplete：自动完成功能，记忆之前输入过的内容在下次输入时，根据以前的内容，自动完成，绝大部分浏览器自动启用 俩个属性off/on 可以在<form></form>标签上设置Autocomplete，控制整张表单的自动完成开关，但可以在个别input上单独设置，覆盖form的整体设置。
Autofocus：自动获得焦点
Form：所属表单：通过rorm表单的id，指向特定表单
Required：必填。required="required",设置input必填
Pattern：验证input的模式
Placeholder：提示

 

[表格table]
表格的行<tr></tr>
表格的列<td></td>
表头列<th></th>(将tr中的td，替换成th，表示本表行为表头)
th默认加粗，且在单元格居中显示
-->
<!-- 【表格table】
表格<table></table>
表格的行<tr></tr>
表格的列<td></td>
表格的表头列<th></th> (将tr中的td，替换为th，表示本行为表头)
th 默认加粗，且在单元格居中显示

【table的常用属性】
Border：表格的边框属性，当使用border="1"设置边框，会在所有td以及table上嵌套边框，当border加大时
只有table最外层框线加粗，td单元格上的框线不会变化。
Cellspacing：单元格与单元格之间的间隙你，当cellspacing="0"时，单元格之间间隙为0，单边框线并没有
合并（边框线还是俩条线的宽度）。
[合并边框的写法]style="border-collapse: collapse;"使用边框合并后，无需设置Cellspacing

Cellpadding：单元格内边距，中文字与单元格边框之间的距离
Width：表格的宽度
Height：表格的高度
Align:表格的对齐方式：设置表格在父容器的对齐方式；left/居左 center/居中 right/居右
【注意】当表格使用align属性时，相当于表格的浮动，可能会导致表格后面的元素收表格浮动的影响，导致布局混乱
Bgcolor：背景色
Background：背景图片：后接相对路径当背景图和背景色同时生效时，背景图会覆盖背景色
Bordercolor：边框颜色

-->
<!--
[<tr><td><th>标签属性]

>>>当表格属性和行列属性冲突时，会以行列属性为准
属性设置优先级td>tr>table
1.width，height：给单独的行列设置宽度高度
2.bgcolor：背景色
3.Align:设置单元格中的文字在单元格中的水平对齐方式 left/right/center
4.Valign：设置单元格中的文字，在单元格中的垂直对齐位置，top/center/bottom
5.nowrap：nowrap=nomrap设置单元格文字行末不断行

-->

<!--
表格的跨行和跨列
1.跨列：colspan，某单元格跨N列，则该单元格右边的N-1个td就不需要了。
2.跨行：rowspan；某单元格跨N行，则该单元格下方的N-1个td就不需要了。

 

【三种使用CSS的方式】
1.行内样式表：直接在HTML开始标签中使用sty=""的方式引用：
特点“讲css代码与HTML代码完全糅杂在一起，不符合W3C关于内容与表现的分离，不利于样式的复用；
优先级：最高。
2.内部样式表：在<head></head>中，使用<style type="text/css>"方式引用
特点：将css代码与HTML代码分离，但是没有彻底分离CSS文件与HTML文件，不利于多页面复用样式。
3.外部样式表：使用link标签链接css文件。
<link rel="stylesheet" type="text/html" href=""/>
特点：实现了css与html的彻底分离，有利于样式复用及后期维护。