html元素

基础标签

<!DOCTYPE>  定义文档类型(e.g  <!DOCTYPE  html>)

<html>定义一个HTML文档</html>

<title>文档标题</title>体现在网页最上端

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

<a href="www.baidu.com">这是一个链接</a>

<br>  换行

<wbr>规定在文本中的何处适合添加换行符。(意思就是如何窗口变小,那么在你添加<wbr>这个标签的地方会换行)

<hr>         定义水平线

<!--....-->   定义一个注释

格式

<abbr t="world health organization">who</abbr>      定义一个缩写

<address></address> 定义文档作者/所有者的联系信息(斜体,该元素前后添加换行)

<b></b>      定义粗体文本

<bdi></bdi>            允许您设置一段文本,使其脱离其父元素的文本方向设置(比如使一段文字中的某一段文字倒着写)

<bdo   dir="rtl(ltr)>"该段落文字从右到左(从左到右)显示</bdo>  定义文本方向

<blockquote cite="url"></blockquote> 定义块引用,cite规定引用来源;blockquote元素中一般嵌套p元素,用于标记被引用的文本,这些引用问嗯赢不直接位于blockquote元素中

<cite></cite> 定义引用(斜体);1、可以使你或者其他人从文档中自动摘录参考目录2、引用一个超链接。

<code>一段电脑代码</code> 定义计算机代码文本(短语标签)

所有的短语标签(只是不同的文字格式而已,建议使用css)

          <em>呈现为被强调的文本

          <strong>定义重要文本 

          <dfn>定义一个定义项目

          <samp>定义样本文本

          <kdb>定义键盘文本,它表示文本是从键盘上键入的。经常用在与计算机相关的文档或者手册中

          <var>定义变量

<del></del> 定义文档中已删除的文本。(My favorite color is blue red!)属性cite:规定一个解释了文本被删除的原因的文档的url;datatime:规定文本被删除的日期和时间

<s></s> 定义加删除线的文本

<ins></ins>定义文本中新插入的文本。

<i>定义斜体文本</i>

<u>定义下划线文本。</u>

<mark></mark>  定义带有记号的文本.比如让一段文字在文本中高亮显示。

<meter></meter>定义度量衡,仅用于已知最大和最小值的度量(不能作为一个进度条来使用)

e.g<meter value="2" min="0" mix="10">2 out of 10</meter><br>

   <meter value="0.6">60%</meter>                    result:()

<pre></pre> 定义预格式文本。(标签内格式是什么样的,输出格式就是什么样的。)

<progress value="20" max="100"></progress>定义运行中的任务进度(进程)。(两个属性value和max)

<q>这是引用的内容</q> 定义短引用。(相当于把标签中间的内容加了一个引号)。

<rp></rp> 定义不支持ruby元素的浏览器所显示的内容。

<rt></rt>定义字符的解释或发音。

<ruby></ruby>定义ruby注释

      e.g<ruby>

        汗<rp>(</rp><rt>han<rt><rp>)</rp>

        渍<rp>(</rp><rt>zi<rt><rp>)</rp>                          

        </ruby>

<small></small>定义小号文本。

<sub></sub>定义下标文本。

<sup></sup>定义上标文本。

<time></time> 定义一个时间/日期。属性:datatime规定日期/时间;pubdata指示元素中的日期/时间是最近的文档的发布日期。

表单

