cite 表示引用到某一本书籍名称，默认样式为斜体，q 表示直接引用到里面的话，大块的引用使用block默认样式将增加“双引号” ，关键的词用<b>默认为粗体；一些技术术语则用<i>来表示，为斜体

ol标签为有序列表，在出现类似排行榜这样的信息块时，比较适合使用。可以通过<ol type="a">来指定ol列表自增symbol

  1. 第一个ol的li元素
  2. 第二个ol的li元素

dl为自定义列表，一般用来实现类似术语表这样的功能

<object><embed>来引入第三方插件，比如flash, pdf等来满足阅读pdf文档或者观看视频的需求，但是html5中就可以直接使用video,audio来完成了！

<canvas><svg>标签也是可以来嵌入资源的，其中canvas是基于像素的，svg是矢量的

<select name="groupdata" id="grouptest">

    <optgroup label="group1">

        <option value="0">0</option>

        <option value="1">1</option>

    </optgroup>

    <option value="2">2</option>

</select>

HTML中的实体标签

html的所有标签都放在<>中，浏览器在解析文档内容时，一旦遇到<>这种字符时，她都会认为是一个标签因此并不会出现在渲染内容中，但是如何能够让浏览器不把<>当作tag而当作普通的字符来处理呢？一种解决方案就是使用实体标签来表达，有点类似于转义字符

常用实体标签有：

空格： &nbsp;

"     :   &quot;

>    :   &gt;

<    :   &lt;

©    :  &copy;

&    :   &amp;

网页中所需图片分类

在一个网页中，为了美观会有很多大大小小的图片。虽然通过css3可以实现很多酷炫的图形图像效果，比如圆角，渐变等，但是对于更加复杂的效果或者考虑到浏览器兼容性的话，我们可能还是需要图片。这些图片从性质上来分，可以分为两类：

1. 修饰性的图片（一般使用background来引用）

2. 内容性的图片（一般用image标签来引用）

对于第一种往往包含小图标，logo，特殊效果的按钮文字等，以及非纯色背景等。这些图片往往从美工过来的视觉稿psd中切图来获取。

第二种往往图片本身就是网页的内容之一，比如一片文章中的配图，示意图等，广告banner等，这种图一般我们在页面设计时（形成html静态页面），只用一个image占位符来代替即可，不用从原始稿中切图。当然，如果后续这些内容图片并不会有更多版本更新，也是可以切过来的。

内容性的图片往往保存为jpg格式，因为图像信息丰富，jpg可以较好胜任；

