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标签
``` ```
查看全文

相关阅读:
xps转换为pdf工具
 公差与配合教案 2
C#与C++抉择【z】
MATLAB C#混合编程demo
数据结构第6章图
 科技英语翻译480句（九）举例、异同、例外
 理论与数学应用互助交流QQ群(6314910) 简介【谢绝转载】
数据结构第3章栈和队列
 精通Matlab与C/C++混合程序设计(第2版)
科技英语翻译480句（三）原因、结果

原文地址：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标签