html 常识
什么是 HTML
htyper text markup language 即超文本标记语言
超文本: 就是指页面内可以包含图片, 链接, 甚至音乐, 程序等非文字元素.
标记语言: 标记 (标签) 构成的语言.
网页 ==HTML 文档, 由浏览器解析, 用来展示的
静态网页: 静态的资源, 如 xxx.html
动态网页: html 代码是由某种开发语言根据用户请求动态生成的
什么是标签
是由一对尖括号包裹的单词构成 例如: <html> * 所有标签中的单词不可能以数字开头.
标签不区分大小写.<html> 和 <HTML>. 推荐使用小写.
标签分为两部分: 开始标签 < a> 和 结束标签</a>. 两个标签之间的部分 我们叫做标签体.
有些标签功能比较简单. 使用一个标签即可. 这种标签叫做自闭和标签. 例如: <br/> <hr/> <input /> <img />
标签可以嵌套. 但是不能交叉嵌套. <a><b></a></b>
标签属性
通常是以键值对形式出现的. 例如 name="aaron"
属性只能出现在 开始标签 或 自闭和标签中.
属性名字全部小写. * 属性值必须使用双引号或单引号包裹 例如 name="aaron"
如果属性值和属性名完全一样. 直接写属性名即可. 例如 readonly
标签分类
标签一般分为两种:
1. 块级标签
霸占一整行的标签. 比如:<h>,<p>,<div>,<form > 等
2. 行内标签
可以多个标签共同占用一行的标签. 比如:<span>,<a>,<input>,<img>,<label > 等
3. 块级标签特点
总是在新行上开始
宽度缺省是它的容器的 100%, 除非设定一个宽度
它可以容纳内联元素和其他块元素
4. 行内标签特点
和其他元素都在一行上
宽度就是它的文字或图片的宽度, 不可改变
内联元素只能容纳文本或者其他内联元素
特殊字符
< >"©®
html 文件结构
标签使用范围说明
- window.top.document.compatMode:
- //BackCompat: 怪异模式, 浏览器使用自己的怪异模式解析渲染页面.
- //CSS1Compat: 标准模式, 浏览器使用 W3C 的标准解析渲染页面.
- <meta http-equiv="Refresh"Content="30"> 每隔 30 秒刷新一次网页
- <meta http-equiv="Refresh"Content="5;Url=http://www.baidu.com"> 过 5 秒跳转到某网页.(关于跳转, 可以在应急的时候用, 一般可以用 js 实现)
- <meta name="description" content="为您提供最新的信息"> 网站描述
- <title > 标签
- <link rel="stylesheet" type="text/css" href="css/common.css"> # rel 指的是类型, href 是存放 css 文件的文件夹
- <style > 标签
- <hn>:n 的取值范围是 1~6; 从大到小. 用来表示标题.
- <p>: 段落标签. 包裹的内容被换行. 并且也上下内容之间有一行空白.
- <b> <strong>: 加粗标签.
- <strike>: 为文字加上一条中线.
- <em>: 文字变成斜体.
- <sup > 和 < sub>: 上角标 和 下角表.
- <br>: 换行.
- <hr>: 水平线
- <div>: 白板, 本身没有特性, 块级标签.
- <span>: 白板, 本身没有特性, 行内标签.
- <sup > 和 < sub > 的使用
- <p > 这个文本包含 <sub > 下标</sub > 文本.</p>
- <p > 这个文本包含 <sup > 上标</sup> 文本.</p>
- <label > 标签
- <label for="xxx">姓名</label>
- <input id="xxx" type="text">
- <p > 选择你的地址</p>
- <select name="city">
- <option value="1" selected="selected">北京</option> <!-- selected 默认选项 -->
- <option value="2">深圳</option>
- <option value="3">上海</option>
- <option value="4">杭州</option>
- <option value="5">成都</option>
- </select>
- <p > 请选择籍贯</p>
- <select name="jiguan">
- <optgroup label="河北省">
- <option value="1">石家庄</option>
- <option value="2">保定</option>
- <option value="3">邯郸</option>
- </optgroup>
- <optgroup label="湖南">
- <option > 长沙</option>
- <option > 株洲</option>
- <option > 湘潭</option>
- </optgroup>
- <optgroup label="广东">
- <option > 广州</option>
- <option > 深圳</option>
- <option > 佛山</option>
- <option > 珠海</option>
- <option > 中山</option>
- </optgroup>
- </select>
- <form > 标签
- enctype="multipart/form-data"
- <a > 标签
- <a href="#i1">第一章</a>
- <a href="#i2">第二章</a>
- <a href="#i3">第三章</a>
- <a href="#i4">第四章</a>
- <a href="#i5">第五章</a>
- <div id="i1" style="height:600px;">第一章的内容 <p > 绪论</p></div>
- <div id="i2" style="height:600px;">第二章的内容 <p > 公元 500 年</p></div>
- <div id="i3" style="height:600px;">第三章的内容 <p > 公园 1000 年</p></div>
- <div id="i4" style="height:600px;">第四章的内容 <p > 公元 1900 年</p></div>
- <div id="i5" style="height:600px;">第五章的内容 <p > 公元 2010 年</p></div>
- <ul>: 无序列表
- <ol>: 有序列表
- <li>: 列表中的每一项.
- <dl> 定义列表
- <dt> 列表标题
- <dd> 列表项
- <ul> 标签
- <ul>
- <li>Coffee</li>
- <li>Milk</li>
- </ul>
- Coffee
- Milk
- <ol > 标签
- <ol>
- <li>Coffee</li>
- <li>Milk</li>
- </ol>
- 1.Coffee
- 2.Milk
- <dl > 标签
- <dl>
- <dt>Coffee</dt>
- <dd>- black hot drink</dd>
- <dt>Milk</dt>
- <dd>- white cold drink</dd>
- </dl>
- Coffee
- - black hot drink
- Milk
- - white cold drink
- <table > 标签
- <tr>: table row
- <th>: table head cell
- <td>: table data cell
- <h4 > 单元格跨两格:</h4>
- <table border="1">
- <tr>
- <th>Name</th>
- <th colspan="2">Telephone</th>
- </tr>
- <tr>
- <td>Bill Gates</td>
- <td>555 77 854</td>
- <td>555 77 855</td>
- </tr>
- </table>
- <h4 > 单元格跨两列:</h4>
- <table border="1">
- <tr>
- <th>First Name:</th>
- <td>Bill Gates</td>
- </tr>
- <tr>
- <th rowspan="2">Telephone:</th>
- <td>555 77 854</td>
- </tr>
- <tr>
- <td>555 77 855</td>
- </tr>
- </table>
来源: http://www.bubuko.com/infodetail-2751322.html