zoukankan      html  css  js  c++  java
  • html tags and attribute集参考

    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 NameElementsDescription
    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

  • 相关阅读:
    hdu 4577 X-Boxes 大数
    hdu 4576 Robot 概率DP
    将IP地址转化为整数
    MyISAM压缩表
    yii2 模态框
    MySQL数据库设计
    foreach循环赋值问题
    实用的网站
    判断链接地址是否有效
    tp5获取配置文件信息
  • 原文地址:https://www.cnblogs.com/kidsitcn/p/4979586.html
Copyright © 2011-2022 走看看