正文

html之常用元素

IP云
IP云V管理员/0 阅读
11/28
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

基础： 

<!DOCTYPE>

定义文档的类型

语法：

html5

<!DOCTYPE html>

<html>

定义html文档，这个就不多说了！

<title>

定义文档的标题

提示：<title> 标签是 <head> 标签中唯一要求包含的东西。

<body>

定义文档的主体

<h1>...

定义html的标题

<p>

定义段落

<br>

定义简单的换行

<hr>

定义水平线

<!--...-->

定义注释

格式： 

<abbr>

定义缩写

实例：

The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

<address>

定义文档作者的联系信息

提示：<address> 元素通常连同其他信息被包含在 <footer> 元素中。

<pre>

定义预格式的文本，在其中的文本会保留格式。

说明：一般来说，格式类元素都可以通过css来实现，也推荐使用css方式实现。

表单： 

<form>

定义表单

常用属性：

action 提交表单时，会将数据发送到何处

autocomplete 默认on，就是一个记忆功能。

method="post|get"

target="_blank|_self"
enctype 定义表单中的数据在发送到服务器之前，如何进行编码，值为：

application/x-www-form-urlencoded    在发送前编码所有字符（默认）

multipart/form-data

不对字符编码。

在使用包含文件上传控件的表单时，必须使用该值。

text/plain    空格转换为 "+" 加号，但不对特殊字符编码。
<input>
用于收集用户输入的信息

常用属性

accept="image/gif,image/jpg" 规定能够通过文件上传进行提交的文件类型。

注意：只有当tyep="file"时才有效。

checked 属性规定在页面加载时应该被预先选定的 input 元素。

注意：checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

disabled 禁用input元素

formaction=url 覆盖 form 元素的 action 属性。

注意：该属性适用于 type="submit" 以及 type="image"。

max 规定输入字段所允许的最大值。

注释：max 和 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。

maxlength 规定输入字段的最大长度，以字符个数计

注：maxlength 属性与 <input type="text"> 或 <input type="password"> 配合使用。

multiple 规定可选多个文件

语法：

<input multiple="multiple">

注释：multiple 属性使用欧冠与以下 <input> 类型：email 和 file。

pattern 规定用于验证输入字段的模式。

语法：

<input pattern="regexp">

注释：pattern 属性适用于以下 <input> 类型：text, search, url, telephone, email 以及 password 。

placeholder 提示信息

注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。

readonly 	把输入字段设置为只读。

注意：readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。

required 规定必需在提交之前填写输入字段。

语法：

<input required="required">

注释：required 属性适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

value input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：

    type="button", "reset", "submit" - 定义按钮上的显示的文本

    type="text", "password", "hidden" - 定义输入字段的初始值

    type="checkbox", "radio", "image" - 定义与输入相关联的值

注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

注释：value 属性无法与 <input type="file"> 一同使用。

type 定义input元素的类型

button 	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。

checkbox 	定义复选框。

file 	定义输入字段和 "浏览"按钮，供文件上传。

hidden 	定义隐藏的输入字段。

image 	定义图像形式的提交按钮。

password 	定义密码字段。该字段中的字符被掩码。

radio 	定义单选按钮。

reset 	定义重置按钮。重置按钮会清除表单中的所有数据。

submit 	定义提交按钮。提交按钮会把表单数据发送到服务器。

text 	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

<textarea>

cols 属性规定 textarea 的可见宽度。

rows 属性规定 textarea 的可见高度。

<button>

注释：如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的按钮值。请使用 input 元素在 HTML 表单中创建按钮。

<select>

select 元素可创建单选或多选菜单。

<select&> 元素中的 <option> 标签用于定义列表中的可用选项。

<optgroup>

<optgroup> 标签定义选项组。

optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。

常用属性：label 	text 	为选项组规定描述。

<option>

在 HTML 中，<option> 没有结束标签。

<label>

<label> 标签为 input 元素定义标注（标记）。

常用属性：

for 	id 	规定 label 绑定到哪个表单元素。

form 	formid 	规定 label 字段所属的一个或多个表单。

