html基础

1 html基础

1.1 html文件结构

<!DOCTYPE HTML>
<html>

    <head>
        <!--一般meta放在title前面-->
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Hello</title>
        <link rel="shortcut" href="image/favicon.ico">
    </head>
    
    <body>
        <div id="1">div1
        </div>
        <div id="1">div2
        </div>
    </body>
    
</html>

1.2 doctype

doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档。

<!DOCTYPE HTML>

1.3 div与span

块级标签div
内联标签span

<div id="1">div1
</div>
<div id="1">div2
</div>

<span id="2">span1
</span>
<span id="2">span2
</span>

1.4 特殊符号

源码 符号
&nbsp 空格
&lt <
&le ≤
&gt >
&ge ≥
&amp &
&quot "
&reg ®
&copy ©
&trade ™
&radic √

2 meta标签

meta提供有关页面的元信息，例：页面编码、刷新跳转、针对搜索引擎和更新频度的描述和关键词。此标签只能出现在head标签内。meta常用属性主要分为两组：name：content与http-equiv：content

2.1 name：content

name属性用于描述网页，它是以名称/值形式的名称，name属性的值所描述的内容(值)通过content属性表示，便于搜索引擎机器人查找，分类.其中最重要的是description，keywords和robots。

2.1.1 描述
<meta name="description" content="python学习" />
2.1.2 关键词
  
<meta name="keywords" content="python,morra,code">
2.1.3 作者
<meta name="author" content="http://www.cnblogs.com/whatisfantasy/" />

2.2 http-equiv：content

http-equiv属性用于提供HTTP协议的响应头报文(MIME文档头)，它是以名称/值形式的名称，http-equiv属性的值所描述的内容(值)通过content属性表示,通常为网页加载前提供给浏览器等设备使用。其中最重要的是content-type charset提供编码信息，refresh刷新与跳转页面，no-cache 页面缓存，expires网页缓存过期时间。

2.2.1 页面编码

告知浏览器其编码方式，content-type属性值，定义文件MIME类型

<meta http-equiv="content-type" content="text/html;charset=utf-8">
2.2.2 刷新和跳转

每30s刷新一次页面

<meta http-equiv="refresh" content="30">

在该页面停留5s后跳转到目标url

<meta http-equiv="refresh" content="5;url=http://www.baidu.com" >
2.2.3 语言
<meta http-equiv="content-language" content="zh-CN" />

3 input标签

input标签都是自闭和的

3.1 text(default)

<input type='text' />

3.2 password

<input type='password' />

3.3 checkbox

<input type='checkbox' />

3.4 radio

<input type='radio' />

男：
女：
老：
少：

男：<input type='radio' name='gender'/>		<!-- name 属性相同，就能实现互斥 -->
女：<input type='radio' name='gender'/>

老：<input type='radio' name='age'/>		
少：<input type='radio' name='age'/>

3.5 buttom

<input type='button' value='提交'/>

3.6 submit

<input type='submit' value='提交'/>

3.7 file

<input type='file' />

4 a标签

4.1 常规用法

<a href="http://www.cnblogs.com/whatisfantasy/">morra</a>
<a href="/whatisfantasy/">morra</a>

打开链接时跳转到新的页面

<!-- target属性默认为_self -->
<a href="http://www.cnblogs.com/whatisfantasy/" target='_blank'>morra</a>

4.2 锚点

<a href="#dest">destination</a>  
<a name="dest">destination is here!!!</a>

5 form标签

5.1 常用属性

5.1.1 action 属性

action 属性确定把表单提交到什么地方。如果省略 action 属性，则 action 会被设置为当前页面。

5.1.2 method 属性

method 属性规定在提交表单时所用的 HTTP 方法：GET （默认）或 POST

使用GET的情况：
如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。GET 最适合少量数据的提交，浏览器会设定容量限制。当使用 GET 时，表单数据在页面地址栏中是可见的：action_page.php？firstname=Mickey&lastname=Mouse

使用POST的情况：
如果表单正在更新数据，或者包含敏感信息（例如密码）。POST 的安全性更好，因为在页面地址栏中被提交的数据是不可见的。

5.1.3 target 属性

target 属性确定将表单的响应加载到哪个框架上

5.2 常规用法

Name: Pwd:
<form action='URL' method='POST'>          
	Name:<input name='username' type='text'/>
	Pwd:<input name='pwd' type='password'/><br/>
	<input type='submit' value='提交'/>
</form>
<!--
后台获取到的数据格式
{u'username':[u'morra'],u'pwd':[u'123']}  
-->

5.3 针对文件上传的特殊处理

enctype即encodetype编码类型；multipart/form-data是指表单数据有多部分构成（比如既有文本数据，又有文件等二进制数据）。默认情况下，enctype的值是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form-data，才能完整的传递文件数据。对于文件上传工作，其实是在前端完成的，即，在php，java等语言处理之前，文件其实就已经被上传到服务器了，服务器脚本语言的作用不过是将这些临时文件持久化而已。

<form action='URL' enctype="multipart/form-data" method='POST'>         

	<input type='file' />
	<input type='submit' value='提交'/>
</form>

6 label标签

点击"姓名"光标就会出现

<label for="name2">姓名：<input id="name2" type="text"></label>

7 列表

7.1 无序列表

  • ul.li
  • ul.li
  • ul.li

<ul>
    <li>ul.li</li>
    <li>ul.li</li>
    <li>ul.li</li>
</ul>

7.2 有序列表

  1. ol.li
  2. ol.li
  3. ol.li
<ol>
    <li>ol.li</li>
    <li>ol.li</li>
    <li>ol.li</li>
</ol>

7.3 多级列表

aaa
abc
efg
bbb
abc
efg
<dl>
    <dt>1</dt>
    <dd>abc</dd>
    <dd>efg</dd>   
    <dt>2</dt>
    <dd>abc</dd>
    <dd>efg</dd>
</dl>

8 table标签

<tr>
    <td>192.168.1.1</td>
    <td>北京</td>
    <td>online</td>
</tr>
IP IDC Status 
<table border="1">
    <tr>
        <th>IP</th>
        <th>IDC</th>
        <th>Status</th>
    </tr>
    
    <tr>
        <td>192.168.1.1</td>
        <td>北京</td>
        <td>online</td>
    </tr>
</table>

另一种写法

<table border="1">
    <thead>
        <tr>
            <th colspan='2'>Address</th>    <!--合并行-->
            <th>Status</th>
        </tr>
    </thead>
    
    <tbody>
        <tr>
            <td>192.168.1.1</td>
            <td>北京</td>
            <td rowspan='3'>online</td>     <!--合并列-->
        </tr>
		  <tr>
            <td>192.168.1.2</td>
            <td>武汉</td>
            
        </tr>
		  <tr>
            <td>192.168.1.3</td>
            <td>广州</td>    
        </tr>
    </tbody>

</table>

9 fieldset标签

登录

用户名：

密码：

<fieldset>
    <legend>登录</legend>
    <p>用户名：</p>
    <p>密码：</p>
</fieldset>

10 textarea标签

<textarea>ddd</textarea>

11 select标签

``` ```
posted @ 2016-12-12 19:59  morra  阅读(267)  评论(0)  编辑  收藏  举报