html tags and attribute集参考

cite 表示引用到某一本书籍名称,默认样式为斜体,q 表示直接引用到里面的话,大块的引用使用block默认样式将增加“双引号” ,关键的词用<b>默认为粗体;一些技术术语则用<i>来表示,为斜体
ol标签为有序列表,在出现类似排行榜这样的信息块时,比较适合使用。可以通过<ol type="a">来指定ol列表自增symbol
- 第一个ol的li元素
- 第二个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而当作普通的字符来处理呢?一种解决方案就是使用实体标签来表达,有点类似于转义字符
常用实体标签有:
空格:
" : "
> : >
< : <
© : ©
& : &
网页中所需图片分类
在一个网页中,为了美观会有很多大大小小的图片。虽然通过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 |
border |
<img>, <object>, <table> |
The border width. Note: This is a legacy attribute. Please use the CSS |
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 |
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 |
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 |
For the elements listed here, this establishes the element's width. |
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集参考的更多相关文章
- Mongodb Manual阅读笔记:CH8 复制集
8 复制 Mongodb Manual阅读笔记:CH2 Mongodb CRUD 操作Mongodb Manual阅读笔记:CH3 数据模型(Data Models)Mongodb Manual阅读笔 ...
- [个人翻译]Redis 集群教程(上)
官方原文地址:https://redis.io/topics/cluster-tutorial 水平有限,如果您在阅读过程中发现有翻译的不合理的地方,请留言,我会尽快修改,谢谢. 这是 ...
- 搭建高可用mongodb集群(四)—— 分片(经典)
转自:http://www.lanceyan.com/tech/arch/mongodb_shard1.html 按照上一节中<搭建高可用mongodb集群(三)-- 深入副本集>搭建后还 ...
- [转]搭建高可用mongodb集群(四)—— 分片
按照上一节中<搭建高可用mongodb集群(三)—— 深入副本集>搭建后还有两个问题没有解决: 从节点每个上面的数据都是对数据库全量拷贝,从节点压力会不会过大? 数据压力大到机器支撑不了的 ...
- 搭建高可用mongodb集群(四)—— 分片
按照上一节中<搭建高可用mongodb集群(三)—— 深入副本集>搭建后还有两个问题没有解决: 从节点每个上面的数据都是对数据库全量拷贝,从节点压力会不会过大? 数据压力大到机器支撑不了的 ...
- 搭建高可用mongodb集群(四)—— 分片
按照上一节中<搭建高可用mongodb集群(三)-- 深入副本集>搭建后还有两个问题没有解决: 从节点每个上面的数据都是对数据库全量拷贝,从节点压力会不会过大? 数据压力大到机器支撑不了的 ...
- [CLR via C#]18. Attribute
attribute可以说是Microsoft .NET Framework提出的最具创意的技术之一了.利用attribute,可以声明性的为自己的代码构造添加注解,从而实现一些特殊的功能.attrib ...
- Codevs 2597 团伙(并查集)
2597 团伙 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 传送门 题目描述 Description 1920年的芝加哥,出现了一群强盗.如果两个强盗遇上了,那么 ...
- 搭建高可用mongodb集群—— 分片
从节点每个上面的数据都是对数据库全量拷贝,从节点压力会不会过大? 数据压力大到机器支撑不了的时候能否做到自动扩展? 在系统早期,数据量还小的时候不会引起太大的问题,但是随着数据量持续增多,后续迟早会出 ...
随机推荐
- DataGridView绑定list的注意事项
1.DataGridView数据绑定对比(DataTable与泛型List): 当DataGridView的DataSource是DataTable的时候,DataTable的数据改变时, ...
- 利用URL Scheme打开APP并传递数据
https://blog.csdn.net/u013517637/article/details/55251421 利用外部链接打开APP并传递一些附带信息是现在很多APP都有的功能,我在这把这部分的 ...
- redis3.0 cluster功能介绍
edis从3.0开始支持集群功能.redis集群采用无中心节点方式实现,无需proxy代理,客户端直接与redis集群的每个节点连接,根据同样的hash算法计算出key对应的slot,然后直接在slo ...
- FocusBI: SSIS体系结构(原创)
关注微信公众号:FocusBI 查看更多文章:加QQ群:808774277 获取学习资料和一起探讨问题. <商业智能教程>pdf下载地址 链接:https://pan.baidu.com/ ...
- 快速上手:在CVM上安装Apache
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由一步 发表于云+社区专栏 介绍 Apache HTTP服务器是世界上使用最广泛的Web服务器.它提供了许多强大的功能,包括可动态加载的 ...
- React.js 小书 Lesson22 - props.children 和容器类组件
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...
- 部分linux命令
计算机网络的主要优点是能够实现资源和信息的共享,并且用户可以远程访问信息.Linux提供了一组强有力的网络命令来为用户服务,这些工具能够帮助用户登录到远程计算机上.传输文件和执行远程命令等. 本章介绍 ...
- C++要点总结
1.内联成员函数 1)隐式声明:将成员函数直接定义在类的内部 2)显式声明:inline标示 2)在类中,使用inline定义内联函数时,必须将类的声明和内联成员函数的定义都放在同一个文件中,否则编译 ...
- 批量查找ip地址归属地脚本
#!/bin/bash ip_list=`cat $1` for i in $ip_listdocurl http://www.ip.cn/index.php?ip=$idoneexit 0
- [转]字符编码笔记:ASCII,Unicode 和 UTF-8
本文非原创,转载 ,原文地址 :http://www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html 作者: 阮一峰 日期: 20 ...