<form>定义一个html表单,用于用户输入。

   <form>包含一个或多个以下表单元素:

      <input> 规定了用户可以字其中输入数据的输入字段。

          input属性:   accept    规定通过文件上传来提交的文件的类型。(type=”file“)

                      alt            定义图像的替代文本(type=”image“)

                      antocomplete(含on|off两个属性) 规定<input>元素输入字段是否应该启用自动完成功能。

                   autofocus 规定当前页面加载时<input>元素应该自动获得焦点。(就是在输入框加上一个光标)

                checked 规定在页面加载时应该被预先选定的<input>元素。(只针对type="checkbox"或者type="radio")

                disable 规定应该禁用的<input>元素。(有一个输入框进制输入)

                form规定<input>元素所属的一个或者多个表单。(可以把多个输入框联系起来,合为一个表单)

                formenctype规定当表单数据提交到服务器时如何编码。

                formaction规定当表单提交时处理输入控件的文件的URL(只针对type=”submit“和type=”image“)(就是点击链接之后的url不一样)

                formmethod 定义发送表单数据到action URL的HTTP方法(只适合type=”submit“和type=”image“)

                formtarget 规定标是提交表单后在哪里显示接收到响应名称或关键词(只适合type=”submit“和type=”image“)

                height,weight规定<input>元素的高度、宽度。(只适合type=”image“)

                list 属性引用<datalist>元素,其中包含<input>元素的预定义选型

                max、min规定<input>元素的最大最小值               

                maxlength规定<input>元素中允许的最大字符数

                mulitiple规定允许用户输入到<input>元素的多个值(同时可以上传多个文件)

                name规定<input>元素的名称

                pattern规定用于验证<input>元素值的正则表达式。

                placeholder规定可描述的输入<input>字段预期值的简单的提示信息。(在输入框提示你输入的信息,当你开始输入时就会消失)

                readonly规定输入字段是只读的

                required规定必须在提交表单之前输入字段

                size规定已字符数计的<input>元素的可见宽度

                src规定显示为提交按钮的图像的URL(只针对type="image")

                step规定合法数字间隔(傍边会出现这样的上下小三角,每次点击都是三个三个的变化)

                type规定要显示的<input>元素的类型,一般有butten,checkbox(选框),color,data,datatime,data-local,email,file,hidden,image,month,number,password,radio,range,reset,search,submit,tel,text,time,url,week

                value指定<input>value的值

        <textarea>定义一个多行的文本输入控件(可容纳无限数量的文本,默认等宽字体,通过cols和rows规定textarea的尺寸大小)

         textarea属性:autofocus  文本区域自动获得焦点(光标闪烁点)

                  cols,rows规定文本区域可见宽度和行数

                  disablle规定禁用文本区域

                  form规定文本区域所属的一个或多个表单。(将多个输入框归为一个表单)

                  maxlength规定文本区域允许的最大字符数

                  name规定文本区域名称

                     placeholder规定一个简短的提示,描述文本区域期望的输入值。(一个文字颜色较浅的解释文本,当开始输入时就消失)

                  readonly规定文本区域为只读

                  required规定文本区域是必需的/必填的(如果不填写无法进入下一步)

                    wrap规定当提交表单时,文本区域中的文本应该怎么样换行(hard换行(必须指定cols的值);soft不换行)

      <botton>定义一个按钮

          botton属性:autofocus规定页面加载时按钮自动获得焦点(在按钮周边出现蓝色亮光)

                disable禁用该按钮

                form规定按钮属于一个或多个表单

                   formaction规定当提交表单时向何处发送表单数据。覆盖form元素的action属性。(url)

                formenctype规定向服务器发送表单数据之前如何对其进行编码

                      属性值:application/x-www-form-urlencoded  在发送前对所有字符进行编码(默认)

                          multipart/form-data                                不对字符编码。当使用有文件上传控件的表单时,该值是必需的。

                          text/plain             将空格转换为“+",但不编码特殊字符。

                formmethod规定用于发送表单数据的HTTP方法。覆盖form元素的methon属性

                      属性值:get:以url变量(使用method=”get“)的形式来发送。表单数据在url中以name/value对出现;get传送数据量不能大于2kb;不可传送敏感信息

                          post:以HTTP post的形式发送表单数据;较安全;没有大小限制

                formnovalidata使用该属性,提交表单时不进行验证。覆盖form元素的novalidata属性。

                formtarget规定在何处打开action URL.覆盖form元素的terget属性。

                      属性值:_blank在新窗口/选项卡中将表单提交到文档

                          _self在同一框架中将表单提交到文档(默认)

                          _parent在父框架中将表单提交到文档

                          _top在整个窗口将表单提交到文档

                          framename在制定的框架中将表单提交到文档

                  name规定按钮的名称(在后边使用css更改样式的时候用到name)

                  type规定按钮的类型

                          button该按钮是重置按钮

                          reset该按钮是可点击按钮

                          submit该按钮时提交按钮

                value规定按钮的初始值(显示在按钮表面的文字或图案)

      <select>用来创建下拉列表

            select属性:   autofocus,disable,form

                multiple规定可同时选多个选型                    

                name定义下拉列表的名称

                   required规定用户在提交表单前必需选择一个下拉列表的选项

                   size(number)规定下拉列表中可见选项的数目

      <option>规定下拉列表中的一个选项;通常不带有任何属性使用,但是通常需要使用value属性,此属性会指示服务器的内容。与select连用。

           <option>属性:disabled,value

                  lable(text)定义当使用<optgroup>时所使用的标注。  

                 selected规定选项(在首次显示在列表时)表现在选中状态。(刚拉开列表时默认选中的一个)

        <optgroup>用于把相关的选型组合在一起。当选项很多时可以使用(属性:disable,label(图中的加粗黑体字,不可被选中,只是描述组))

        <fieldset>将表单内的相关元素分组,并在相关表单元素周围绘制边框。

             <fieldset>属性:disable,form,name

        <lengend>定义fieldset元素的标题。

        <lable>为input元素定义标注。如果你在label元素内点击文本,就会触发控件。<label>标签的for属性应与相关元素的id属性相同

             <lable>属性:for(元素id)规定lable与哪个表单元素绑定

             <form>

