ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

三、HTML标签

2021-01-31 15:57:19  阅读:124  来源: 互联网

标签:脚本 定义 标签 元素 语法 HTML 规定 属性


HTML标签

1 标题

1.1 <html>

作用:定义 HTML 文档
属性:

描述
manifestURL定义一个 URL,在这个 URL 上描述了文档的缓存信息

语法:

<html manifest="URL"> 
</html>

1.2 <body>

作用:定义文档的主体

语法:

<html> 
<body>
文档内容......
</body> 
</html>

1.3 <h1> ~ <h6>

作用:定义 HTML 标题
语法:

<h1>这是标题 1</h1> 
<h2>这是标题 2</h2> 
<h3>这是标题 3</h3> 
<h4>这是标题 4</h4> 
<h5>这是标题 5</h5> 
<h6>这是标题 6</h6>

1.4 <hr>

作用:定义水平线
语法:

<hr>

1.5 <!–…-->

作用:定义注释
语法:

<!-- 这是一个注释 -->

1.6 <!DOCTYPE>

作用:定义文档类型
语法:

<!DOCTYPE html>

2 段落

2.1 <p>

作用:定义一个段落
语法:

<p>这是一个段落</p>

2.1 <br>

作用:插入单个折行(换行)
语法:

<p> 
使用&lt;br&gt;元素<br>在文本中<br>换行。 
</p>

3 文本格式化

3.1 <b>

作用:定义粗体文本
语法:

<p>这是一个普通的文本 <b>这是一个加粗文本</b> </p>

3.2 <em>

作用:定义着重文字
语法:

<em>强调文本</em>

3.3 <i>

作用:定义斜体字
语法:

<p>这是<i>斜体</i></p>

3.4 <small>

作用:定义小号字
语法:

<p><small>小号字</small></p>

3.5 <strong>

作用:定义加重语气
语法:

<strong>加粗文本</strong>

3.6 <sub>

作用:定义下标字
语法:

<p>这是 <sub>下标</sub>演示</p>

3.7 <sup>

作用:定义上标字
语法:

<p>这是<sup>上标</sup>演示</p>

3.8 <ins>

作用:定义插入字(下划线)
语法:

<p>这是<ins>插入</ins>演示</p>

3.9 <del>

作用:定义删除字
语法:

<p>这是<del>删除</del> 演示</p>

4 引文

4.1 <abbr>

作用:定义缩写
语法:

这是<abbr title="suoxie">缩写</abbr>

4.2 <address>

作用:定义地址
语法:

<address>这是地址</address>

4.3 <bdo>

作用:定义文字方向
属性:

属性描述
dirltr/rtl规定 <bdo> 元素内的文本方向。

语法:

<bdo dir="rtl">该段落文字从右到左显示。</bdo>

4.4 <blockquote>

作用:定义长的引用
属性:

属性描述
citeURL规定引用的来源

语法:

<blockquote cite="url">这是长引用</blockquote>

4.5 <q>

作用:定义短的引用语
属性:

属性描述
citeURL规定引用的来源

语法:

<qcite="url">这是长引用</q>

4.6 <cite>

作用:定义引用、引证
语法:

<cite>这是引用</cite>

4.7 <dfn>

作用:定义一个定义项目
语法:

<dfn>这是定义项目</dfn>

5 链接

5.1 <a>

作用:定义一个超级链接
属性:

属性描述
charsetchar_encodingHTML5 不支持。规定目标 URL 的字符编码
coordscoordinatesHTML5 不支持。规定链接的坐标
downloadfilename指定下载链接
hrefURL规定链接的目标 URL
hreflanglanguage_code规定目标 URL 的基准语言。仅在 href 属性存在时使用
mediamedia_query规定目标 URL 的媒介类型。默认值:all。仅在 href 属性存在时使用
namesection_nameHTML5 不支持。规定锚的名称
relalternate/author/bookmark/help/license/next/nofollow/noreferrer/prefetch/prev/search/tag规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用
revtextHTML5 不支持。规定目标 URL 与当前文档之间的关系
shapedefault/rect/circle/polyHTML5 不支持。规定链接的形状
target_blank/_parent/_self/_top规定在何处打开目标 URL。仅在 href 属性存在时使用
typeMIME_type规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用

语法:

<a href="URL">访问地址</a>

6 头部

6.1 <head>

作用:定义了文档的信息
属性:

