首页 > 代码库 > 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的基本知识
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。