html基础

zoukankan html css js c++ java

html基础
1 html基础

1.1 html文件结构
```
<!DOCTYPE HTML>
<html>

    <head>
        
        <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'/>		
女：<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>
```
打开链接时跳转到新的页面
```

<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>

```
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标签

ddd
```
<textarea>ddd</textarea>
```
11 select标签
``` ```
查看全文

相关阅读:
49. 字母异位词分组
 73. 矩阵置零
 Razor语法问题(foreach里面嵌套if)
多线程问题
 Get json formatted string from web by sending HttpWebRequest and then deserialize it to get needed data
How to execute tons of tasks parallelly with TPL method?
How to sort the dictionary by the value field
How to customize the console applicaton
What is the difference for delete/truncate/drop
How to call C/C++ sytle function from C# solution?

原文地址：https://www.cnblogs.com/whatisfantasy/p/6165762.html

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

1 html基础

1.1 html文件结构

1.2 doctype

1.3 div与span

1.4 特殊符号

2 meta标签

2.1 name：content

2.1.1 描述

2.1.2 关键词

2.1.3 作者

2.2 http-equiv：content

2.2.1 页面编码

2.2.2 刷新和跳转

2.2.3 语言

3 input标签

3.1 text(default)

3.2 password

3.3 checkbox

3.4 radio

3.5 buttom

3.6 submit

3.7 file

4 a标签

4.1 常规用法

4.2 锚点

5 form标签

5.1 常用属性

5.1.1 action 属性

5.1.2 method 属性

5.1.3 target 属性

5.2 常规用法

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

6 label标签

7 列表

7.1 无序列表

7.2 有序列表

7.3 多级列表

8 table标签

9 fieldset标签

10 textarea标签

11 select标签