属性描述
profileURLHTML5 不支持。规定文档 URL 的一系列规则。这些规则能被浏览器识别并且准确读取 标签的内容属性中的信息

语法:

<html>
<head> 
</head> 
<body>
文档内容......
</body> 
</html>

6.2 <title>

作用:定义了文档的标题
语法:

<html>
<head> 
<title>文档标题</title>
</head> 
<body>
文档内容......
</body> 
</html>

6.3 <base>

作用:定义了页面链接标签的默认链接地址

属性描述
hrefURL规定页面中所有相对链接的基准 URL
target_blank/_parent/_self/_top规定页面中所有的超链接和表单在何处打开。该属性会被每个链接中的 target 属性覆盖

语法:

<head> 
<base href="URL" target="_blank">
</head> 

6.4 <link>

作用:定义了一个文档和外部资源之间的关系
属性:

属性描述
charsetchar_encodingHTML5 不支持该属性。 定义被链接文档的字符编码方式
hrefURL定义被链接文档的位置
hreflanglanguage_code定义被链接文档中文本的语言
mediamedia_query规定被链接文档将显示在什么设备上
relalternate/archives/author/bookmark/external/first/help/iconlast/license/next/nofollow/noreferrer/pingback/prefetch/prev/search/sidebar/stylesheet/tagup必需。定义当前文档与被链接文档之间的关系
revreversed relationshipHTML5 不支持该属性。 定义被链接文档与当前文档之间的关系
sizesHeightxWidth
any定义了链接属性大小,只对属性 rel=“icon” 起作用
target_blank/_self/_top/_parentHTML5 不支持该属性。 定义在何处加载被链接文档
typeMIME_type规定被链接文档的 MIME 类型

语法:

<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>

6.5 <meta>

作用:定义了HTML文档中的元数据
属性:

属性描述
charsetcharacter_set定义文档的字符编码
contenttext定义与 http-equiv 或 name 属性相关的元信息
http-equivcontent-type/default-style/refresh把 content 属性关联到 HTTP 头部
nameapplication-name/author/description/generator/keywords把 content 属性关联到一个名称
schemeformat/URIHTML5不支持。 定义用于翻译 content 属性值的格式

语法:

<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>

6.6 <script>

作用:定义了客户端的脚本文件

属性描述
asyncasync规定异步执行脚本(仅适用于外部脚本)
charsetcharset规定在脚本中使用的字符编码(仅适用于外部脚本)
deferdefer规定当页面已完成解析后,执行脚本(仅适用于外部脚本)
srcURL规定外部脚本的 URL
typeMIME-type规定脚本的 MIME 类型
xml:spacepreserveHTML5 不支持。规定是否保留代码中的空白

语法:

<script>
document.write("Hello World!")
</script>

6.7 <style>

作用:定义了HTML文档的样式文件

属性描述
mediamedia_query为样式表规定不同的媒体类型
scopedscoped如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素
typetext/css规定样式表的 MIME 类型

语法:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
</head> 
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
</body> 
</html>

7 图像

7.1 <img>

作用:定义图像
属性:

属性描述
aligntop/bottom/middle/left/rightHTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像
alttext规定图像的替代文本
borderpixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框
crossoriginanonymous/use-credentials设置图像的跨域属性
heightpixels规定图像的高度
hspacepixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白
ismapismap将图像规定为服务器端图像映射
longdescURLHTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL
srcURL规定显示图像的 URL
usemap#mapname将图像定义为客户器端图像映射
vspacepixelsHTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白
widthpixels规定图像的宽度

语法:

<img src="URL" alt="tupian" width="50" height="50">

7.2 <map>

作用:定义图像地图
属性:

属性描述
namemapname必需。为 image-map 规定的名称

语法:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

7.3 <area>

作用:定义图像地图中的可点击区域
属性:

属性描述
alttext规定区域的替代文本。如果使用 href 属性,则该属性是必需的
coordscoordinates规定区域的坐标
hrefURL规定区域的目标 URL
hreflanglanguage_code规定目标 URL 的语言
mediamedia query规定目标 URL 是为何种媒介/设备优化的。默认:all
nohrefvalueHTML5 不支持。 规定没有相关链接的区域
relalternate/author/bookmark/help/license/next/nofollow/noreferrer/prefetch/prev/search/tag规定当前文档与目标 URL 之间的关系
shapedefault/rect/circle/poly规定区域的形状
target_blank/_parent/_self/_top规定在何处打开目标 URL
typeMIME_type规定目标 URL 的 MIME 类型

