HTML的基本知识

基本HTML知识
 1 Doctype
 2 
 3 　　Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档
 4 
 5 有和无的区别
 6 
 7 　　BackCompat：标准兼容模式未开启（或叫怪异模式[Quirks mode]、混杂模式）
 8 
 9 　　CSS1Compat：标准兼容模式已开启（或叫严格模式[Standards mode/Strict mode]）
10 
11 　 这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
12 
13 　　Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档, dtd文件则包含了标记、attributes 、properties、约束规则。
14 
15 　　Meta(metadata information)
16 
17 　　提供有关页面的元信息，例：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

 1 关键词
 2 < meta name="keywords" content="专访,11,43" >
 3 
 4 Link
 5 css外部样式表
 6 < link rel="stylesheet" type="text/css" href="css1.css" >
 7 
 8 icon图标
 9 < link rel="shortcut icon" href="image/favicon.ico">
10 
11 Style
12 在页面中写样式
13 < style type="text/css" >
14 #xx{
15       background-color: red;
16    }
17 .xx{...}
18 .xx .aa{...}
19 < /style>
20 
21 引进文件，本地引用绝对路径
22 < script type="text/javascript" src="http://www.xxx/x/x.js"> </script >
23 
24 写js代码
25 < script type="text/javascript" > ... </script >

 1 标签一般分为两种：块级标签和行内标签
 2 行内标签:a、span、input、i、b等多元素可以并排显示，只占当前行位置
 3 块级标签:div、h1~h6、p、br、等是直接占据自身宽的一行。不能多元素并存同一行，比较横行霸道。
 4 
 5 符号
 6 可以在body标签内通过前缀&添加特殊符号。
 7 
 8 p 和 br
 9 p表示段落，默认段落之间是有间隔的！
10 br 是换行。
11 hr是分割线。
12 
13 a标签
14 < a href="http://www.xxx.com.cn" target="_blank|_self|_parent|_top|framename"> </a>
15 超链接锚属性，点击口可以跳转到其他地址，_blank表示在新的页面打开,_self在当前窗口打开,_parent是载入父窗口，_top在整个窗口中打开，framename指定窗口打开。

 1 在浏览器中，用户需要提交信息进行交互操作。在HTML里有很多提供该功能的标签。
 2 <select>该标签是下拉选项
 3    <option value="北京">北京</option>
 4    <option value="上海">上海</option>
 5    <option value="深圳" selected="selected" >深圳</option>
 6 </select>
 7 
 8 option标签是选项。 value是提交数据后台接受的值 selected是用户端默认显示的值。
 9 
10 <form method="GET/POST" action="">
11       用户名：<input type="text" name="user" >
12        密码 ：<input type="password" name="password">
13       <input type="submit" value="submit">
14 </form>
15 form表单是提交数据。 
16 method提交方式
17 GET方式会将提交信息呈现在地址栏里，容量大，保密性差。
18 POST方式相对于来说保密性好，但是容量小。
19 action当提交表单时
20 向何处发送数据。
21 input是用于搜集用户信息的标签集。
22 type="text"类型是文本输入框。
23 name="user"是该标签的名字。
24 password密码输入框类型。
25 submit提交信息数据。

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"
ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
form elements
 .
</form> 

1 <input type = "checkbox/radio/file/" name=‘xx‘ />
2 Checkbox  复选框
3 radio 单选框   在单选框中，如果需要互斥的属性，需要将name设置为同一个
4 file  上传文件  提交文件时： enctype=‘multipart/form-data‘ method=‘POST‘

 1 <textarea rows="3" col="20">这意思代表3行，每行最多20宽</textarea>
 2 autofocus="autofocus" 当页面加载完毕后，文本自动成为焦点。
 3 disbled="disbled"  表示禁用该文本区。
 4 form="form_id" 规定文本的一个或多个表单。
 5 maxlength="99" 规定文本的最多文字数。
 6 name="名称" 规定文本区的名称
 7 placeholder="这是提示"规定描述文本区域预期值的简短提示。
 8 readonly="readonly" 规定文本区为只读模式
 9 required="required"  规定文本区必须填写
10 wrap="hard/soft"  规定换行方式。

 1 <ul>
 2      <li>无序列表1</li>
 3      <li>无序列表2</li>
 4      <li>无序列表3</li>
 5 </ul>
 6 无序列表的列表符号为小圆点。可以在CSS里进行修改和替换。
 7 
 8 <ol>
 9      <li>有序列表1</li>
10      <li>有序列表2</li>
11      <li>有序列表3</li>
12 </ol>
13 有序列表的列表符号均是顺序阿拉伯数字加.构成。
14 
15 <dl>
16      <dt>自定义列表1的标题</dt>
17      <dd>这是自定义列表1的子列表</dd>
18      <dt>自定义列表2的标题</dt>
19      <dd>这是自定义列表2的子列表</dd>
20 </dl>
21 自定义列表以<dl>开头，标题头用<dt>表示  子列表由<dd>表示

 1 表格有两种显示方式
 2 第一种没有th表头的
 3    <table>
 4             <tr>
 5                 <td>1</td>
 6                 <td>2</td>
 7             </tr>
 8             <tr>
 9                 <td>3</td>
10                 <td>4</td>
11             </tr>
12     </table>   
13 
14 第二种有表头的
15 
16    <table>
17             <th>表头1</th>
18             <th>表头2</th>
19             <tr>
20                 <td>1</td>
21                 <td>2</td>
22             </tr>
23             <tr>
24                 <td>3</td>
25                 <td>4</td>
26             </tr>
27     </table>     
28 
29 通常有多少个子td就有多少个th表头。表格样式到后期可以自己修改。

<fieldset>
    <legend>框标题</lengend>
      体重：<input type="text">
      身高：<input type="text">
</fieldset>
这个组合表单元素是非常不错的样式。外部包裹着一个巨大的边框加上标题省去了很多CSS设定样式的麻烦。不同浏览器会有不同的效果解析方式。可能有有3D效果，特殊的边界等等...甚至可以创造一个子表单元素来处理这些元素。fieldset没有必须或者唯一的属性。

1 <address>
2 地址：<a href="mailto:415763469@qq.com">这里是我的邮箱</a>.<br> 
3 </address>
4 留有作者信息提示的一个板块。