<datalist>规定了input元素可能的选项列表(在输入框输入的时候会出现下拉选项)

<keygen>规定用于表单的密钥对生成器的字段。当提交表单时,私钥存储在本地,公钥发送到服务器。

    <keygen>属性:autofocus使<keygen>字段在加载时获得焦点。

            challenge如果使用,则将keygen的值设置为在提交时询问。

            disabled禁用<keygen>字段

            form定义该<keygen>字段所属的一个或多个表单。

            keytype定义密钥的安全算法。

                keytype属性值:rsa 默认。规定RSA安全算法。RSA密钥强度可有用户选择。

                        dsa规定DSA安全算法。DSA密钥长度可由用户选择。

                        ec规定EC安全算法。EC密钥强度可由用户选择。

                        ec

name定义元素的唯一名称。name属性用于在提交表单时搜集字段的值。

<output>定义一个计算的结果

    <output>属性:for描述计算中使用的元素与计算结果之间的联系。

           form定义输入字段所属的一个或多个表单。

           name定义对象的唯一名称(表单提交时使用)

框架

<iframe>定义内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

    <iframe>属性:height,width规定<iframe>的高度和宽度。

           name规定<iframe>的名称

           sandbox对<iframe>的内容定义一系列额外的限制

                sandbox属性值:” “启用所有限制条件

                        allow-same-origin允许将内容作为普通来源对待。如果未使用该关键字,嵌入的内容将被视为一个独立的源。

                        allow-top-navigation嵌入的页面的上下文可以导航(加载)内容到顶级的浏览上下文环境。如果未使用该关键字,这个操作不可使用

                        allow-forms允许表单提交

                        allow-scripts允许脚本执行

           seamless规定<iframe>看起来像是父文档中的一部分。(没有边框和滚动条)

           src(url)规定在<iframe>中显示的文档的URL。

           srcdoc(HTML_code)规定页面中HTML内容显示在<iframe>中。

图像

<img>定义图像

       <img>属性:alt规定图像的替代文本

            crossorigin(anonymous,use-credentials)设置图像的跨域属性

            height,width规定图像的高度和宽度。

            ismap将图像规定为服务器端图像映射。

            src规定显示图像的url

            usemap将图像定义为客户器端图像映射。

        

               

                

                

html属性

class                   为html元素定义一个或多个类名(classname)(类名从样式文件引入)(class="这里可以填写多个class属性")

id                    定义元素唯一的id  (id="  引号里只可以填入一个id,多个无效")

style                      规定元素的行内样式

title                     描述了元素的额外信息

accesskey                 设置访问元素的键盘快捷键

contenteditable         规定是否可以编辑元素的内容

contextmenu             指定一个元素的上下文菜单,当用户右击该元素,出现上下文菜单

data-*                         用于存储页面的自定义数据

dir                               设置元素中内容的文本方向

draggable                  指定某个元素是否可以拖动

dropzone        指定是否将数据复制、移动,或链接,或删除

hidden       hidden属性规定对元素进行隐藏

lang         规定元素中内容的语言代码