语法:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

8 表格

8.1 <table>

作用:定义表格
属性:

属性描述
alignleft/center/rightHTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式
bgcolorrgb(x,x,x)/#xxxxxx/colornameHTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色
border*规定表格单元是否拥有边框
cellpaddingpixelsHTML5 不支持。规定单元边沿与其内容之间的空白
cellspacingpixelsHTML5 不支持。规定单元格之间的空白
framevoid/above/below/hsides/lhs/rhs/vsides/box/borderHTML5 不支持。规定外侧边框的哪个部分是可见的
rulesnone/groups/rows/cols/allHTML5 不支持。规定内侧边框的哪个部分是可见的
summarytextHTML5 不支持。规定表格的摘要
widthpixels/%HTML5 不支持。规定表格的宽度

语法:

<table border="1"> 
</table>

8.2 <th>

作用:定义表格的表头
属性:

属性描述
abbrtextHTML5 不支持。 规定表头单元格中内容的缩写版本
alignleft/right/center/justify/charHTML5 不支持。 规定表头单元格内容的水平对齐方式
axiscategory_nameHTML5 不支持。 对表头单元格进行分类
bgcolorrgb(x,x,x)/#xxxxxx/colornameHTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的背景颜色
charcharacterHTML5 不支持。 规定根据哪个字符来进行内容的对齐
charoffnumberHTML5 不支持。 规定对齐字符的偏移量
colspannumber规定表头单元格可横跨的列数
headersheader_id规定与表头单元格相关联的一个或多个表头单元格
heightpixels/%HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的高度
nowrapnowrapHTML5 不支持。HTML 4.01 已废弃。 规定表头单元格中的内容是否折行
rowspannumber规定表头单元格可横跨的行数
scopecol/colgroup/row/rowgroup规定表头单元格是否是行、列、行组或列组的头部
valigntop/middle/bottom/baselineHTML5 不支持。 规定表头单元格内容的垂直排列方式
widthpixels/%HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的宽度

语法:

<th>第一列</th>
<th>第二列</th> 

8.3 <tr>

作用:定义表格的行
属性:

属性描述
alignright/left/center/justify/charHTML5 不支持。定义表格行的内容对齐方式
bgcolorrgb(x,x,x)/#xxxxxx/colornameHTML5 不支持。HTML 4.01 已废弃。 规定表格行的背景颜色
charcharacterHTML5 不支持。规定根据哪个字符来进行文本对齐
charoffnumberHTML5 不支持。规定第一个对齐字符的偏移量
valigntop/middle/bottom/baselineHTML5 不支持。规定表格行中内容的垂直对齐方式

语法:

<table border="1">
<tr>
<th>第一列</th>
<th>第二列</th> 
</tr> 
</table>

8.4 <td>

作用:定义表格单元
属性:

属性描述
abbrtextHTML5 不支持。规定单元格中内容的缩写版本
alignleft/right/center/justify/charHTML5 不支持。规定单元格内容的水平对齐方式
axiscategory_nameHTML5 不支持。对单元格进行分类
bgcolorrgb(x,x,x)/#xxxxxx/colornameHTML5 不支持。HTML 4.01 已废弃。 规定单元格的背景颜色
charcharacterHTML5 不支持。规定根据哪个字符来进行内容的对齐
charoffnumberHTML5 不支持。规定对齐字符的偏移量
colspannumber规定单元格可横跨的列数
headersheader_id规定与单元格相关联的一个或多个表头单元格
heightpixels/%HTML5 不支持。HTML 4.01 已废弃。设置单元格的高度
nowrapnowrapHTML5 不支持。HTML 4.01 已废弃。规定单元格中的内容是否折行
rowspannumber设置单元格可横跨的行数
scopecol/colgroup/row/rowgroupHTML5 不支持。定义将表头单元格与数据单元格相关联的方法
valigntop/middle/bottom/baselineHTML5 不支持。规定单元格内容的垂直排列方式
widthpixels/%HTML5 不支持。HTML 4.01 已废弃。 规定单元格的宽度

语法:

<table border="1">
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>

8.5 <caption>

作用:定义表格标题
属性:

属性描述
alignleft/right/top/bottomHTML5 不支持。HTML 4.01 已废弃。 定义标题的对齐方式

语法:

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

