html-HTML总结

html布局

google首页

使用了哪种规范：XHTML更加严格
XHTML规范：必须小写，有开始结束标签，属性也用双引号。
HTML规范：不区分大小写，有开始和结束标签，也可把结束标签放在开始标签里，如：。属性可用双引号、单引号(必须配对使用)。

HTML 节点
根节点，页面的代码信息都放在这个节点里。

<head> 节点：头部节点。包含以下子节点：
　　<mete> 标签：提供页面的元信息(meta-information),比如页面关键字；
　　<title> 标签：页面的标题；
　　<script> 标签：一般存放Css和JavaScript代码的区域；
<Body> 节点：页面内容区域，存放html各元素信息
　　<Div> 标签 ： 存放各元素控件。
　　<script> 标签：因为Html页面是从上到下加载，不是加载完再一次性显示内容，而是一边加载一边展示内容。

把Script放在body的后面，类似于说明此Script里的代码要调用body里的元素。若放在Head标签里，运行到此script代码时，body里的元素还没有加载，会获取不到所需的元素信息。

基本控件

input、select、textarea、label、fieldset、ul、ol、li

1. <input>标签：主要用于收集用户信息，可根据不同的type属性值，拥有多种形式。
2. <select>标签：可创建单选或多选菜单，类似于winform的combox或listbox。
3. <textarea>标签：多行文本区域。
4. <label>标签：相当于一个展示文本框。
5. <fieldset>标签：类似于winform中的groupBox控件。
6. 列表标签：介绍ul、ol、li。

input标签
标签用于搜集用户信息,根据不同的 type 属性值，输入字段拥有很多种形式。

text：文本区域
　　　　readonly属性：是否只读。
password：密码区域，输入的文本以'*'展示
checkbox：复选框
　　　　checked属性：是否选中；
radio：单选框；
　　　　name属性：指定多个单选框的在一个区域里进行单选操作
reset：重置当前<form>表单里所有标签到初始化状态(如清除文本区域内容)
submit：提交当前<form>表单信息到指定页面
button：普通按钮
　　　　value属性：button按钮显示的文本
file：文件选择标签
hide：隐藏区域，可以把一些不展示给用户，而自己使用的信息存放于此
image：图片区域
　　　　src属性：指定图片存放的路径；
　　　　title属性：鼠标移到图上显示的文本；
　　　　alt：图片加载失败或关闭时，显示的文本；

例子

select标签
可创建单选或多选菜单

1) size {int}：设置下拉列表尺寸。默认的为combox样式；大于1时，就是listbox样式。
2) multiple {boolean}：是否多项选择。若为多选，按住Ctrl+左键可进行多选操作。
3) item子项：
① <optgroup>标签：定义选择项的类别，不能被选中。
　　label {string} 属性：类别展示的名称
　　title {string} 属性：鼠标移到选择项上去，要展示的信息
② <option>标签：定义可选的项目
　　vlaue {string} 属性：选择项具体的名称
　　title {string} 属性：鼠标移到选择项上去，要展示的信息

例子

<h3>select标签</h3>
<select id="province" multiple=multiple size="6" >
    <optgroup label="直辖市"  ></optgroup>
    <option value="bj" title="北京市" >北京</option>
    <option value="sh">上海</option>
    <optgroup label="省市" ></optgroup>
    <option value="zj">浙江</option>
    <option value="fj">福建</option>
</select>

textarea标签
多行文本区域，可以通过 cols 和 rows 属性来设定 textarea 的尺寸。

rows {int}：表示显示的行数。
cols {int}：表示显示的列数。
readonly {boolean}：是否只读。

label标签
相当于一个展示文本框。

for {elementID}：关联对应的控件id；当点击此label标签时，绑定id的控件会获取焦点；

<table>
    <tr>
        <td><label for='username'>姓名：</label></td>
        <td><input type="text" id='username'/></td>
    </tr>
    <tr>
        <td><label for='userpwd'>密码：</label></td>
        <td><input type="password" id='userpwd' /></td>
    </tr>
</table>

fieldset标签

