美文网首页
HTML学习:元素与属性

HTML学习:元素与属性

作者: 虞锦雯 | 来源:发表于2018-07-19 19:53 被阅读14次

    一、HTML元素

    HTML 文档由 HTML 元素定义,由嵌套的HTML元素(可以包含其他HTML元素)构成,HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
    开始标签常被称为起始标签(opening tag),结束标签常称为闭合标签(closing tag)。

    HTML元素语法

    • HTML 元素以开始标签起始,以结束标签终止;
    • 元素的内容是开始标签与结束标签之间的内容;
    • 某些 HTML 元素具有空内容(empty content);
    • 空元素在开始标签中进行关闭(以开始标签的结束而结束);
    • 大多数 HTML 元素可拥有属性。

    HTML 文档由嵌套的HTML元素(可以包含其他HTML元素)构成。

    HTML空元素

    • HTML空元素即为没有内容的HTML元素;
    • HTML空元素应该在开始标签中关闭;
    • HTML的一个空元素为 <br>(用于定义换行),<br> 元素就是没有关闭标签;
    • HTML空元素的关闭方法是在开始标签中添加斜杠,比如<br/>,HTML、XHTML和XML都接受这种方式。

    使用小写标签

    由于HTML标签对英文字母的大小写不敏感,所以<P><p>表达的意思相同,不过大部分网站喜欢使用大写的HTML标签。
    推荐使用小写标签。

    HTML元素参考手册

    标签 描述 HTML5新属性
    基础
    <!DOCTYPE> 定义文档类型
    <html> 定义一个HTML文档
    <title> 为文档定义一个标题
    <body> 定义文档的主体
    <h1> to <h6> 定义HTML标题
    <p> 定义一个段落
    <br> 定义简单的折行
    <hr> 定义水平线
    <!--...--> 定义一个注释
    格式
    <abbr> 定义一个缩写
    <address> 定义文档作者或拥有者的联系信息
    <b> 定义粗体文本
    <bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置
    <bdo> 定义文本的方向
    <blockquote> 定义块引用
    <cite> 定义引用(citation)
    <code> 定义计算机代码文本
    <del> 定义被删除文本
    <dfn> 定义定义项目
    <em> 定义强调文本
    <i> 定义斜体文本
    <ins> 定义被插入文本
    <kbd> 定义键盘文本
    <mark> 定义带有记号的文本
    <meter> 定义度量衡。仅用于已知最大和最小值的度量
    <pre> 定义预格式文本
    <progress> 定义运行中的任务进度(进程)
    <q> 定义短的引用
    <rp> 定义不支持 ruby 元素的浏览器所显示的内容
    <rt> 定义字符(中文注音或字符)的解释或发音
    <ruby> 定义ruby注释(中文注音或字符)
    <s> 定义加删除线的文本
    <samp> 定义计算机代码样本
    <small> 定义小号文本
    <strong> 定义语气更为强烈的强调文本
    <sub> 定义下标文本
    <sup> 定义上标文本
    <time> 定义一个日期/时间
    <u> 定义下划线文本
    <var> 定义文本的变量部分
    <wbr> 规定在文本中的何处适合添加换行符
    表单
    <form> 定义一个 HTML 表单,用于用户输入
    <input> 定义一个输入控件
    <textarea> 定义多行的文本输入控件
    <button> 定义按钮
    <select> 定义选择列表(下拉列表)
    <optgroup> 定义选择列表中相关选项的组合
    <option> 定义选择列表中的选项
    <label> 定义 input 元素的标注
    <fieldset> 定义围绕表单中元素的边框
    <legend> 定义 fieldset 元素的标题
    <datalist> 规定了 input 元素可能的选项列表
    <keygen> 规定用于表单的密钥对生成器字段
    <output> 定义一个计算的结果
    框架
    <iframe> 定义内联框架
    图像
    <img> 定义图像
    <map> 定义图像映射
    <area> 定义图像地图内部的区域
    <canvas> 通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像)
    <figcaption> 定义一个 caption for a <figure> element
    <figure> figure 标签用于对元素进行组合
    Audio/Video
    <audio> 定义声音,比如音乐或其他音频流
    <source> 定义media元素 (<video> 和 <audio>)的媒体资源。media
    <track> 为媒体(<video> 和 <audio>)元素定义外部文本轨道
    <video> 定义一个音频或者视频
    链接
    <a> 定义一个链接
    <link> 定义文档与外部资源的关系
    <nav> 定义导航链接
    列表
    <ul> 定义一个无序列表
    <ol> 定义一个有序列表
    <li> 定义一个列表项
    <dl> 定义一个定义列表
    <dt> 定义一个定义定义列表中的项目
    <dd> 定义定义列表中项目的描述
    <menu> 定义菜单列表
    <command> 定义用户可能调用的命令(比如单选按钮、复选框或按钮)
    表格
    <table> 定义一个表格
    <caption> 定义表格标题
    <th> 定义表格中的表头单元格
    <tr> 定义表格中的行
    <td> 定义表格中的单元
    <thead> 定义表格中的表头内容
    <tbody> 定义表格中的主体内容
    <tfoot> 定义表格中的表注内容(脚注)
    <col> 定义表格中一个或多个列的属性值
    <colgroup> 定义表格中供格式化的列组
    样式/节
    <style> 定义文档的样式信息
    <div> 定义文档中的节
    <span> 定义文档中的节
    <header> 定义一个文档头部部分
    <footer> 定义一个文档底部
    <section> 定义了文档的某个区域
    <article> 定义一个文章内容
    <aside> 定义其所处内容之外的内容
    <details> 定义了用户可见的或者隐藏的需求的补充细节
    <dialog> 定义一个对话框或者窗口
    <summary> 定义一个可见的标题。当用户点击标题时会显示出详细信息
    元信息
    <head> 定义关于文档的信息
    <meta> 定义关于 HTML 文档的元信息
    <base> 定义页面中所有链接的默认地址或默认目标
    程序
    <script> 定义客户端脚本
    <noscript> 定义针对不支持客户端脚本的用户的替代内容
    <embed> 定义了一个容器,用来嵌入外部应用或者互动程序(插件)
    <object> 定义嵌入的对象
    <param> 定义对象的参数

    二、HTML属性

    属性是为HTML元素提供的附加信息。属性和属性值对大小写不敏感。推荐使用小写的属性/属性值。

    • HTML元素可以设置属性;
    • 属性可以在元素中添加附加信息;
    • 属性一般描述于开始标签;
    • 属性总是以名称/值对的形式出现,比如:name="value"
    • 属性值应该始终被包括在引号内;
    • 双引号是最常用的,不过使用单引号也没有问题。

    HTML属性参考手册

    属性 描述 HTML5新属性
    accesskey 设置访问元素的键盘快捷键。
    class 规定元素的类名(classname)
    contenteditable 规定是否可编辑元素的内容。
    contextmenu 指定一个元素的上下文菜单。当用户右击该元素,出现上下文菜单
    data-* 用于存储页面的自定义数据
    dir 设置元素中内容的文本方向。
    draggable 指定某个元素是否可以拖动
    dropzone 指定是否将数据复制,移动,或链接,或删除
    hidden hidden 属性规定对元素进行隐藏。
    id 规定元素的唯一 id
    lang 设置元素中内容的语言代码
    spellcheck 检测元素是否拼写错误
    style 规定元素的行内样式(inline style)
    tabindex 设置元素的 Tab 键控制次序。
    title 规定元素的额外信息(可在工具提示中显示)
    translate 指定是否一个元素的值在页面载入时是否需要翻译

    相关文章

      网友评论

          本文标题:HTML学习:元素与属性

          本文链接:https://www.haomeiwen.com/subject/iepapftx.html