8.6 <colgroup>

作用:定义表格列的组
属性:

属性描述
alignleft/right/center/justify/charHTML5 不支持。规定在列组合中内容的水平对齐方式
charcharacterHTML5 不支持。规定根据哪个字符来对齐列组中的内容
charoffnumberHTML5 不支持。规定第一个对齐字符的偏移量
spannumber规定列组应该横跨的列数
valigntop/middle/bottom/baselineHTML5 不支持。定义在列组合中内容的垂直对齐方式
widthpixels/%/relative_lengthHTML5 不支持。规定列组合的宽度

语法:

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

8.7 <col>

作用:定义用于表格列的属性
属性:

属性描述
alignleft/right/center/justify/charHTML5 不支持。规定与 <col> 元素相关的内容的水平对齐方式
charcharacterHTML5 不支持。规定根据哪个字符来对齐与 <col> 元素相关的内容
charoffnumberHTML5 不支持。规定第一个对齐字符的偏移量
spannumber规定 <col> 元素应该横跨的列数
valigntop/middle/bottom/baselineHTML5 不支持。规定与 <col> 元素相关的内容的垂直对齐方式
width%/pixels/relative_lengthHTML5 不支持。指定<col>元素的宽度

语法:

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

8.8 <thead>

作用:定义表格的页眉
属性:

属性描述
alignright/left/center/justify/charHTML5 不支持。定义 <thead> 元素中内容的对齐方式
charcharacterHTML5 不支持。规定 <thead> 元素中内容根据哪个字符来对进行文本对齐
charoffnumberHTML5 不支持。规定 <thead> 元素中内容的第一个对齐字符的偏移量
valigntop/middle/bottom/baselineHTML5 不支持。规定 <thead> 元素中内容的垂直对齐方式

语法:

<table border="1">
  <thead>
    <tr>
      <th> </th>
      <th> </th>
    </tr>
  </thead> 
</table>

8.9 <tbody>

作用:定义表格的主体
属性:

属性描述
alignright/left/center/justify/charHTML5 不支持。定义 <tbody> 元素中内容的对齐方式
charcharacterHTML5 不支持。规定 <tbody> 元素中内容根据哪个字符来对进行文本对齐
charoffnumberHTML5 不支持。规定 <tbody> 元素中内容的第一个对齐字符的偏移量
valigntop/middle/bottom/baselineHTML5 不支持。规定 <tbody> 元素中内容的垂直对齐方式

语法:

8.10 <tfoot>

作用:定义表格的页脚
属性:

属性描述
alignright/left/centerjustify/charHTML5 不支持。定义
charcharacterHTML5 不支持。规定
charoffnumberHTML5 不支持。规定
valigntop/middle/bottom/baselineHTML5 不支持。规定
元素中内容的对齐方式 元素中内容根据哪个字符来对进行文本对齐 元素中内容的第一个对齐字符的偏移量 元素中内容的垂直对齐方式

语法:

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>

9 列表

9.1 <ol>

作用:定义有序列表
属性:

属性描述
compactcompactHTML5中不支持,不赞成使用。请使用样式取代它。 规定列表呈现的效果比正常情况更小巧
reversedreversed指定列表倒序(9,8,7…)
startnumberHTML5不支持,不赞成使用。请使用样式取代它。 规定列表中的起始点
type1/A/a/I/i规定列表的类型。不赞成使用。请使用样式代替

语法:

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

9.2 <ul>

作用:定义无序列表
属性:

属性描述
compactcompactHTML5 不支持。HTML 4.01 已废弃。 规定列表呈现的效果比正常情况更小巧
typedisc/square/circleHTML5 不支持。HTML 4.01 已废弃。 规定列表的项目符号的类型

语法:

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

9.3 <li>

作用:定义列表项
属性:

属性描述
type1/A/a/I/i/disc/square/circleHTML5 不支持该属性。HTML 4.01 已废弃该属性。 不赞成使用。请使用样式取代它。 规定使用哪种项目符号
valuenumber不赞成使用。请使用样式取代它。 规定列表项目的数字

语法:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

9.4 <dl>

作用:定义列表
语法:

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

9.5 <dt>

作用:自定义列表项
语法:

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

9.6 <dd>

作用:定义自定列表项的描述
语法:

<dl>
  <dt>Coffee</dt>
    <dd>Black hot drink</dd>
  <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

10 区块

10.1 <div>

