HTML5所有常用元素和属性
2024-07-01 09:00:41
HTML5所有常用元素和属性
- <!--...-->注释- <html>根元素- <head>页面头部分，可以包含如下子元素> <script>:包含Javascript脚本> <noscript>:声明不支持Javascript脚本> <style>> <link>用于链接图标，css样式文件等外部资源> <title>> <base>指定页面中所有连接的基准路径> <meta>定义页面元数据- <title>页面标题- <body>页面主体部分- <h1>到<h6>定义标题一到六- <p>定义段落- <br>插入一个换行- <hr>定义水平线- <div>定义文档中的节 ，导致换行- <span>与<div>相似，区别是只表示一段一般性文本，不会换行- <b>定义粗体文本- <i>定义斜体文本- <em>定义强调文本- <strong>定义粗体文本，且代表重要文本- <small>定义小号字体文本,常用于免责声明、注意事项、法路规定、版权相关- <sup>定义上标文本- <sub>定义下标文本- <bdo>定义文本显示方向，dir="ltr"，dir="rtl"- <a>元素添加超链接和锚点：超链接：> href:指定超链接所链接的另一个资源> hreflang:指定超链接所链接的文档所使用的语言> target:_self,_blank,_top,_parent,分别代表自身，新窗口，顶层框架，父框架来装在新资源> download：不是直接打开目标链接，用于让用户下载目标链接所指向的资源> type:指定被链接文档的MIME类型> media：指定目标URL所引用的媒体类型，默认值为all，指定href后此属性有效锚点：> <a name="test">test</a>> <a href="anchor.html#test">定位到anchor文件中的锚点> <a href="#test">定位到同一文档中的test锚点- <ul>定义无序列表，只能包含<li.../>子元素- <li>定义列表项，可以包含于<div>完全类似的内容- <ol>定义有序列表：> start：指定列表的其实数字，默认是第一个，如1、和A> type：指定使用哪种类型的编号，1代表使用数字，A和a分别代表使用大写或小写字母，I或i代 表大写或小写罗马数字- <dl>定义术语列表，只能包含<dt>和<dd>两种子元素- <dt>定义标题- <dd>定义解释- <img>添加图片，可以使用usemap属性添加图片映射> src:该属性指定文件所在位置，可以是相对路径，也可以是绝对路径> alt:指定一段文本，作为图片还没有加载出来时的提示信息> height:指定图片高度，可以是百分比，也可以是像素值（px）> width:指定图片宽度，可以是百分比，也可以是像素值（px）- <map>定义图片映射，主要可以包含一个或多个<area>子元素，每个area子元素定义一个区域，不同区域可以 连接到不同的URL- <area>定义图片映射的内部区域：> shape：指定内部区域是那种区域，默认是“rect”,矩形区域；circle，圆形；ploy，多边形> coords:指定多个坐标值，用于确定区域位置> href> alt> trget- <table>定义表格，只能包含0个或者1个(<caption>,<thead>,<tfoot>),多个<tr>,<tbody> cellpadding:指定单元格内容和单元格边框之间的距离，属性值可以是像素（px）,也可以是百分比> cellspacing:指定单元格之间的距离，属性值可以是像素（px）,也可以是百分比> width:指定表格宽度，属性值可以是像素（px）,也可以是百分- <caption>用于定义表格标题- <tr>定义表格行，只能指定<td><th>两种子元素- <td>定义单元格，与<div>类似，可以再包含一个<table>元素> colspan:指定单元格夸多少列> rowspan:指定单元格夸多少行> height:指定单元格高度，属性值可以是像素（px）,也可以是百分> width：指定单元格宽度，属性值可以是像素（px）,也可以是百分- <th>定义表格的表头元素，显示加粗字体- <thead>定义表格头- <tfoot>定义表格脚- <tbody>定义表格主体，只能包含多个<tr>使用方法：> <thead>,<tfoot>,<tbody>- <iframe>> src:指定一个URL，指定iframe将装在哪个页面> name:设置iframe的名字> longdesc:指定一个页面的URL，包含了关于该iframe的长描述> scrolling:设置滚动条，该属性支持yes,no,auto> height:设置iframe高度> width：设置iframe宽度> frameborder:设置iframe边框> marginheight：设置iframe顶部和底部的页边距> marginwidth：设置iframe左侧和右侧的页边距- id属性用于为HTML元素指定唯一标识,使用JS编程时可通过该属性来获取元素<document.getElementById(id)>- style属性用于为HTML元素指定CSS样式- class属性用于匹配CSS样式的class选择器- dir属性对齐方式 dir="ltr":左对齐 dir="rtl"右对齐- title属性显示元素指定额外信息，当用户把鼠标移动到该元素上面时，浏览器将会显示title属性所制定的信息> 例：<div title="测试专用">测试</div>- contentEditable属性可以指定开发者直接编辑HTML元素的内容，属性值true，false> contentEditable属性具有可继承的特点：如果一个元素的父元素时“可编辑的”，那么它默认也是可编辑的，除非指定contentEditable=“false”> 当用户编辑完成后，用户编辑的内容就会直接显示在该页面中，一旦刷新，编辑的内容就会消失，开发者可以通过元素的innerHTML属性来获取编辑后的内容- iscontentEditable属性指定当该元素处于可编辑状态时，返回true，否则返回false- designMode属性相当于是一个全局属性，如果把整个页面的designMode属性设置为on,则该页面上所有支持contentEditable的元素都变成可编辑状态，designMode属性默认为off- hidden属性支持true和false两个属性值，一旦把某个元素的hidden设为true，就意味着浏览器不在显示该组件，夜不会保留该组件所占的空间> 例：<div id="target" hidden="true style="heiget:80px">测试专用</div><button onclick="var target=document.getElementById('target');target.hidden=!getfet.hidden;">显示/隐藏</button>- <section>该元素用于对页面内容进行分块- <link>用于链接图标，css样式文件等外部资源> href> hreflang> media:所链接的资源仅适用哪些设备> rel:设置文档与所链接资源的关系> size：指定图标的大小，仅当rel为icon是该属性才有效> type举例应用：> 引入CSS样式单：<link href="outer.css" rel="stylesheet" type="type/css" />> 设置图标：<link href="java.ico" rel="shortcut icon" type="image/x-icon" />- <base>空元素，指定页面中所有连接的基准路径> href:指定所链接的基准路径> target举例应用:<head><base href="http://www.baidu.com"></head><body><a href="index.php">base</a></body>- draggable属性：（1）如果希望把某个元素可拖动，只需要把该元素的**draggable**属性设置为true即可，只是简单的拖动，并没有携带数据，因此看不到拖动的效果。（2）为了让拖动能携带数据，应该为被拖动的元素的**ondragstart**事件指定监听器,在该监听器中让拖动操作可携带数据。（3）为了让document可以接收放，应该为document的ondragover事件指定监听器，在监听器中取消document对拖动事件的默认行为（默认不接受放）。（4）不同浏览器对拖放操作的默认动作是不同的，如果希望取消拖放操作的默认动作，可以对document的ondrop事件绑定监听器。示例如下：> <div id="source" style="width:80px;height:80px;border:1px;solid black;background-color:#bbb;"draggable="true">可拖动的div</div><script type="text/javascript">var source=document.getElementById("source");source.ondragstart=function(evt){evt.dataTransfer.setData("text","可拖动的div");}document.ondragover=function(evt){//取消时间的默认行为return false;}document.ondrop=function(evt){source.style.position="absolute";source.style.left=evt.pageX+"px";source.style.top=evt.pageY+"px";return false;}</script>- <form>用于生成表单，该元素不会生成可视化部分,默认使用**get**方式> action：指定当提交表单时，表单被提交到哪个地址，可以是相对路径，也可以是绝对路径，必填> method：指定提交表单时发送何种类型的请求，属性值get和post，通常建议发送post请求，必填> name:指定表单唯一名称，建议与id保持一致> target> enctype:指定对表单内容进行编码所使用的字符集- <input>空元素，有value属性> 单行文本框：type="text"> 密码框：type="password"> 隐藏框：type="hidden"> 单选框：type="radio"> 复选框：type="checkbox"> 图像域：type="image"时，<input>可以指定width和height属性> 文件上传域：type="file"> 提交：type="submit"> 重设：type="resrt"> 无动作：type="button> checked:支持Boolean值，设置单选框、复选框初始状态是否处于选中状态> disabled:支持Boolean值，表示该元素被禁用> maxlength：是一个数字，表示文本框中所允许输入的最大字数> readonly：支持Boolean值，指定该文本框的内容不容许用户修改> size：属性值是一个数字，指定该元素的宽度，type=hidden时该属性没有意义> src:指定图像域所显示图像的URL> width：指定图像域所显示图像的宽度> height：指定图像域所显示图像的高度- <label>用于在表单元素中定义标签，让标签和表单控件关联起来有两种方式：> 隐式使用for属性：指定<label>元素的for属性值为所关联表单控件的id属性值，例:<label for="id">单行文本框：</label><input id="id" name="id" type="text" />> 显示关联：将普通文本，表单控件一起放在<label>元素内，例：<label>密码：<input type="password" /></label>- <button>定义一个按钮，可以包含文本和图片> disabled> name> type:属性值：submit reset button> value:指定按钮的初始值- <select>创建列表框和下拉菜单，该元素必须和<option>组合使用，每个<option>元素代表一个列表项或菜单项，<select>只能包含<option>或者<optgroup>> disabled:禁止使用该列表项和下拉菜单，属性值只能是disabled或者省略> multiple：支持Boolean值，一旦设置多选，<select>自动生成列表框> size：指定列表框内同时显示多少个列表项，一旦设置该属性，<select>自动生成列表框- <option>定义列表框选项或菜单项> disabled:禁止使用，属性值只能是disabled或者省略> selected：列表项初始状态是否处于被选中状态，属性值只能是selected> value：选项对应的请求参数- <optgroup>定义列表项或菜单项组，只能包含<option>元素> label：指定选项组的标签，必填，例:<optgroup label="其他图书"></outgroup> disabled-<textarea>生成多行文本域> cols:指定文本域的宽度，必填> rows指定文本域的高度，必填> disabled> readonly：只读，属性值只能是readonly> maxlength：设置最多可输入的字符数> wrap：指定多换文本域是否添加换行符，soft和hard两个属性值，设为hard时，必须指定cols属性，字符超过cols时，自动换行，提交时在换行出自动添加换行符<form action="#" method="get">下面是简单下拉菜单：<br /><select id="skills" name="skills" multiple><option value="java">java语言</option><option value="c">C语言</option><option value="ruby">ruby语言</option></select><br/><br/><br/>下面是允许多选的列表框：<br/><select id="books" name="books"multiple="multiple" size="4"><option value="java">疯狂Java讲义</option><option value="android">疯狂安卓讲义</option><option value="ee">ee实战</option></select><br />下面是允许多选的列表框：<br/><select id="leegang" name="leegang"multiple size="6"><optgroup label="疯狂JAVA图书"><option value="java">疯狂Java讲义</option><option value="android">疯狂安卓讲义</option><option value="ee">ee实战</option></optgroup><optgroup label="其他图书"><option value="struts">struts 指南</option><option value="ror">ror开发</option></optgroup></select><br/><button type="submit"><p>提交</p></button><br/><br/><br/><br/>简单多行文本域：<br/><textarea name="txt1" cols="20" row="2"></textarea><br/>zhiduode:<br/><textarea name="txt2" cols="28" row="4" readonly>fejifjeofjdkldjlsdkfjeoifdlka</textarea><br/><button type="submit"><p>提交</p></button><br/></form>- <fieldset>用于对表单内表单元素进行分组，一组的有特殊边界效果> name> form属性值必须是一个有效的<form>元素的id，用于指定<fieldset>元素属于哪个表单> disabled- <legend>放在<fieldset>元素内，为<fieldset>元素设置标题，例：<fieldset name="name7"><legend>简答题</legend><ol style="1" start="1"><b><li><span><i>你的梦想是什么？：</i></span></li></b<br/><textarea name="txt1" cols="20" row="2"></textarea><br/><b><li><span><i>以《我最敬佩的人》写一篇作文：</i></span></li></b<br/><textarea name="txt2" cols="20" row="2"></textarea><br/></ol></fieldset>-form属性：通过为表单控件指定form属性，可以让表单控件在<form>元素之外，从而提高灵活性form的属性值为<form>元素的id值- formaction属性：指定用于提交的不同的URL，例：<input type="submit" value="注册" formaction="logon.html"/><input type="submit" value="开始游戏" formaction="playgame.html"/>这两个不同按钮会将网页提交到不同的URL- forxxx属性，自行百度- autofocus属性：自动获得焦点，打开控件时只能有一个控件或得焦点，所以整个页面上只能有一个表单元元素设置次属性，例：<input id="name" name="name" type="text" autofocus placeholder="请输入用户名" />- placeholder属性：产生提示信息，例：<input id="name" name="name" type="text" autofocus placeholder="请输入用户名" />- list属性：文本框与下拉菜单结合的组件，该组件既允许用户输入，也允许用户通过下拉菜单选择，list属性值应该是一个<datalist>元素的id，list属性必须和<datalist>元素一起使用例：<form method="post" action="buy">请输入图书：<input name="name1" type="text" list="books1"/><p><input type="submit" value="购买" /></form><datalist id="books1"><option value="java">疯狂Java讲义</option><option value="android">疯狂安卓讲义</option><option value="ee">ee实战</option></datalist></form>- autocomplete属性设置表单是否支持自动完成功能，会根据你的输入记录自动进行提示，属性值on或者off- label的control属性：用于在Javascript脚本中访问该<label>元素所关联的表单元素，例：<form action="pro.action" method="post" autocomplete="on"><label id="nameLB">姓名：<input type="text" name="name2"/></label><p><input type="submit" value="提交"/><input type="button" value="重设" onclick="document.getElementById('nameLB').control.value='crazy';"/></form>- labels：自行百度- 文本框的selectionDirection属性> 正向选取文字时，selectionDirection属性返回forward> 反向选取文字时，selectionDirection属性返回backward> 没有选取时，返回上一次的值> 从未选取时，返回forward例：<form action="pro.action" method="post" autocomplete="on"><label id="nameLb">姓名：<input type="text" name="name3"/></label><p><input type="submit"/><input type="button" value="获取" onclick="alert(document.getElementById('nameLb').control.selectionDirection);"/></form>- 复选框的indeterminate属性：true和false两个属性值，在JS中判断一个复选框的checked属性之前，需要先判断indeterminate属性是否为false，只有indeterminate属性为false是判断checked状态才有效例：<form action="pro.action" method="post" autocomplete="on"><label id="colorLb">红色：<input type="checkbox" name="color"/></label><p><input type="button" value="设置"onclick="document.getElementById('colorLb').control.indeterminate=true;"/><input type="button" value="获取"onclick="alert(document.getElementById('colorLb').control.indeterminate);"/></form>- 功能丰富的input元素例：<form action="do" method="post">请选择你喜欢的颜色：<br/><input name="color" type="color"/><p>请输入您的出生日期：<br/><input name="date " type="date"/><p>出生日期精确到秒：<br/><input name="time" type="time"/><p>请确认出生日期：<br/><input name="datetime-local" type="datetime-local"/><p>请选择这是几月：<br/><input name="month" type="month"/><p>请选择这是第几周：<br/><input name="week" type="week"/><p>请输入你的email：<br/><input name="email" type="email" multiple /><p>请输入您的电话：<br/><input name="tel" type="tel"/><p>请输入您的URL：<br/><input name="url" type="url"/><p>请输入您的幸运数字：<br/><input name="number" type="number" min="0" max="100" step="5" /><p>这是一个拖动条：<br/><input name="range" type="range" min="0" max="100" step="5" /><p>这是一个搜索框：<br/><input name="search" type="search"/><p><label>用户名:<input id="name" name="name" type="text" autofocus /></label><br /><br /><label for="username">密码:</label><input id="username" name="username" type="text" /><br /><input value="提交" type="submit" formaction="苑飞.html" /></form>- <output>显示输出- <meter>计数仪表- <progress>进度条- 校验属性，自行百度- <audio>音频- <video>视频HTML5所有常用元素和属性相关推荐
- html元素和属性,HTML常用元素和属性（一）
1:基础元素 定义注释 根元素 页面标题主题部分,属性可以指定id,class,style,onload,onunload,onclick,ondblclick,onmousedown,onmouse ...
- svg常用元素和属性
1. 介绍 SVG 是一种基于 XML 语法的图像格式,全称是可缩放矢量图(Scalable Vector Graphics).其可以直接被插入到网页 DOM 中,甚至作为CSS背景属性等,且无论放大 ...
- HTML5新增页面元素与属性
1. 结构元素 (1)<header>元素 HTML5中的header元素是一种具有引导和导航作用的结构元素,该元素可以包含所有通常放在页面头部的内容.其基本语法格式如下: <h ...
- html5文本缩进元素,CSS属性参考 | text-indent
CSS text-indent 属性用于指定一段文本的第一行之前有多少个水平空格.也就是通常所说的首行文本缩进. 在中文的文章排版中,通常每一个段落的第一行都会有2个文字距离的缩进,这样不但样式美观, ...
- HTML笔记一，部分常用的元素与属性
HTML中的常用元素与属性 <hr>:定义一条水平线 <div>:定义文档中的节,默认换行 <span>:定义一个节,但不换行 对文字的格式化元素: <b&g ...
- html5常用的属性标签,HTML5常用标签及其属性设置
一.Html5的基本结构 网页的内容 二.head标签内常用标签 1.meta标签:设置元数据信息(metadata),用来描述HTML文档的信息,为网页提供用户不可见的信息.常用属性: ⑴chars ...
- 前端：HTML5/36/HTML5简介，文档类型定义，网页字符集，页面结构标记，文章相关的标记，其它标记，音频标记，视频标记，表单中新增的属性，表单input元素type属性的值
HTML5简介 HTML5是新一代的HTML: HTML5目前主要应用在手机端,在PC端最新浏览器已经开始支持了,但还不全面: HTML5是由W3C和WHATWG合作的结果: W3C是万维网联盟,主要 ...
- c语言内部超链接,HTML5中文本元素超链接的属性
本章主要探讨HTML5中文本元素重要的一个超链接,探讨它自身的属性以及路径问题. 超链接的属性 元素属于文本元素,有一些私有属性或者叫局部属性.那么,相对应的还有通用属性或叫做全局属性.这方面的知识, ...
- HTML5页面元素及属性
一.列表元素 1.ul元素 ul为无序列表,各个列表项之间没有顺序级别之分,通常是并列的,排序不分先后. 语法为: <ul><li>列表项1</li><li& ...
最新文章
- python计算两个字典的相同点(从key、value、item角度)
- python游戏编程入门电子书-请问自学 Python 有必要买课程吗？
- 关于读构建之法后的疑惑
- 150m虚拟主机容量不足
- Python读取大文件的坑“与内存占用检测
- OkHttp上传Json嵌套对象
- L1-075 强迫症 (10 分)-PAT 团体程序设计天梯赛 GPLT
- Python - shutil模块（2）——压缩目录、文件
- DelphiARX 2000i 简介
- 算法点心----求出用1，2，5这三个数不同个数组合的和为100的组合个数。
- win10家庭版下loadrunner11安装
- java项目之人事管理系统|HRM(java毕业设计Struts2、mybatis框架项目
- 软件构造第一次实验感想总结
- 2020年31省市GDP数据可视化
- 替罪羊树[Scapegoat Tree]
- 离散数学·集合论【基本的集合恒等式】
- python如何创建一个列表_Python-如何创建或生成列表
- 常见问题：try {}里有一个return语句，那么紧跟在这个try后的finally {}里的code会不会被执行，什么时候执行？
- python timer详解_python线程定时器Timer实现原理解析
- linux debian硬盘安装,硬盘安装Debian