首页 > 代码库 > HTML的基本知识

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   提供有关页面的元信息,例:页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

 

accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名(引用样式表中的类)。
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。

head头部之间的标签

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

<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> 
accept-charset 规定在被提交表单中使用的字符集(默认:页面字符集)。
action 规定向何处提交表单的地址(URL)(提交页面)。
autocomplete 规定浏览器应该自动完成表单(默认:开启)。
enctype 规定被提交数据的编码(默认:url-encoded)。
method 规定在提交表单时所用的 HTTP 方法(默认:GET)。
name 规定识别表单的名称(对于 DOM 使用:document.forms.name)。
novalidate 规定浏览器不验证表单。
target 规定 action 属性中地址的目标(默认:_self)。

 

更多的input标签类型

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表头。表格样式到后期可以自己修改。
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
<colgroup> 定义表格列的组。

 

fieldset组合表单标签

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

address标签

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

 

 

 总而言之,我是一名新手,需要通过不断的努力和学习才能掌握这门语言。希望接下来的能和你们一起学习。

HTML的基本知识