作用:定义了文档的区域,块级 (block-level)
属性:

属性描述
alignleft/right/center/justifyHTML5 不支持。HTML 4.01 已废弃。 规定 元素中的内容的对齐方式

语法:

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

10.2 <span>

作用:用来组合文档中的行内元素, 内联元素(inline)
语法:

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>

11 表单

11.1 <from>

作用:定义供用户输入的表单
属性:

属性描述
acceptMIME_typeHTML5 不支持。规定服务器接收到的文件的类型。(文件是通过文件上传提交的)
accept-charsetcharacter_set规定服务器可处理的表单数据字符集
actionURL规定当提交表单时向何处发送表单数据
autocompleteon/off规定是否启用表单的自动完成功能
enctypeapplication/x-www-form-urlencoded、multipart/form-data、text/plain规定在向服务器发送表单数据之前如何对其进行编码。(适用于 method=“post” 的情况)
methodget/post规定用于发送表单数据的 HTTP 方法
nametext规定表单的名称
novalidatenovalidate如果使用该属性,则提交表单时不进行验证
target_blank/_self/_parent/_top规定在何处打开 action URL

语法:

<form action="URL" method="post"> 
</form>

11.2 <input>

作用:定义输入域
属性:

属性描述
acceptaudio/ video/ image/ MIME_type规定通过文件上传来提交的文件的类型。 (只针对type=“file”)
alignleft/right/top/middle/bottomHTML5已废弃,不赞成使用。规定图像输入的对齐方式。 (只针对type=“image”)
alttext定义图像输入的替代文本。 (只针对type=“image”)
autocompleteon/offautocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能
autofocusautofocus属性规定当页面加载时 <input> 元素应该自动获得焦点
checkedcheckedchecked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type=“checkbox” 或者 type=“radio”)
disableddisableddisabled 属性规定应该禁用的 <input> 元素
formform_idform 属性规定 <input> 元素所属的一个或多个表单
formactionURL属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type=“submit” 和 type=“image”)
formenctypeapplication/x-www-form-urlencoded、multipart/form-data、text/plain属性规定当表单数据提交到服务器时如何编码(只适合 type=“submit” 和 type=“image”)
formmethodget/post定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type=“submit” 和 type=“image”)
formnovalidateformnovalidateformnovalidate 属性覆盖 <form> 元素的 novalidate 属性
formtarget_blank/_self/_parent/_top规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type=“submit” 和 type=“image”)
heightpixels规定 <input>元素的高度。(只针对type=“image”)
listdatalist_id属性引用 <datalist> 元素,其中包含 元素的预定义选项
maxnumber date属性规定 <input> 元素的最大值
maxlengthnumber属性规定 <input> 元素中允许的最大字符数
minnumber date属性规定 <input>元素的最小值
multiplemultiple属性规定允许用户输入到 <input> 元素的多个值
nametextname 属性规定 <input> 元素的名称
patternregexppattern 属性规定用于验证 <input> 元素的值的正则表达式
placeholdertextplaceholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息
readonlyreadonlyreadonly 属性规定输入字段是只读的
requiredrequired属性规定必需在提交表单之前填写输入字段
sizenumbersize 属性规定以字符数计的 <input> 元素的可见宽度
srcURLsrc 属性规定显示为提交按钮的图像的 URL。 (只针对 type=“image”)
stepnumberstep 属性规定 <input> 元素的合法数字间隔
typebutton/checkbox/color/date/datetime/datetime-local/email/file/hidden/image/month/number/password/radio/range/reset/search/submit/tel/text/time/url/weektype 属性规定要显示的 <input> 元素的类型
valuetext指定 <input> 元素 value 的值
widthpixelswidth 属性规定 <input> 元素的宽度。 (只针对type=“image”)

语法:

<form action="" method="post">
  账号: <input type="text" name="username"><br>
  密码: <input type="password" name="password"><br>
  <input type="submit" value="提交">
</form>

11.3 <textarea>

作用:定义文本域 (一个多行的输入控件)
属性:

属性描述
autofocusautofocus规定当页面加载时,文本区域自动获得焦点
colsnumber规定文本区域内可见的宽度
disableddisabled规定禁用文本区域
formform_id定义文本区域所属的一个或多个表单
maxlengthnumber规定文本区域允许的最大字符数
nametext规定文本区域的名称
placeholdertext规定一个简短的提示,描述文本区域期望的输入值
readonlyreadonly规定文本区域为只读
requiredrequired规定文本区域是必需的/必填的
rowsnumber规定文本区域内可见的行数
wraphard/soft规定当提交表单时,文本区域中的文本应该怎样换行