：表示抬头的名称。 ```html

fieldset标签

性别男女

``` 例子 ![](//images0.cnblogs.com/blog/153475/201305/22091927-a0854bed44a14bccbc69f99361e88ef1.jpg)

ul、ol、li 列表标签

ul ：unordered list （无序列表）
ol ：ordered list  （有序列表））
li ：list item （列表项目），基于上面2个列表子项目。

<ul type=circle>
    <li>ul1</li>
    <li>ul2</li>
    <li>ul3</li>
</ul>

<ol type=1>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ol>

属性

type  {string}：定义了<li> 标签前面的符号样式。
ul：type 有：circle 空心圆，disc 实心圆，square 实心正方形， none ：前面无符号;
ol：type 有：1 ：表示有序的1,2,3； a ：表示有序的a，b，c；i ：罗马数字i,ii,iii；虽然还可以定义为：circle、disc、square、none但现实都为1,2,3等序列；

iframe和frameset的区别

1. <iframe> 标签：iframe 是个内联框架，是在页面里生成个内部框架。
2. <frameset> 标签：frameset 定义一个框架集，包含多个子框架，每个框架都有独立的文档

iframe标签
iframe 是个内联框架，是在页面里生成个内部框架。
格式

<iframe></iframe>

属性

frameborder {int}：是否显示框架的边框；
src {URL}：指定一个资源(如网页、图片)的uri；
scrolling {boolean}：是否显示框架的滚动条；
width {int}：定义iframe的宽度；
height {int}：定义iframe的高度；

例子

<body>
<h3>HTML标签演示</h3>
<iframe src=1.1-ShowHtml.htm ></iframe>
</body>

在iframe标签中添加内容，不会显示；

frameset标签
frameset 定义一个框架集，包含多个框架，每个框架都有独立的文档。
格式

<frameset >
　　<frame src=a.htm />
　　<frame src=b.htm />
　　<noframes></noframes>
</frameset>

子项

<frame src=a.htm /> ：子框架
<noframes></noframes>：浏览器不支持此框架的时，显示的内容。

frameset 属性：

rows ：表示子框架按行的样式布局（）。以2个子框架为例：rows="30%,*" ，表示第一个框架占整个页面30%的高度，第二个占剩下的；
cols ：表示子框架按列的样式布局()。以2个子框架为例：cols="30%,*" ，表示第一个框架占整个页面30%的长度，第二个占剩下的；
noresize="noresize" ：表示不调整子框架的范围。

frame 属性：

src ：指向一个资源(如页面、图片等)的URI；
name ：指定框架的名称，以便进行框架间的操作。

例子

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>frameset 演示</title>
</head>
<frameset rows="30%,*"  noresize="noresize">
    <frame src=DateGrid.htm name="frm1"  />
    <frame src=Dialog.htm  name="frm2"/>
    <noframes></noframes>
</frameset>
</html>

使用frameset标签时，注意要去掉外层的标签
应用场景

1) 后台页面的管理，左边显示 菜单，右边框架 显示详细页面。
2) 功能菜单页面，如bbs.csdn.net

name、id、class 的区别

在一个页面中，有许多的控件(元素或标签)。为了更方便的操作这些标签，就需要给这些标签标识一个身份牌。

1. name ：指定标签的名称。
2. id ：指定标签的唯一标识。
3. class ：指定标签的类名。

name
格式

<input type="text" name="username" />

应用场景
①form表单：name可作为转递给服务器表单列表的变量名；如上面的传到服务器的名称为：username='text的值'。
②input type='radio'单选标签：把几个单选标签的 name设为一个相同值时，将会进行单选操作。

<input type="radio" name='sex'/>男
<input type="radio" name='sex'/>女

③快速获取一组name相同的标签：获取拥有相同name的标签，一起进行操作，如:更改属性、注册事件等。

function changtxtcolor() {
    var txts = document.getElementsByName('txtcolor'); //获取所有name=txtcolor 的标签
    for (var i = 0; i < txts.length; i++) { //循环遍历标签，并把背景色改为red
        txts[i].style.backgroundColor = 'red';
    }
}

name属性的值，在当前page页面中并非唯一性。

id
指定标签的唯一标识。

<input type=password id="userpwd" />

①根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)
②用于充当label标签for属性的值：示例：用户名：，表示单击此label标签时，id为userid的标签获得焦点。
id属性的值，在当前的page页面要是唯一的。

class
指定标签的类名。
格式

<input type=button class="btnsubmit" />

①CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。
可以把多个类，放在一个class属性里，但必须用空格隔开；如：class='btnsubmit btnopen'

