标签：bsp val 存在 智能 只读 eth 内容 baidu table
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
可以通过如下语法向 HTML 源代码添加注释：
<!-- 在此处写注释 -->
注释：在开始标签中有一个惊叹号，但是结束标签中没有。
浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。
1、<!DOCTYPE html>
文档类型声明,让浏览器按照html5标准代码进行解释与执行,
文档类型声明不可少,必须放在文档上方,
如果不写，浏览器会默认按照兼容模式运行，可能出现BUG。
2、<meta charset="utf-8" />
设置网页字符集编码格式：
GB2312：国标码/简体中文编码格式。
GBK：扩展国标码。比国标码多了更多的编码格式。
utf-8：万国码可以兼容绝大多数国家语言。
html4.01之前声明字符集编码格式：
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
3、<meta name="keywords" content="HTML5,web开发" />
设置网页描述：网页描述内容。
name="keywords":当前语句用于设置网页关键字
content="":网页关键字内容，用逗号隔开。
4、<title>博客园</title>
网页标题，网页选项卡上的文字
5、<link rel="icon" href="img/w-1.PNG" />
链接网页小图标：选项卡上的小图标
rel属性：icon：表示连接的文件，作为网页的icon图标.
href属性：选择图片所在路径地址。
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
HTML标签分为"块级标签"和"行级标签"
区别：
1、块级标签自动换行，前后隔一行；
行级标签不会自动换行，从左往右依次显示；
2、块级标签的宽度默认100%；
行级标签宽度由文字内容撑开；
3、块级标签可以设置宽高，边距，行级标签不行。
HTML标签分为“成对标签”和“自闭和标签（空标签）”
成对标签：成对出现，有开始标签，必须有结束标签，
例如：<h1></h1> <p></p>
自闭和标签/空标签：只有一个标签，用/表示标签的自动闭合（/可以省略）
例如：<hr /> <link /> <meta />
HTML 段落是通过 <p> 标签进行定义的。
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML 链接是通过 <a> 标签进行定义的。
【a标签 超链接】
1、href:超链接跳转地址，可以是网络链接，也可以是本地HTML文件相对路径。
2、target:超链接新页面打开方式位置。_self在当前页面打开(默认)
3、title:鼠标指在连接上显示的文字。
【功能性超链接】
1、mailto:给指定邮箱发邮件。
<a href="mailto://2243949290@qq.com">给腾宝发邮件</a>
2、tencent:与指定QQ聊天。
3、锚链接：点击链接，可以跳转到页面指定位置（锚点）
a.页面指定位置定义一个锚点，
b.将超链接的href属性，改为“#锚点名字”
<a name="top"></a>
.......
<a href="#top">跳转顶部</a>
4、跳转到其他页面地址的指定锚点方式：
<a href="其他页面地址.html#center">跳转</a>
<a href="http://www.baidu.com.cn">This is a link</a>
HTML 图像是通过 <img> 标签进行定义的。
图片标签<img>，行级标签
1、src属性：图片路径。
【路径表示方式】
a、网络图片地址，不建议使用（http://..）
b、绝对路径（file:///C:/tupian.jpg）,严禁使用绝对路径，绝对路径使用file://协议，网页使用htp://协议无法打开file://协议文件。
绝对路径写法：file:///盘符：/文件路径
c、相对路径：
1、图片在当前文件的下一层，“文件夹名/图片名”
2、图片与当前文件在同一层，直接写“图片名”
3、图片在当前文件上一层，直接“../图片名”
注意：图片不能退出当前项目的根目录，即图片必须包含在项目里边。
d、width、height:有宽高属性
e、title:鼠标指上时所显示的文字
f、 alt=" ";图片无法加载时显示的内容。省略alt,将默认显示tiitle内容。
g、align=" ";图片周围的文字相对于图片排列方式。
top:文字居上 center:文字居中 bottom：文字局低
<img src="longmao.jpg" width="104" height="142" />
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
例子
<ul> <li>Coffee</li> <li>Milk</li> </ul>
同样，有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
例子
<ol> <li>Coffee</li> <li>Milk</li> </ol>
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
定义列表的列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
例子
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
表格属性
<th>表头，默认加粗居中
<tr>表示行
<td>表示列
1、border:给表格每个<td>和整个table加边框。
如果border>1,则只有最外层边框加粗，<td>边框不变。
2、cellspacing:设置单元格与单元格之间的间距。
3、cellspacing="0";可以设置边框之间的间距为0，但是相邻的边框不会合并，而是显示两条线宽度。
【设置表格边框合并】
可以使用CSS设置：style="border-collapse: collapse;"
设置边框合并以后，cellspacing属性将会失效。
4、cellpadding:单元格内边距，单元格文字与边框之间的距离。
5、width/heght:表格宽高
6、align:center/left/right; 设置表格在浏览器中位置。
7、bgcolor:表格背景色。
8、bordercolor：表格边框颜色。
9、backgroud:表格背景图。背景图和背景色同时存在时，背景图生效。
【表格行列的属性】
a、width/height:宽高
b、bgcolor:背景色（当表格与列属性发生冲突时，优先采用“近者优先”）原则：table<tr<td
c、align:设置单元格中的内容在表格里位置。
d、valign:设置单元格中内容，垂直对齐方式。
【表格的跨行与跨列】
1、colspan="n"; 跨列。如果某个单元格跨n列，则该单元格右侧n-1个td就不需要了。
2、rowspan="n";跨行。如果某个单元格跨n行，则该单元格下侧n-1个td就不需要了。
-->
【表格的结构化：】
完整的结构，包括：
caption:表格的标题，无论<caption></caption>标签放在表格第几行，表格标题永远在表格正上方居中。
thead:表格表头部分。永远在表格最上部。
tbody:表格的身体部分，在thead之下，tfoot之下。
tfoot:表格尾部，
【表格的直列化：】
表格有记列，就可以在表格上方写几个<col />标签，每个<col />就对应第几列，可以对<col />标签修改样式，添加name等属性，表示这一列的所有td同步修改；
如果需要对多列修改样式，可以使用<colgroup></colgroup>标签包裹多个<col />。
实例
<table border="1" width="700" height="280" style="border-collapse: collapse">
<h1 align="center" style="width: 700px;">特别休假申请单</h1>
<h2>申请日期：年 月 日</h2>
<tr>
<td>所属单位</td>
<td>部组班</td>
<td>职称</td>
<td>111</td>
<td>姓名</td>
<td>111</td>
<td>厂长</td>
</tr>
<tr>
<td rowspan="2">地方</td>
<td colspan="3">年 月 日</td>
<td rowspan="2" colspan="2">阿红</td>
<td>111</td>
</tr>
<tr>
<td colspan="3">年 月 日</td>
<td>主管</td>
</tr>
<tr>
<td colspan="2">花洒哈吉好</td>
<td colspan="4">好的</td>
<td>花洒</td>
</tr>
<tr>
<td>到期日期</td>
<td colspan="3">年 月 日</td>
<td colspan="2">互促好很</td>
<td>哈哈</td>
</tr>
<tr>
<td colspan="2">哈哈哈哈哈哈哈</td>
<td colspan="2">哈哈</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td colspan="2">哈哈哈哈</td>
<td colspan="2">哈哈</td>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td colspan="2">哈哈哈哈</td>
<td colspan="2">哈哈</td>
<td rowspan="2">111</td>
<td rowspan="2">111</td>
<td rowspan="2">111</td>
</tr>
<tr>
<td colspan="2">bdbckbbj</td>
<td colspan="2">nksdjc</td>
</tr>
</table>
form表单
1、action:表单提交的服务器地址。
2、method:表单提交数据的方式，可选值有get和post.
【get和post的区别】
a、get：使用URL传递数据，内容可在地址栏可见，不安全。
b、post：数据无法在地址栏可见，比较安全。
c、get传递的数据量有限，只能传纯文本内容。
d、post：可以传递大量的数据，并且可以传递图片，视频等文件。
e、get:传输速度比post快。
【get传递数据的URL格式】
http：//原来的地址，html？name1=value1&name2=value2
比如：http://127.0.0.1:8020/0595.html?username=123
比如，input使用时，name属性必不可少，缺少name,将导致该输入框的数据不向后台传递。
【input常用属性】
1、type：表示当前输入框是何种类型输入框。
2、name：给输入框起别名，向后台传递时，使用name=value的形式传递。
3、value：给输入框提供默认值。
4、placeholder:输入框的提示内容，当输入框有value时，提示内容消失。
5、hidden隐藏当前输入框。可以写hidden="hidden",也可以省略属性值，只写<input type="text" hidden />
隐藏的输入框内容，也可以向后台传输。
6、disable：禁用当前输入框，可以显示，不能使用。被禁用输入框内容不能向后台传递。
【input的type类型】
a、text:普通文本框。
b、password:密码框，
c、radio:单选按钮，value不能省略，这个value需要传到后台；
单选按钮，凭借name是否相同，区分按钮是否同一组，同一组按钮只能选一个，name相同。
d、checkbox:多选按钮，value不能省略，这个value需要传到后台；
checked="checked";设置单选按钮/多选按钮，默认选中。
e、file:文件上传框。
accept属性，可以限制只能上传何种类型的文件，*表示可以接受所有文件，比如：“image/*”表示只可以接收图片
mutiple="mutiple":设置可以上传多个文件。
f、submit:表单提交按钮。
g、reset:表单重置按钮。
h、image:图形提交按钮，src属性导入图片，与submit都具有提交表单的作用。
i、button:显示为按钮形状，无作用。
j、hidden：隐藏的输入框，与普通的输入框+hidden=“hidden”的作用相同。
【select下拉选择区块】
1、select里边的每一项，用<option></option>标签表示
2、name：需要写在select里边。
3、option标签如果有value属性，则向后台传递的将是value属性的值，如果没有value属性，
则传递是<option></option>之间的文字。
4、option添加属性select="select";设置默认选中。
5、select添加属性mutiple="mutiple";设置当前下拉控件可以多选。
6、option添加title，鼠标指上去显示的文字。
7、select可以使用<optgroup></optgroup>标签对选项进行分组，用lable属性显示分组名。
【文本域】
a、文本域大小控制：
可以用文本域属性cols="20"（宽度多少字符） rows="10"（高度多少字符）
可以使用css样式style="width:200px; height: 100px;"
b、设置文本域大小不能拖动：
style="resize: none;"
c、设置文本域为只读模式，不能修改：
<textarea readonly="readonly"></textarea>
d、文字超出区域处理：
使用style="overflow： xx;"可以设置文字超出区域的显示方式。
overflow: hidden;超出区域的文字隐藏不显示。
overflow: scroll；不管文字多少都显示水平垂直滚动条。
overflow: auto;自动，默认效果。文字多显示滚动条，不多时，不显示。
overflow-x:水平方向显示滚动条。
overflow-y:垂直方向nput与表单关联方式。只需给form表单起一个id，然后给表单外面的
input添加form属性，指向这个id，显示滚动条。
【智能表单】
1、H5给我们提供了将from外的i就可以实现表单与input的绑定；
<form id="hh"></form>
<input form="hh">
【H5新增input属性】
1、form属性：关联指定表单的id
2、placeholder：输入框提示内容
3、required="required":内容必填
4、autofocus="autofocus"；指定输入框，自动获得焦点
5、autocomplete：是否自动开启提示完成功能，默认开启状态，设置为off表示关闭，设置on表示打开
实例
<form>
<table>
<tr>
<td>登录名：</td>
<td><input type="text" name="username" >（可包含a-z、0-9和下划线）</td>
<td><img src="images/a.gif">阅读贵网服务协议</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="psw">（至少包含六个字符）</td>
<td rowspan="8"><textarea style="width: 200px; height: 200px;overflow-y: scroll;">欢迎阅读服务条款协议......</textarea></td>
</tr>
<tr>
<td>再次输入密码：</td>
<td><input type="password" name="psw"></td>
</tr>
<tr>
<td>电子邮箱：</td>
<td><input type="text" name="email">（必须包含@字符）</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" checked="checked"><img src="images/a.gif">男
<input type="radio" name="sex"><img src="images/a.gif">女
</td>
</tr>
<tr>
<td>头像：</td>
<td><input type="file" name="file"></td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="hobby">运动
<input type="checkbox" name="hobby">聊天
<input type="checkbox" name="hobby">玩游戏
</td>
</tr>
<tr>
<td rowspan="2">喜欢的城市：</td>
<td>
<select>
<option>请选择城市</option>
<option>厦门</option>
</select>
</td>
</tr>
<tr>
<td><input type="submit" value="同意右侧服务条款，提交注册信息">
<input type="reset" value="重填"></td>
</tr>
</table>
</form>
标签：bsp val 存在 智能 只读 eth 内容 baidu table
原文地址：http://www.cnblogs.com/lgc-17862800193/p/7290290.html