<datalist>

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

实例：

<input id="myCar" list="cars" />

<datalist id="cars">

  <option value="BMW">

  <option value="Ford">

  <option value="Volvo">

</datalist>

图像： 

<img>

<img> 标签有两个必需的属性：src 属性 和 alt 属性。

常用属性：

必须

alt 	text 	规定图像的替代文本。

src 	URL 	规定显示图像的 URL。

可选

height px|% 定义图像的高度。

width px|% 定义图像的宽度

音视频： 

<video>

定义视频

autoplay 	autoplay 	如果出现该属性，则视频在就绪后马上播放。

controls 	controls 	如果出现该属性，则向用户显示控件，比如播放按钮。

height 	pixels 	设置视频播放器的高度。

loop 	loop 	如果出现该属性，则当媒介文件完成播放后再次开始播放。

muted 	muted 	规定视频的音频输出应该被静音。

poster 	URL 	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

preload 	preload 	

如果出现该属性，则视频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src 	url 	要播放的视频的 URL。

width 	pixels 	设置视频播放器的宽度。

<audio>

定义音频

autoplay 	autoplay 	如果出现该属性，则音频在就绪后马上播放。

controls 	controls 	如果出现该属性，则向用户显示控件，比如播放按钮。

loop 	loop 	如果出现该属性，则每当音频结束时重新开始播放。

muted 	muted 	规定视频输出应该被静音。

preload 	preload 	

如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。

src 	url 	要播放的音频的 URL。

链接： 

<a>

常用属性：

href 	URL 	规定链接指向的页面的 URL。

rel 	text 	规定当前文档与被链接文档之间的关系。

target 	规定在何处打开链接文档。

    _blank

    _parent

    _self

    _top

    framename

<link>

<link> 标签定义文档与外部资源的关系。

常用属性：

href 	URL 	规定被链接文档的位置。

rel 	

    alternate

    author

    help

    icon

    licence

    next

    pingback

    prefetch

    prev

    search

    sidebar

    stylesheet

    tag

	规定当前文档与被链接文档之间的关

列表： 

<ul>

无序列表

<ol>

有序列表

<li>

<li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。

表格： 

<table>

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

常见属性

border 	pixels 	规定表格边框的宽度。

cellpadding px|%  规定单元边沿与其内容之间的空白。

cellspacing pixels|%  规定单元格之间的空白。

frame

    void

    above

    below

    hsides

    lhs

    rhs

    vsides

    box

    border

	规定外侧边框的哪个部分是可见的。

rules

    none

    groups

    rows

    cols

    all

	规定内侧边框的哪个部分是可见的。

summary 	text 	规定表格的摘要。

width %|px 规定表格的宽度。

<caption>

caption 元素定义表格标题，紧跟着table元素

<th> 	定义表格中的表头单元格。

<tr> 	定义表格中的行。

<td> 	定义表格中的单元。

<thead> 	定义表格中的表头内容。

<tbody> 	定义表格中的主体内容。

<tfoot> 	定义表格中的表注内容（脚注）。

样式\节： 

<style>

定义样式

<div>

定义文档中的分区或节（division/section）。

<span>

用来组合文档中的行内元素。

元信息： 

<head>

定义头部

<meta>

定义元信息

常见属性：

content 	some_text 	定义与 http-equiv 或 name 属性相关的元信息

http-equiv 	

    content-type

    expires

    refresh

    set-cookie

	把 content 属性关联到 HTTP 头部。

name 	

    author

    description

    keywords

    generator

    revised

    others

	把 content 属性关联到一个名称。

scheme 	some_text 	定义用于翻译 content 属性值的格式。

编程： 

<script>

常见属性：

src 	URL 	规定外部脚本文件的 URL。

async 	async 	规定异步执行脚本（仅适用于外部脚本）。

<embed>

定义嵌入的内容，比如插件。

属性：

height 	pixels 	设置嵌入内容的高度。

src 	url 	嵌入内容的 URL。

type 	type 	定义嵌入内容的类型。

width 	pixels 	设置嵌入内容的宽度。

相关阅读

目录[+]