table

定义表格布局
格式

<table>
 　　<caption></caption>
 　　<tr> <th></th></tr>
 　　<tbody>
 　　　　<tr><td></td></tr>
 　　　　<tr><td></td><tr>
 　　<tbody>
</table>

说明

<caption></caption>：表头信息。
<tr></tr> ：定义一个表格行；
<th></th> ：定义一个表格头；若是纯文字，默认会以粗体的样式表现。
<tbody></tbody> ：可以理解为表格的内容区域，在Chrome、FF浏览器通过DOM进行表格动态插入行的时候，要使用这个。如果不进行DOM操作，可不用添加。
<td></td> ：定义一个单元格；

属性

table 属性：
　　border ：定义表格的边框宽度，默认为0，即无边框。
　　title ：表格的提示信息，当鼠标移到表格上方时，所提示的信息。
th、td 属性：
　　colspan : 表示横向合并单元格 ( )
　　rowspan ：表示纵向合并单元格 (  )

例子

<table border=0 title="测试">
    <caption> 表格标题</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>22</td>
    </tr>
    <tr>
        <td><input type=text /></td>
        <td><input type=text /></td>
    </tr>
</table>

form

创建HTML表单，表单内容可以包含：input(文本字段、复选框、单选框、提交按钮)、menus、textarea、fieldset和 label等元素
属性

action {URL}：一个URL地址；指定form表单向何处发送数据。
enctype {string}：规定在发送表单数据之前，如何对表单数据进行编码。
指定的值有：application/x-www-form-urlencoded ：在发送前编码所有字符（默认为此方式）；
　　　　　　multipart/form-data ：不对字符编码。使用包含文件上传控件的表单时，必须使用该值
method {get/post}：指定表单以何种方式发送到指定的页面。
指定的值有：get ：form表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。
　　　　　　post ：form表单里所填的值，附加在HTML Headers上。

例子

<form enctype="multipart/form-data" action="ashx/login.ashx" method="post">
    <table>
        <tr>
            <td><label for="txtname">账号：</label></td>
            <td><input type="text" id="txtname" name="login_username" /></td>
        </tr>
        <tr>
            <td><label for="txtpswd">密码：</label></td>
            <td><input type="password" id="txtpswd" name="login_pswd" /></td>
        </tr>
        <tr>
            <td colspan=2>
                <input type="reset" />
                <input type="submit" />
            </td>
        </tr>
    </table>
</form>

表单主要用于向服务器传输数据；如常见的登录、注册页面
表单提交方式
get方式

http://localhost:4778/ashx/login.ashx?login_username=admin&login_pswd=123456

post方式,表单提交的值附加在HTML Headers上

http://localhost:4778/ashx/login.ashx

finddler查看Header部分，有个WebKitFormBoundary2T7xmZEtMRQeAhNh对象

查看Raw区域，里面包含了提交的变量

get 与 post 的区别

①数据的查询：比如浏览论坛时，URL一般包含了分类、页码数、每页记录数等信息。 get 方式，能一目了然的看到所要查询的信息(条件)。 post 因为隐藏掉了这些信息，不方便进行检验查询条件。
②敏感数据的提交(安全性)：对一项记录，进行更改、添加操作时，比如注册用户、更改用户资料等。get 方式附加在URL上，会泄露掉敏感的消息。 post 方式，能隐藏掉敏感的信息。
③大数据文本传递：get 虽然方便查询，但由于是附加在URL上，各浏览器对URL也有个长度限制。IE ：2048字符。Chrome、FF 好像是 8182字符。post 好像没此限制。

kbd键盘元素

kbd ：即Keyboard Input Element(键盘输入元素)。表示键盘按键的语义元素，常用于网页上对快捷键、按键说明的场景
样式规格：内联样式。
为了在页面上突出显示，可以给kbd元素添加样式：

kbd {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -khtml-border-radius: 4px;
    border-radius: 4px;
    border-style: outset;
    border: 1px solid #aaa;
    background: #fafafa;
    padding: 0px 3px 1px 3px;
    margin: 0px 0px 0px 0px;
    vertical-align: baseline;
    line-height: 1.8em;
    white-space: nowrap;
}

posted @ 2017-02-08 10:17 zhangshihai1232 阅读(140) 评论(0) 收藏举报

刷新页面返回顶部

zhangshihai1232