语法:

<textarea rows="10" cols="30">
这是一个文本框。
</textarea>

11.4 <label>

作用:定义了 元素的标签,一般为输入标题
属性:

属性描述
forelement_id规定 label 与哪个表单元素绑定
formform_id规定 label 字段所属的一个或多个表单

语法:

<form action="">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br><br>
  <input type="submit" value="提交">
</form>

11.5 <fieldset>

作用:定义了一组相关的表单元素,并使用外框包含起来
属性:

属性描述
disableddisabled规定该组中的相关表单元素应该被禁用
formform_id规定 fieldset 所属的一个或多个表单
nametext规定 fieldset 的名称

语法:

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text"><br>
    Email: <input type="text"><br>
    Date of birth: <input type="text">
  </fieldset>
</form>

11.6 <legend>

作用:定义了 <fieldset> 元素的标题
属性:

属性描述
aligntop/bottom/left/rightHTML5 不支持。 HTML 4.01 已废弃。不建议使用。 请使用样式代替。 为 fieldset 中的标题定义对齐方式

语法:

<form>
  <fieldset>
    <legend>Personalia:</legend>
    Name: <input type="text" size="30"><br>
    Email: <input type="text" size="30"><br>
    Date of birth: <input type="text" size="10">
  </fieldset>
</form>

11.7 <select>

作用:定义了下拉选项列表
属性:

属性描述
autofocusautofocus规定在页面加载时下拉列表自动获得焦点
disableddisabled当该属性为 true 时,会禁用下拉列表
formform_id定义 select 字段所属的一个或多个表单
multiplemultiple当该属性为 true 时,可选择多个选项
nametext定义下拉列表的名称
requiredrequired规定用户在提交表单前必须选择一个下拉列表中的选项
sizenumber规定下拉列表中可见选项的数目

语法:

<select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
</select>

11.8 <optgroup>

作用:定义选项组
属性:

属性描述
disableddisabled规定禁用该选项组
labeltext为选项组规定描述

语法:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

11.9 <option>

作用:定义下拉列表中的选项
属性:

属性描述
disableddisabled规定此选项应在首次加载时被禁用
labeltext定义当使用 <optgroup> 时所使用的标注
selectedselected规定选项(在首次显示在列表中时)表现为选中状态
valuetext定义送往服务器的选项值

语法:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

11.10 <button>

作用:定义一个点击按钮
属性:

属性描述
autofocusautofocus规定当页面加载时按钮应当自动地获得焦点
disableddisabled规定应该禁用该按钮
formform_id规定按钮属于一个或多个表单
formactionURL规定当提交表单时向何处发送表单数据。覆盖 form 元素的 action 属性。该属性与 type=“submit” 配合使用
formenctypeapplication/x-www-form-urlencoded、multipart/form-data、text/plain规定在向服务器发送表单数据之前如何对其进行编码。覆盖 form 元素的 enctype 属性。该属性与 type=“submit” 配合使用
formmethodget/post规定用于发送表单数据的 HTTP 方法。覆盖 form 元素的 method 属性。该属性与 type=“submit” 配合使用
formnovalidateformnovalidate如果使用该属性,则提交表单时不进行验证。覆盖 form 元素的 novalidate 属性。该属性与 type=“submit” 配合使用
formtarget_blank/_self/_parent/_top规定在何处打开 action URL。覆盖 form 元素的 target 属性。该属性与 type=“submit” 配合使用
namename规定按钮的名称
typebutton/reset/submit规定按钮的类型
valuetext规定按钮的初始值。可由脚本进行修改

语法:

<button type="button">这是一个按钮</button>

11.11 <datalist>

作用:指定一个预先定义的输入控件选项列表
语法:

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

11.12 <keygen>

作用:定义了表单的密钥对生成器字段
属性:

属性描述
autofocusautofocus使 <keygen> 字段在页面加载时获得焦点
challengechallenge如果使用,则将 keygen 的值设置为在提交时询问
disableddisabled禁用 <keygen> 元素字段
formform_id定义该 <keygen> 字段所属的一个或多个表单
keytypersa/dsa/ec定义密钥的安全算法
namename定义 <keygen> 元素的唯一名称。 name 属性用于在提交表单时搜集字段的值

