html基础
Meta(metadata information)
提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词
页面编码（告诉浏览器是什么编码
<meta http-equiv=“content-type” content=“text/html;charset=utf-8”> <meta charset="UTF-8">
刷新和跳转
<meta http-equiv=“Refresh” Content=“30″> <meta http-equiv=”Refresh“ Content=”5; Url=http://www.autohome.com.cn“ />
关键词
有助于协助搜索或者爬虫之类的工具搜索到
< meta name="keywords" content="星际2,星际老男孩,专访,F91,小色,JOY" >
描述
例如:cnblog
X-UA-Compatible
微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。
与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。 因此，针对旧版本的浏览器设计的站点可能不会按预期显示。 为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。 文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。 如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。 通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。
当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用 指令来确定如何显示该网页。 如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
Title
网页头部信息
Link
css
< link rel="stylesheet" type="text/css" href="css/common.css" >
icon
< link rel="shortcut icon" href="image/favicon.ico">
Style
在页面中写样式
< style type="text/css" > .bb{ background-color: red; } < /style>
css在页面中的优先级:
- 标签中的属性
- 页面头部style的属性
- 页面头部type中的指定页面设置
Script
引进文件:
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"> </script >
写入js代码:
<script type="text/javascript" > ... </script >
常用标签
一般分为两种:块级标签和行内标签(也叫内联标签)
- a、span、select 等(行内标签)
- div、h1、p 等(块级标签)
各种符号
HTML特殊字符编码大全：往网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字。下面就是以字母或数字表示的特殊符号大全。
| ´ | ´ | © | © | > | > | µ | µ | ® | ® |
| & | & | ° | ° | ¡ | ¡ | | » | » | |
| ¦ | ¦ | ÷ | ÷ | ¿ | ¿ | ¬ | ¬ | § | § |
| • | • | ½ | ½ | « | « | ¶ | ¶ | ¨ | ¨ |
| ¸ | ¸ | ¼ | ¼ | < | < | ± | ± | × | × |
| ¢ | ¢ | ¾ | ¾ | ¯ | ¯ | “ | " | ™ | ™ |
| € | € | £ | £ | ¥ | ¥ | ||||
| „ | „ | … | … | · | · | › | › | ª | ª |
| ˆ | ˆ | “ | “ | — | — | ’ | ’ | º | º |
| † | † | ‹ | ‹ | – | – | ‚ | ‚ | ” | ” |
| ‡ | ‡ | ‘ | ‘ | ‰ | ‰ | ­ | ˜ | ˜ | |
| ≈ | ≈ | ⁄ | ⁄ | ← | ← | ∂ | ∂ | ♠ | ♠ |
| ∩ | ∩ | ≥ | ≥ | ≤ | ≤ | ″ | ″ | ∑ | ∑ |
| ♣ | ♣ | ↔ | ↔ | ◊ | ◊ | ′ | ′ | ↑ | ↑ |
| ↓ | ↓ | ♥ | ♥ | − | − | ∏ | ∏ | | ‍ |
| ♦ | ♦ | ∞ | ∞ | ≠ | ≠ | √ | √ | | ‌ |
| ≡ | ≡ | ∫ | ∫ | ‾ | ‾ | → | → | ||
| α | α | η | η | μ | μ | π | π | θ | θ |
| β | β | γ | γ | ν | ν | ψ | ψ | υ | υ |
| χ | χ | ι | ι | ω | ω | ρ | ρ | ξ | ξ |
| δ | δ | κ | κ | ο | ο | σ | σ | ζ | ζ |
| ε | ε | λ | λ | φ | φ | τ | τ | ||
| Α | Α | Η | Η | Μ | Μ | Π | Π | Θ | Θ |
| Β | Β | Γ | Γ | Ν | Ν | Ψ | Ψ | Υ | Υ |
| Χ | Χ | Ι | Ι | Ω | Ω | Ρ | Ρ | Ξ | Ξ |
| Δ | Δ | Κ | Κ | Ο | Ο | Σ | Σ | Ζ | Ζ |
| Ε | Ε | Λ | Λ | Φ | Φ | Τ | Τ | ς | ς |
HTML常用特殊字符：只要你认识了 HTML 标记，你便会知道特殊字符的用处。
| HTML 原代码 | 显示结果 | 描述 |
| < | < | 小于号或显示标记 |
| > | > | 大于号或显示标记 |
| & | & | 可用于显示其它特殊字符 |
| " | “ | 引号 |
| ® | ® | 已注册 |
| © | © | 版权 |
| ™ | ™ | 商标 |
|   | 半个空白位 | |
|   | 一个空白位 | |
| | 不断行的空白 |
p br hr
- p表示段落，默认段落之间是有间隔的
- br表示换行
- hr表示页面中的一条线
a标签
< a href="http://www.baidu.com"></a> #当前页面跳转 <a href="http://www.baidu.com" target="_blank"></a> #打开新窗口链接打开
- target属性，_black表示在新的页面打开
- 锚 href='#某个标签的ID' 标签的ID不允许重复
h标签
h标签比较简单,定义字体大小,一共6个
<h1>H1</h1> <h2>H2</h2> <h3>H3</h3> <h4>H4</h4> <h5>H5</h5> <h6>H6</h6>
form标签
form标签(即表格)一般用来提交数据的,大多数时候与select input textarea等等,一起使用
需要注意的是,属性中需要这么写:
<form action="http://192.168.1.1/index/" method="post" enctype="multipart/form-data">
其中method有两种方式,一种post,一种是get.
select标签
看下源码:
<p> <select> <option>北京</option> <option>上海</option> <option>广州</option> </select> <select name="city"> <optgroup label="北京"> <option value="1">西城</option> <option value="2">海淀</option> <option value="3">朝阳</option> </optgroup> <optgroup label="上海"> <option value="4">嘉定</option> <option value="5">虹桥</option> <option value="6">徐汇</option> </optgroup> </select> </p>
input系列
checkbox
选择框,为了提交时数据的统一,方便服务端协调数据,我们需要给定义一个统一的name和不同的value值
爱好(多选):
女1
女2
女3
女4
女5
女6
看下源码:
<div> <p>爱好(多选): <br />女1<input type="checkbox" name="faver" value="1"/> <br />女2<input type="checkbox" name="faver" value="2"/> <br />女3<input type="checkbox" name="faver" value="3"/> <br />女4<input type="checkbox" name="faver" value="4"/> <br />女5<input type="checkbox" name="faver" value="5"/> <br />女6<input type="checkbox" name="faver" value="6"/> </p> </div>
radio
圆形选择框
性别(单选):
男
女
接着来看下源码:
<div> <p>性别(单选): <br />男<input type="radio" name="gender" value="1"/> <br />女<input type="radio" name="gender" value="2"/> </p> </div>
password text
两个可能经常在一起使用,text模式是明文的,password模式是密文
用户名:
密码:
源码:
<div style="border: 1px solid red"> <p>用户名: <input type="text" name="ccorz_name"/></p> <p>密码: <input type="password" name="ccorz_pwd"/></p> </div>
button
按钮,一共有3种
- 无任何功能的按钮button
- 重置表单中的数据reset
- 提交表单中的数据submit
<input type="submit" value="submit" /> <input type="reset" value="reset" /> <input type="text" name="button" />
file
上传文件
文件:
代码:
<input type="text" name="button" />
需要注意的一个是,需要在form定义enctype='multipart/form-data' method='POST',看代码:
<form action="http://www.baidu.com/index/" enctype="multipart/form-data" method="post">
textarea
比如备注,需要多行输入时候可以用这种模式:
备注:
代码:
<p>备注: <textarea name="extra"></textarea></p>
label
for属性:表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。
ACCESSKEY属性:表示访问Label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点
源码:
<div> 姓名：<input id="name1" type="text"> 婚否：<input id="marriy1" type="checkbox"> <br> <label for="name2">姓名：<input id="name2" type="text"></label> <label for="marriy2">婚否：<input id="marriy2" type="checkbox"></label> </div>
ul ol dl
与li标签共用
ul,实心圆点:
- ul1
- ul1
- ul1
code:
<ul> <li>ul1</li> <li>ul1</li> <li>ul1</li> </ul>
ol,数字排序:
- ul1
- ul1
- ul1
code:
<ol> <li>ul1</li> <li>ul1</li> <li>ul1</li> </ol>
dl,与dt dd 配合使用,分层:
code:
<dl> <dt>山西省</dt> <dd>太原市</dd> <dd>太原市</dd> <dd>太原市</dd> <dt>山西省</dt> <dd>太原市</dd> <dd>太原市</dd> <dd>太原市</dd> </dl> 山西省 太原市 太原市 太原市 山西省 太原市 太原市 太原市
table
表格,border属性表示线条的粗细度,thead 表头;tbody td 表内容;tr表示一行表格.
| 姓名 | 年龄 | 性别 |
|---|---|---|
| cc | 18 | male |
| cd | 19 | male |
| dd | 20 | male |
code:
<table border="1"> <thead> <tr><th>姓名</th> <th>年龄</th> <th>性别</th> </tr></thead> <tbody> <tr><td>cc</td> <td>18</td> <td>male</td> </tr></tbody> <tbody> <tr><td>cd</td> <td>19</td> <td>male</td> </tr></tbody> <tbody> <tr><td>dd</td> <td>20</td> <td>male</td> </tr></tbody> </table>
合并单元格,要注意,行和列设置后,后面内容的注释:
| 姓名 | 性别 | |
|---|---|---|
| cc | 18 | male |
| 18 | male | |
| cc | 18 | male |
| cc | 18 | male |
code:
<table border="1"> <thead> <tr><th colspan="2">姓名</th> <!--<th>年龄</th>--> <th>性别</th> </tr></thead> <tbody> <tr> <td rowspan="2">cc</td> <td>18</td> <td>male</td> </tr> <tr> <!--<td >cc</td>--> <td>18</td> <td>male</td> </tr> <tr> <td>cc</td> <td>18</td> <td>male</td> </tr> <tr> <td>cc</td> <td>18</td> <td>male</td> </tr> </tbody> </table>
fieldset
用的比较少,先记录下吧,legend将内容放置于线条中
code:
<div> <fieldset> <legend>login</legend> <p>用户名<input type="text"/></p> <p>密码<input type="password"/></p> </fieldset> </div>
iframe
比较有意思的东西,可以直接内嵌网页
code:
<iframe style="width: 100%;height: 250px;" src="http://www.autohome.com"></iframe>
浙公网安备 33010602011771号