spellcheck       检查元素是狗拼写错误

tabindex        设置元素的Tab键控制次序

translate      指定是否一个元素的值在页面载入时是否需要翻译

html5标签整理的更多相关文章

  1. HTML4 And HTML5 标签整理

    一.文字备忘之标签 HTML5中新增的标签<article> 定义文章 <aside> 定义页面内容旁边的内容                   <audio> ...

  2. HTML5资料整理 [From luics]

    来自http://www.cnblogs.com/luics/,新浪微博@徐凯-鬼道 HTML5资料整理   项目组要做html5这块,花了一周左右时间收集的,快有一年时间了,部分内容需要更新,仅供参 ...

  3. HTML5标签的使用和作用

    在菜鸟教程中找了一些关于HTML5的知识点,觉得很有用,可以整理一下,以后使用. 这是一个基本的HTML5文档: <!DOCTYPE html><html><head&g ...

  4. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  5. HTML5标签与HTML4标签的区别示例介绍_html5教程技巧

    (1)概念的变化: HTML5专注内容与结构,而不专注的表现 <header> <hgroup>导航相关数据</hgroup> </header> &l ...

  6. 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...

  7. HTML标签整理

    第一次接触动态网站的相关代码,对程序里HTML的标签不理解.在这里会把碰到的HTML标签整理出来,持续更新. 1.<form></form>:用于声明表单,定义采集数据的范围, ...

  8. [js开源组件开发]html5标签audio的样式更改

    html5标签audio的样式更改 由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以 ...

  9. phpcms标签整理_当前栏目调用

    phpcms标签整理_当前栏目调用 转载 **//SQL语句调用: {pc:get sql="select * from phpcms_category where catid in($ca ...

随机推荐

  1. Docker笔记(四):Docker镜像管理

    原文地址:http://blog.jboost.cn/2019/07/16/docker-4.html 在Docker中,应用是通过容器来运行的,而容器的运行是基于镜像的,类似面向对象设计中类与对象的 ...

  2. UEditor 之初体验后记

    1.UEditor 基本介绍 1.1.关于 UEditor 1.2.UEditor 现状 2.UEditor 简单使用 2.1.将 UEditor 源码集成到项目中 2.2.让 UEditor 的 U ...

  3. C#3.0新增功能05 分部方法

    连载目录    [已更新最新开发文章,点击查看详细]    分部类或结构可以包含分部方法. 类的一个部分包含方法的签名. 可以在同一部分或另一个部分中定义可选实现. 如果未提供该实现,则会在编译时删除 ...

  4. [leetcode] 464. Can I Win (Medium)

    原题链接 两个人依次从1~maxNum中选取数字(不可重复选取同一个),累和.当一方选取数字累和后结果大于等于给定的目标数字,则此人胜利. 题目给一个maxNum和targetNum,要求判断先手能否 ...

  5. websocket的加密和解密过程

    加密: import struct msg_bytes = "the emperor has not been half-baked in the early days of the col ...

  6. 机器学习之K均值聚类

      聚类的核心概念是相似度或距离,有很多相似度或距离的方法,比如欧式距离.马氏距离.相关系数.余弦定理.层次聚类和K均值聚类等 1. K均值聚类思想   K均值聚类的基本思想是,通过迭代的方法寻找K个 ...

  7. linux初学者-数据库管理MariaDB篇

    linux初学者-数据库管理MariaDB篇 MariaDB是一种数据库管理系统,是MySQL的一个分支,但是比MySQL更加优秀,可以说是MySQL的替代品.MariaDB使用的是SQL语句.下文将 ...

  8. GitLab-CI 来自动创建 Docker 镜像

    1.what is gitlab-ci docker image CI/CD 自动化集成,自动化部署.简单的说就是把代码提交到gitlab管理的同时部署到指定的server,打成docker imag ...

  9. .gitignore文件我自己常用的配置

    我项目中一般不需要上传到git服务器上的有 .idea ------.idea目录 .mvn ------.mvn目录 .iml mvnw mvnw.cmd logs/ --- 我生成的日志文件目录 ...

  10. 实现跳转的jsp小例子

    <%@page import="java.io.UnsupportedEncodingException"%> <%@ page language="j ...