语法:

<form action=" " method="get">
  用户名: <input type="text" name="usr_name">
  加密: <keygen name="security">
  <input type="submit">
</form>

11.13 <output>

作用:定义一个计算结果
属性:

属性描述
forelement_id描述计算中使用的元素与计算结果之间的关系
formform_id定义输入字段所属的一个或多个表单
name

语法:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>

12 框架

12.1 <iframe>

作用:定义一个内联的iframe
属性:

属性描述
alignleft/right/top/middle/bottomHTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的元素来对齐 <iframe>
frameborder1/0HTML5 不支持。规定是否显示 周围的边框
heightpixels规定 <iframe> 的高度
longdescURLHTML5 不支持。规定一个页面,该页面包含了有关 的较长描述
marginheightpixelsHTML5 不支持。规定 <iframe> 的顶部和底部的边距
marginwidthpixelsHTML5 不支持。规定 <iframe> 的左侧和右侧的边距
namename规定 <iframe> 的名称
sandboxallow-forms/allow-same-origin/allow-scripts/allow-top-navigation对 <iframe> 的内容定义一系列额外的限制
scrollingyes/no/autoHTML5 不支持。规定是否在 中显示滚动条
seamlessseamless规定 <iframe> 看起来像是父文档中的一部分
srcURL规定在 <iframe> 中显示的文档的 URL
srcdocHTML_code规定页面中的 HTML 内容显示在 <iframe> 中
widthpixels规定 <iframe> 的宽度

语法:

<iframe src="https://www.baidu.com/"> 
</iframe>

13 全局属性

13.1 accesskey

作用:设置访问元素的键盘快捷键
值:

描述
character指定激活元素的快捷键

语法:

<element accesskey="character">

13.2 class

作用:
值:

描述
classname规定元素的类的名称。如需为一个元素规定多个类,用空格分隔类名。 <span class=“left important”>. HTML 元素允许使用多个类。名称规则:必须以字母 A-Z 或 a-z 开头、可以是以下字符: (A-Za-z), 数字 (0-9), 横杆 ("-"), 和 下划线 ("_")、在 HTML 中, 类名是区分大小写的

语法:

<element class="classname">

13.3 contenteditable

作用:规定是否可编辑元素的内容
值:

描述
true指定元素是可编辑的
false指定元素是不可编辑的

语法:

<p contenteditable="true">这是一个可编辑段落。</p>

13.4 contextmenu

作用:规定是否可编辑元素的内容
值:

描述
menu_id要打开的 <menu> 元素的 id

语法:

<div contextmenu="mymenu">

<menu type="context" id="mymenu">
  <menuitem label="Refresh"></menuitem>
  <menuitem label="Twitter"></menuitem>
</menu>

</div>

13.5 data-*

作用:用于存储页面的自定义数据
值:

描述
somevalue指定属性值 (一个字符串)

语法:

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>

13.6 dir

作用: 设置元素中内容的文本方向
值:

描述
ltr默认。从左向右的文本方向
rtl从右向左的文本方向
auto让浏览器根据内容来判断文本方向。仅在文本方向未知时推荐使用

语法:

<bdo dir="rtl">文本方向从右到左!</bdo>

13.7 draggable

作用:指定某个元素是否可以拖动
值:

描述
true规定元素是可拖动的
false规定元素是不可拖动的
auto使用浏览器的默认特性

语法:

<p draggable="true">这是一段可移动的段落。请把该段落拖入上面的矩形。</p>

13.8 dropzone

作用:指定是否将数据复制,移动,或链接,或删除
值:

描述
copy拖动数据会导致被拖数据产生副本
move拖动数据会导致被拖数据移动到新位置
link拖动数据会生成指向原始数据的链接

语法:

<div dropzone="copy"></div>

13.9 hidden

作用:hidden 属性规定对元素进行隐藏
语法:

<p hidden>这是一段隐藏的段落。</p>

13.10 id

作用:规定元素的唯一 id
值:

描述
id规定元素的唯一 id。命名规则:必须以字母 A-Z 或 a-z 开头、其后的字符:字母(A-Za-z)、数字(0-9)、连字符("-")、下划线("_")、冒号("

标签:脚本,定义,标签,元素,语法,HTML,规定,属性
来源: https://blog.csdn.net/heranodushi/article/details/108639464

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有