修饰性的图片往往保存为png8或者png24(支持半透明，图片质量更高）

Attribute Name Elements Description
accept <form>, <input> List of types the server accepts, typically a file type.
accept-charset <form> List of supported charsets.
accesskey Global attribute Defines a keyboard shortcut to activate or add focus to the element.
action <form> The URI of a program that processes the information submitted via the form.
align <applet>, <caption>, <col>, <colgroup>,  <hr>, <iframe>, <img>, <table>, <tbody>,  <td>,  <tfoot> , <th>, <thead>, <tr> Specifies the horizontal alignment of the element.
alt <applet>, <area>, <img>, <input> Alternative text in case an image can't be displayed.
async <script> Indicates that the script should be executed asynchronously.
autocomplete <form>, <input> Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus <button>, <input>, <keygen>, <select>, <textarea> The element should be automatically focused after the page loaded.
autoplay <audio>, <video> The audio or video should play as soon as possible.
autosave <input> Previous values should persist dropdowns of selectable values across page loads.
bgcolor <body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>

Background color of the element.

Note: This is a legacy attribute. Please use the CSS background-color property instead.
border <img>, <object>, <table>

The border width.

Note: This is a legacy attribute. Please use the CSS border property instead.
buffered <audio>, <video> Contains the time range of already buffered media.
challenge <keygen> A challenge string that is submitted along with the public key.
charset <meta>, <script> Declares the character encoding of the page or script.
checked <command>, <input> Indicates whether the element should be checked on page load.
cite <blockquote>, <del>, <ins>, <q> Contains a URI which points to the source of the quote or change.
class Global attribute Often used with CSS to style elements with common properties.
code <applet> Specifies the URL of the applet's class file to be loaded and executed.
codebase <applet> This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.
color <basefont>, <font>, <hr>

This attribute sets the text color using either a named color or a color specified in the hexadecimal #RRGGBB format.

Note: This is a legacy attribute. Please use the CSS color property instead.
cols <textarea> Defines the number of columns in a textarea.
colspan <td>, <th> The colspan attribute defines the number of columns a cell should span.
content <meta> A value associated with http-equiv or name depending on the context.
contenteditable Global attribute Indicates whether the element's content is editable.
contextmenu Global attribute Defines the ID of a <menu> element which will serve as the element's context menu.
controls <audio>, <video> Indicates whether the browser should show playback controls to the user.
coords <area> A set of values specifying the coordinates of the hot-spot region.
data <object> Specifies the URL of the resource.
data-* Global attribute Lets you attach custom attributes to an HTML element.
datetime <del>, <ins>, <time> Indicates the date and time associated with the element.
default <track> Indicates that the track should be enabled unless the user's preferences indicate something different.
defer <script> Indicates that the script should be executed after the page has been parsed.
dir Global attribute Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
dirname <input>, <textarea>  
disabled <button>, <command>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea> Indicates whether the user can interact with the element.
download <a>, <area> Indicates that the hyperlink is to be used for downloading a resource.
draggable Global attribute Defines whether the element can be dragged.
dropzone Global attribute Indicates that the element accept the dropping of content on it.
enctype <form> Defines the content type of the form date when the method is POST.
for <label>, <output> Describes elements which belongs to this one.
form <button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea> Indicates the form that is the owner of the element.
formaction <input>, <button> Indicates the action of the element, overriding the action defined in the <form>.
headers <td>, <th> IDs of the <th> elements which applies to this element.
height <canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

Specifies the height of elements listed here. For all other elements, use the CSS height property.

Note: In some instances, such as <div>, this is a legacy attribute, in which case the CSS height property should be used instead.
hidden Global attribute Prevents rendering of given element, while keeping child elements, e.g. script elements, active.
high <meter> Indicates the lower bound of the upper range.
href <a>, <area>, <base>, <link>  The URL of a linked resource.
hreflang <a>, <area>, <link> Specifies the language of the linked resource.
http-equiv <meta>  
icon <command> Specifies a picture which represents the command.
id Global attribute Often used with CSS to style a specific element. The value of this attribute must be unique.
ismap <img> Indicates that the image is part of a server-side image map.
itemprop Global attribute  
keytype <keygen> Specifies the type of key generated.
kind <track> Specifies the kind of text track.
label <track> Specifies a user-readable title of the text track.
lang Global attribute Defines the language used in the element.
language <script> Defines the script language used in the element.
list <input> Identifies a list of pre-defined options to suggest to the user.
loop <audio>, <bgsound>, <marquee>, <video> Indicates whether the media should start playing from the start when it's finished.
low <meter> Indicates the upper bound of the lower range.
manifest <html> Specifies the URL of the document's cache manifest.
max <input>, <meter>, <progress> Indicates the maximum value allowed.
maxlength <input>, <textarea> Defines the maximum number of characters allowed in the element.
media <a>, <area>, <link>, <source>, <style> Specifies a hint of the media for which the linked resource was designed.
method <form> Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min <input>, <meter> Indicates the minimum value allowed.
multiple <input>, <select> Indicates whether multiple values can be entered in an input of the type email or file.
name <button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param> Name of the element. For example used by the server to identify the fields in form submits.
novalidate <form> This attribute indicates that the form shouldn't be validated when submitted.
open <details> Indicates whether the details will be shown on page load.
optimum <meter> Indicates the optimal numeric value.
pattern <input> Defines a regular expression which the element's value will be validated against.
ping <a>, <area>  
placeholder <input>, <textarea> Provides a hint to the user of what can be entered in the field.
poster <video> A URL indicating a poster frame to show until the user plays or seeks.
preload <audio>, <video> Indicates whether the whole resource, parts of it or nothing should be preloaded.
radiogroup <command>  
readonly <input>, <textarea> Indicates whether the element can be edited.
rel <a>, <area>, <link> Specifies the relationship of the target object to the link object.
required <input>, <select>, <textarea> Indicates whether this element is required to fill out or not.
reversed <ol> Indicates whether the list should be displayed in a descending order instead of a ascending.
rows <textarea> Defines the number of rows in a text area.
rowspan <td>, <th> Defines the number of rows a table cell should span over.
sandbox <iframe>  
scope <th>  
scoped <style>  
seamless <iframe>  
selected <option> Defines a value which will be selected on page load.
shape <a>, <area>  
size <input>, <select> Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
sizes <link>, <img>, <source>  
span <col>, <colgroup>  
spellcheck Global attribute Indicates whether spell checking is allowed for the element.
src <audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> The URL of the embeddable content.
srcdoc <iframe>  
srclang <track>  
srcset <img>  
start <ol> Defines the first number if other than 1.
step <input>  
style Global attribute Defines CSS styles which will override styles previously set.
summary <table>  
tabindex Global attribute Overrides the browser's default tab order and follows the one specified instead.
target <a>, <area>, <base>, <form>  
title Global attribute Text to be displayed in a tooltip when hovering over the element.
type <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu> Defines the type of the element.
usemap <img>,  <input>, <object>  
value <button>, <option>, <input>, <li>, <meter>, <progress>, <param> Defines a default value which will be displayed in the element on page load.
width <canvas>, <embed>, <iframe>, <img>, <input>,

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes

<object>, <video>

For the elements listed here, this establishes the element's width.

Note: For all other instances, such as <div>, this is a legacy attribute, in which case the CSS width property should be used instead.
wrap <textarea> Indicates whether the text should be wrapped.

大多数元素的属性都有两个面孔：content attribute以及IDL attribute

content attribute是当你从content(html代码）中直接设置时的属性(比如<img src="xxx.img"/>中的src属性)，而你可以通过element.setAttribute()或者element.getAttribute()函数来set和get的属性。

content属性通常总是一个string，即使当预期的值应该是一个integer的情况下。比如，为了使用content attribute来设置一个<input>元素的maxlength为42时，你就调用setAttribute(“maxlength","42")在那个元素上。

IDL属性则被公认为是一个javascript的属性。这些属性你可以使用javascript属性（类似于element.foo)来读或写。IDL attribute总会使用（但是有可能变形）underlying content attribute来返回一个value（当你get it时），会在content attribute中保存一些属性当你set it。换句话说，IDL attribute，基本上就是用来反映conent attribute的。

大多数时候，IDL attribute会返回返回他们实际使用的values.比如，默认的<input>元素的type是"text",所以如果你通过input.type="foobar"来设置type,则<input>袁术将会在appearance和behaviour上是text type，而"type" content attribute的value将会被设置为"foobar".然而type的IDL attribute将会返回"text"

IDL attribute并不总是string,比如，input.maxlength是一个数值型(signed long)。当使用IDL attribute,你读或写desired type, 那么input.maxlength总厂会返回一个number，当set input.maxlength时，则它需要一个number参数。如果你传入其他类型，则她会自动转换为一个number

html tags and attribute集参考的更多相关文章

  1. Mongodb Manual阅读笔记：CH8 复制集

    8 复制 Mongodb Manual阅读笔记:CH2 Mongodb CRUD 操作Mongodb Manual阅读笔记:CH3 数据模型(Data Models)Mongodb Manual阅读笔 ...

  2. [个人翻译]Redis 集群教程（上）

    官方原文地址:https://redis.io/topics/cluster-tutorial  水平有限,如果您在阅读过程中发现有翻译的不合理的地方,请留言,我会尽快修改,谢谢.        这是 ...

  3. 搭建高可用mongodb集群（四）—— 分片（经典）

    转自:http://www.lanceyan.com/tech/arch/mongodb_shard1.html 按照上一节中<搭建高可用mongodb集群(三)-- 深入副本集>搭建后还 ...

  4. [转]搭建高可用mongodb集群（四）—— 分片

    按照上一节中<搭建高可用mongodb集群(三)—— 深入副本集>搭建后还有两个问题没有解决: 从节点每个上面的数据都是对数据库全量拷贝,从节点压力会不会过大? 数据压力大到机器支撑不了的 ...

  5. 搭建高可用mongodb集群（四）—— 分片

    按照上一节中<搭建高可用mongodb集群(三)—— 深入副本集>搭建后还有两个问题没有解决: 从节点每个上面的数据都是对数据库全量拷贝,从节点压力会不会过大? 数据压力大到机器支撑不了的 ...

  6. 搭建高可用mongodb集群（四）—— 分片

    按照上一节中<搭建高可用mongodb集群(三)-- 深入副本集>搭建后还有两个问题没有解决: 从节点每个上面的数据都是对数据库全量拷贝,从节点压力会不会过大? 数据压力大到机器支撑不了的 ...

  7. [CLR via C#]18. Attribute

    attribute可以说是Microsoft .NET Framework提出的最具创意的技术之一了.利用attribute,可以声明性的为自己的代码构造添加注解,从而实现一些特殊的功能.attrib ...

  8. Codevs 2597 团伙(并查集)

    2597 团伙 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 传送门 题目描述 Description 1920年的芝加哥,出现了一群强盗.如果两个强盗遇上了,那么 ...

  9. 搭建高可用mongodb集群—— 分片

    从节点每个上面的数据都是对数据库全量拷贝,从节点压力会不会过大? 数据压力大到机器支撑不了的时候能否做到自动扩展? 在系统早期,数据量还小的时候不会引起太大的问题,但是随着数据量持续增多,后续迟早会出 ...

随机推荐

  1. C# LINQ学习笔记

    LINQ,语言集成查询: LINQ TO SQL,同EF,NHibernate一样,也是一种ORM框架: 1. 入门应用示例: static public void LinqBasic() { var ...

  2. 《大数据日知录》读书笔记-ch1数据分片与路由

    目前主流大数据存储使用横向扩展(scale out)而非传统数据库纵向扩展(scale up)的方式.因此涉及数据分片.数据路由(routing).数据一致性问题 二级映射关系:key-partiti ...

  3. PyCharm | 常见问题

    1.安装使用 每次建立PyCharm工程都建立一个虚拟环境env,需要重新下载或复制模块

  4. VirtualBox 命令行操作

    vboxmanage list vmsvboxmanage list runningvmsvboxmanage startvmvboxmanage controlvm "RHEL6.1_fo ...

  5. db2 tsm backup fails with rc–50(1)

    2015-01-05-19.21.54.477532+000 E8484227A347       LEVEL: Error PID     : 10027058             TID  : ...

  6. 再探php

    1. 如何打开一个php文件? 启动本地服务器和MySQL, 然后将php文件放在xampp -> htdocs  目录下(可以是子目录.孙子目录 ......),打开浏览器,在浏览器中输入 l ...

  7. 【linux】在ubuntu中使用apt-get安装oracle jdk6

    在Ubuntu 12.04 LTS上安装JDK6本身并不复杂,只是目前较新版本的Ubuntu已经不支持直接通过apt-get安装了.因此,需要从Oracle官方网站下载安装包进行安装. 从Oracle ...

  8. EF 连接到 Azure-SQL

    using Autofac; using Autofac.Integration.Mvc; using System; using System.Collections.Generic; using ...

  9. Mybatisplus分页插件的使用

    一.加依赖: <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus ...

  10. VMware workstation 非正常关机导致开机失败，解决方法

    问题:VMware workstation 非正常关机导致开机失败!如下图: