HTML标签与元素

  • HTML标签与元素
    • 1、标签
      • 1.1、介绍
      • 1.2、网页标签组成
        • 1.2.1、顶级标签:
        • 1.2.2、网页元信息head
        • 1.2.3、语义结构标签:
        • 1.2.4、文本标签:
        • 1.2.5、列表标签:
        • 1.2.6、媒体标签
        • 1.2.7、链接标签
        • 1.2.8、ifream标签
        • 1.2.9、表格:
        • 1.2.10、表单:
    • 2、元素
      • 2.1 块级元素
      • 2.2 行内元素
      • 2.3 行内块元素
      • 2.4 空(void)元素

HTML标签与元素

1、标签

1.1、介绍

标签用来告诉浏览器,如何处理这段代码。标签的内容就是浏览器所要渲染的、展示在网页上的内容。

  • 标签可以嵌套,必须保证正确的闭合顺序,不能跨层嵌套。
  • 大小写不敏感,习惯都是使用小写。
  • 忽略缩进和换行。
    • 标签内容的头部和尾部的空格,一律忽略不计;
    • 多个连续空格(包含制表符\t),会被浏览器合并成一个。
    • 换行符(\n)和回车符(\r),会被浏览器替换成空格。

1.2、网页标签组成

1.2.1、顶级标签:

  • !DOCTYPE

    • 声明文档类型,位于文档中的最前面的位置,处于 标签之前,告知浏览器的解析器用什么文档标准解析这个文档。
    • 在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
  • html:是网页的顶层容器,即标签树结构的顶层节点,也称为根元素。lang属性表示网页内容默认的语言。
    • head:网页元信息,为网页渲染提供额外信息。
    • body:网页主体内容
    • 注释:

1.2.2、网页元信息head

  • meta:设置或说明网页的元数据。

    • charset:指定网页的编码方式,例如:charset="utf-8"
    • name、content:元数据的名字和值。
      • description、keywords、author;
      • viewport、application-name、generator、subject、referrer;
    • http-equiv、content:覆盖 HTTP 回应的头信息字段。
      • Content-Type、refresh、Cache-control…
  • link:将当前网页与相关的外部资源联系起来,最常见的用途就是加载 CSS 样式表。
    • rel:必需属性,外部资源与当前文档之间的关系。

      • alternate:文档的另一种表现形式的链接,比如打印版。
      • author:文档作者的链接。
      • dns-prefetch:要求浏览器提前执行指定网址的 DNS 查询。
      • preconnect:要求浏览器提前与给定服务器,建立 HTTP 连接。
      • prefetch:要求浏览器提前下载并缓存指定资源,供下一个页面使用。
      • preload:要求浏览器提前下载并缓存指定资源,当前页面稍后就会用到。
      • prerender:要求浏览器提前渲染指定链接。
      • help:帮助文档的链接。
      • icon:加载文档的图标文件。
      • license:许可证链接。
      • prev:表示当前文档是系列文档的一篇,这里给出上一篇文档的链接。
      • next:系列文档下一篇的链接。
      • pingback:接收当前文档 pingback 请求的网址。
      • search:提供当前网页的搜索链接。
      • stylesheet:加载一张样式表。
    • media:外部资源生效的媒介条件。
      • print:打印时加载的css;
      • screen and (max-width: 600px):移动设备访问时(设备宽度小于600像素)加载的样式;
    • crossorigin:加载外部资源的跨域设置。
    • href:外部资源的网址。
    • referrerpolicy:加载时Referer头信息字段的处理方法。
    • as:rel为preload/prefetch时,设置外部资源的类型。
    • type:外部资源的 MIME 类型,目前仅用于rel为preload/prefetch的情况。
    • title:加载样式表时,用来标识样式表的名称。
    • sizes:用来声明图标文件的尺寸,比如加载苹果手机的图标文件。
  • title:指定网页的标题,会显示在浏览器窗口的标题栏。
  • style:定义 HTML 文档的样式信息。
    • media:为样式表规定不同的媒体类型。
    • scoped:HTML5新属性,添加该属性,则样式仅应用到style元素的父元素及其子元素。
    • type:规定样式表的MIME类型。
  • script:
    • 用于加载脚本代码,嵌入网页,会立即执行;
    • 加载外部脚本并执行。
    • 属性:
      • src:给出外部脚本的地址;
      • type:脚本的类型;
        • text/javascript:默认值,可省略;
        • module:表示是一个ES6模块,不是传统脚本;
      • nomodule:不支持ES6模块时加载此脚本,通常与type="module"配合使用。
      • async:异步加载,立即执行,无法保证顺序;执行的过程中文档将停止解析,直到脚本执行完毕。
      • defer:异步加载,但不是立即执行,而是页面解析完成后执行,按照加载顺序执行脚本。
      • crossorigin:HTTP 请求的头信息会加上origin字段。
      • integrity:给出外部脚本的哈希值,防止脚本被篡改。只有哈希值相符的外部脚本,才会执行。
      • nonce:一个密码随机数,由服务器在 HTTP 头信息里面给出,每次加载脚本都不一样。它相当于给出了内嵌脚本的白名单,只有在白名单内的脚本才能执行。
      • referrerpolicy:HTTP 请求的Referer字段的处理方法。
  • noscript:浏览器不支持或关闭 JavaScript 时,所要显示的内容。
  • base:设置网页内部相对 URL 的计算基准;
    • href:规定页面中所有相对链接的基准 URL。
    • target:所有的超链接和表单在何处打开,会被每个链接中的 target 属性覆盖。
  • HTML5不支持:basefont;

1.2.3、语义结构标签:

  • header

    • 表示整个网页的头部,也可以表示一篇文章或者一个区块的头部。
    • 一个页面可有多个,但一个场景只能有一个,不能嵌套另外的header/footer。
  • footer:表示网页、文章或章节的尾部。通常包含版权信息或者其他相关信息,不能嵌套另外的header/footer。
  • main:html的顶层标签,页面的主体内容,一个页面只能有一个。
  • nav:放置页面或文档的导航信息
  • article:页面里面一段完整的内容,可以有自己的标题。
  • section:一个含有主题的独立部分,通常用在文档里面表示一个章节。
  • aside:放置与网页或文章主要内容间接相关的部分。文章级别的可以用来放置补充信息、评论或注释。
  • h1 to h6:表示文章的标题。按照标题的等级,一共分成六级。
  • hgroup:标题容器标签,主标题包含多级标题(比如带有副标题),可将多级标题放在其中。
  • address:表示某人或某个组织的联系方式(不适用于地址),通常放在footer内。
  • details:只有 Chrome 和 Safari 6 支持;规定了用户可见的或者隐藏的需求的补充细节。
    • summary:一个可见的标题。 当用户点击标题时会显示出详细信息。
    • 其他内容:对用户是不可见的,除非设置了 open 属性。
  • dialog:定义一个对话框、确认框或窗口。
    • open:规定 dialog 元素是有效的,用户可以与它进行交互。

1.2.4、文本标签:

  • div p span:区块、段落、通用目的的行内标签;
  • abbr mark pre small:行内缩写 / 行内亮黄背景标记 / 保留原来格式 / 行内小一号字体;
  • strong/b:加粗,前者具有引起注意的语义;
  • em/i:斜体,前者具有强调语义;
  • del/s:删除线,前者表示删除内容;
  • ins/u:下划线,前者表示添加内容;后者提供某种注释,常表示拼写错误;
  • br/wbr hr:换行/可选断行 水平线;
  • bdi/bdo:文字方向,后者dir属性ltr/rtl;
  • time/data:提供机器可读的时间格式/内容;
  • blockquote/cite/q:引用;块级容器/表示引言出处或者作者,斜体表示/行内标签,默认自动添加引号;
  • sub/sup/var:上标/下标/变量;
  • code/samp/kbd/dfn:行内计算机代码,多行配合pre使用 / 行内计算机输出内容 / 行内键盘输入 / 行内术语;
  • ruby/rp/rt/rb:语音注释 / 不兼容展示其内容,兼容则不展示 / 语音注释 / 划分文字单位与注释一一对应;
  • progress/meter:进度条 / 定义度量衡;
  • HTML5不支持:acronym big center font strike tt。

1.2.5、列表标签:

  • ul:无序列表容器;
  • ol:有序列表容器;
    • reversed:产生倒序的数字列表;
    • start:属性的值是一个整数,表示数字列表的起始编号。
    • type:指定数字编号的样式;a:小写字母;A:大写字母;i:小写罗马,I:大写罗马;1:整数,默认;
  • li:表示列表项,用在容器之中。
    • value属性,定义当前列表项的编号,后面列表项会从这个值开始编号。
  • dl/dt/dd:块级元素,表示一组术语,dt:术语名;dd:术语解释,默认在<dt>下方缩进显示。
  • HTML5不支持:dir
  • 浏览器不支持:menu command

1.2.6、媒体标签

  • 1、img

    • srcset:指定多张图像,适应不同像素密度的屏幕。

      • 值是一个逗号分隔的字符串,每个部分都是一张图像的 URL,后面接一个空格,然后是:

        • 像素密度的描述符,格式是像素密度倍数 + 字母x,默认1x。

          • <img srcset="foo-320w.jpg,foo-480w.jpg 1.5x,foo-640w.jpg 2x"src="foo-640w.jpg">
            
          • 或者是宽度描述符就是图像原始的宽度,加上字符w,表示像素。

          •    <img srcset="foo-320w.jpg 320w,foo-480w.jpg 480w,foo-640w.jpg 640w" src="foo-640w.jpg">
            
        • 都不满足条件,那么就加载src属性指定的默认图像。

      • sizes:列出不同设备的图像显示宽。

        • 值是一个逗号分隔的字符串,除了最后一部分,前面每个部分都是一个放在括号里面的媒体查询表达式,后面是一个空格,再加上图像的显示宽度。

          • <img srcset="foo-160.jpg 160w, foo-320.jpg 320w, foo-640.jpg 640w, foo-1280.jpg 1280w" sizes="(max-width: 440px) 100vw, (max-width: 900px) 33vw, 254px" src="foo-1280.jpg">
            
        • 浏览器根据当前设备的宽度,从sizes属性获得图像的显示宽度,然后从srcset属性找出最接近该宽度的图像,进行加载。

        • 必须与srcset属性搭配使用,单独使用sizes属性是无效的。

      • referrerpolicy:对HTTP的Referer的头信息进行设置;

      • crossorigin:跨域用户凭证设置

      • loading:

        • auto:浏览器默认行为,等同于不使用loading属性。
        • lazy:启用懒加载。即将滚动进入视口,变成用户可见时才会加载。
        • eager:立即加载资源,无论它在页面上的哪个位置。
  • 2、figure/figcaption:为一个图像区块,将图像和相关信息封装在一起,<figcaption>是它的可选子元素,表示图像的文本描述。

  • 3、picture

    • 是一个容器标签,内部使用<source><img>,指定不同情况下加载的图像。
    • 考虑屏幕尺寸和像素密度的适配:
    <picture><source srcset="desktop.png, desktop-2x.png 2x" media="(min-width: 990px)"><source srcset="tablet.png, tablet-2x.png 2x" media="(min-width: 750px)"><img srcset="mobile.png, mobile-2x.png 2x" alt="Shopify Merchant">
    </picture>
    
  • 还可以用来选择不同格式的图像:图像加载优先顺序依次为 svg 格式、webp 格式和 png 格式。

    <picture><source type="image/svg+xml" srcset="logo.xml"><source type="image/webp" srcset="logo.webp"> <img src="logo.png" alt="ACME Corp">
    </picture>
    
  • 4、video:块级元素,用于放置视频,支持格式:MP4、WebM、Ogg,属性有:

    • src:视频文件的网址。
    • controls:播放器是否显示控制栏,布尔值,可只写属性名,表示打开。
    • width:视频播放器的宽度,单位像素。
    • height:视频播放器的高度,单位像素。
    • autoplay:视频是否自动播放,该属性为布尔属性。
    • loop:视频是否循环播放,该属性为布尔属性。
    • muted:是否默认静音,该属性为布尔属性。
    • poster:视频播放器的封面图片的 URL。
    • preload:播放前,是否缓冲视频文件。仅适合没有设置autoplay的情况。它有三个值:
      • none(不缓冲)、
      • metadata(仅仅缓冲视频文件的元数据)、
      • auto(可以缓冲整个文件)。
    • playsinline:iPhone 的 Safari 浏览器播放会自动全屏,该属性可以禁止这种行为,布尔值。
    • crossorigin:是否采用跨域的方式加载视频。
    • currentTime:指定当前播放位置,单位为秒。
    • duration:只读,指示时间轴上的总时间长度,单位为秒。如果是流媒体,值为+Infinity
  • 5、track:用于指定视频的字幕,放置在video标签内部,格式是 WebVTT (.vtt文件),属性:

    • label:播放器显示的字幕名称,供用户选择。
    • kind:字幕的类型,默认是subtitles,表示将原始声音成翻译外国文字,比如英文视频提供中文字幕。另一个常见的值是captions,表示原始声音的文字描述,通常是视频原始使用的语言,比如英文视频提供英文字幕。
    • src:vtt 字幕文件的网址。
    • srclang:字幕的语言,必须是有效的语言代码。
    • default:是否默认打开,布尔属性。
  • 6、audio :播放音频文件,支持MP3、Ogg、Wav格式,属性有:

    • autoplay:是否自动播放,布尔属性。
    • controls:是否显示播放工具栏,布尔属性。如果不设置,浏览器不显示播放界面,通常用于背景音乐。
    • crossorigin:是否使用跨域方式请求。
    • loop:是否循环播放,布尔属性。
    • muted:是否静音,布尔属性。
    • preload:音频文件的缓冲设置。
    • src:音频文件网址。
  • 7、source:用于picturevideoaudio的内部,用于指定一项外部资源,属性:

    • type:指定外部资源的 MIME 类型。
    • src:指定源文件,用于
    • srcset:指定不同条件下加载的图像文件,用于``。
    • media:指定媒体查询表达式,用于``。
    • sizes:指定不同设备的显示大小,用于``,必须跟srcset搭配使用。
  • 8、embed:用于嵌入外部内容,可能由于浏览器默认插件不一致导致无法访问,建议谨慎使用。

  • 9、object/param :

    • 插入外部资源,由浏览器插件处理。视为embed的替代品,有标准化行为,只限于插入少数几种通用资源,没有历史遗留问题,因此更推荐使用。

    • 属性:

      • data:嵌入的资源的 URL。
      • form:当前网页中相关联表单的id属性(如果有的话)。
      • height:资源的显示高度,单位为像素,不能使用百分比。
      • width:资源的显示宽度,单位为像素,不能使用百分比。
      • type:资源的 MIME 类型。
      • typemustmatch:布尔属性,表示data属性与type属性是否必须匹配。
      <!-- 如果浏览器安装了 PDF 插件,就会在网页显示 PDF 浏览窗口 -->
      <object type="application/pdf"data="/media/examples/In-CC0.pdf"width="250"height="200">
      </object>
      <!-- 插入 Flash 影片的例子,使用<param>标签,给出插件所需要的运行参数 -->
      <object data="movie.swf" type="application/x-shockwave-flash"><param name="foo" value="bar">
      </object>
      
  • 10、map/area:用于客户端图像映射,带有可点击区域的一幅图像。

    • <img>中的 usemap 属性可引用<map>中的 id 或 name 属性。
    • area :
      • 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
      • 属性:
        • shape:区域形状;
        • coords:区域坐标;
        • href:区域的目标 URL;
        • target:打开链接方式;
        • type:目标url的MIME类型;
        • media:目标 URL 是为何种媒介/设备优化的;
        • alt:区域的替代文本。如果使用 href 属性,则该属性是必需的。
        • rel:当前文档与目标 URL 之间的关系。
  • 11、canvas:

    • 只是图形容器,通过JavaScript脚本来绘制图形。
  • 通用属性:

    • crossorigin:跨域用户凭证设置,值可为:

      • anonymous:跨域请求不带有用户凭证(通常是 Cookie)。

        • use-credentials:跨域请求带有用户凭证。

1.2.7、链接标签

  • a:链接,点击后,跳转到指定网址。

    • href:给出链接指向的网址,是一个 URL 或者锚点。

      • mailto:采用此协议,指向一个邮件地址,点击打开默认邮件程序,可通过url拼接执行其他属性:

        • subject:主题

        • cc:抄送

        • bcc:密送

        • body:邮件内容

          <a href="mailto:foo@bar.com?cc=test@test.com&subject=The%20subject&body=The%20body">发送邮件</a>
          
      • tel:如果是移动端,使用此协议创建电话链接,点击唤起电话进行拨号。<a href="tel:13312345678">13312345678</a>

    • hreflang:链接指向的网址所使用的语言,纯提示性无实际功能。

    • type:链接 URL 的 MIME 类型,纯提示性无实际功能。

    • title:链接的说明信息。鼠标悬停在链接上方时会进行展示。

    • rel属性说明链接与当前页面的关系。

    • referrerpolicy属性用于精确设定点击链接时,浏览器发送 HTTP 头信息的Referer字段的行为。

    • ping属性指定一个网址,用户点击的时候,会向该网址发出一个 POST 请求,通常用于跟踪用户的行为。

    • target:如何展示打开的链接。

      • _self:当前窗口打开,默认值。
      • _blank:新窗口打开。
      • _parent:上层窗口打开,若当前窗口没有上层,则等同于_self
      • _top:顶层窗口打开,如果没有,则等同于_self
    • download:表明当前链接用于下载,链接与网址同源时,才会生效。

      • 值就是下载的文件名,若服务器的 HTTP 响应头设置了Content-Disposition字段,则此字段优先级更高。
  • link

  • script

  • noscript

  • HTML5不支持:applet

1.2.8、ifream标签

  • iframe:生成一个指定区域,在该区域中嵌入其他网页。属性如下。

    • allowfullscreen:允许嵌入的网页全屏显示。
    • frameborder:是否绘制边框,0为不绘制,1为绘制(默认值)。
    • src:嵌入的网页的 URL。
    • width:显示区域的宽度。
    • height:显示区域的高度。
    • sandbox:设置嵌入的网页的权限,值可为:
      • allow-forms:允许提交表单。
      • allow-modals:允许alert等提示框。
      • allow-popups:允许使用window.open()方法弹出窗口。
      • allow-popups-to-escape-sandbox:允许弹出窗口不受沙箱的限制。
      • allow-orientation-lock:允许嵌入的网页用脚本锁定屏幕的方向,即横屏或竖屏。
      • allow-pointer-lock:允许嵌入的网页使用 Pointer Lock API,锁定鼠标的移动。
      • allow-presentation:允许嵌入的网页使用 Presentation API。
      • allow-same-origin:不打开该项限制,将使得所有加载的网页都视为跨域。
      • allow-scripts:允许嵌入的网页运行脚本(但不创建弹出窗口)。
      • allow-storage-access-by-user-activationsandbox属性同时设置了这个值和allow-same-origin的情况下,允许``嵌入的第三方网页通过用户发起document.requestStorageAccess()请求,经由 Storage Access API 访问父窗口的 Cookie。
      • allow-top-navigation:允许嵌入的网页对顶级窗口进行导航。
      • allow-top-navigation-by-user-activation:允许嵌入的网页对顶级窗口进行导航,但必须由用户激活。
      • allow-downloads-without-user-activation:允许在没有用户激活的情况下,嵌入的网页启动下载。
    • importance:浏览器下载嵌入的网页的优先级,可设置:high/low/auto。
    • name:内嵌窗口的名称,可以用于a、form、base的target属性。
    • referrerpolicy:请求嵌入网页时,HTTP 请求的Referer字段的设置。
    • loading:同img标签;
    • 缺点:
      • iframe会阻塞主页面的Onload事件
      • 搜索引擎的检索程序无法解读这种页面,不利于SEO;
      • iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
  • HTML5不支持:frame frameset noframes

1.2.9、表格:

  • table:块级容器标签,所有表格内容都要放在此标签内。
  • caption:表格的标题,<table>里面的第一个子元素。
  • thead:表头,<table>的一级子元素。
  • tbody: 表体,<table>的一级子元素。
  • tfoot :表尾,<table>的一级子元素。
  • tr:表格的一行。
  • th/td :标题/数据单元格。
    • colspan/rowspan:单元格跨越的栏数 / 行数。
    • headers:td的属性,对应th的id属性值。
    • scope:th的属性,表示是行/列的标题;值可为:row/col/rowgroup/colgroup/auto;
  • colgroup:包含一组列的定义,<table>的一级子元素。
    • col :申明表格结构,为表格附加样式,没有结束标志与子元素。

      • span属性,值为正整数,默认为1。如果大于1,就表示该列的宽度包含连续的多列。

1.2.10、表单:

  • form:定义一个表单,所有表单内容放到这个容器元素之中。
  • input:行内元素,用来接收用户的输入。
    • autofocus、disabled、required、readonly、form、name、value、list;
    • type:
      • 文本相关:

        • text:普通的文本输入框,用来输入单行文本。
        • search:用于搜索的文本输入框,区别于text,尾部会显示一个删除按钮;
        • password:密码输入框,输入内容替换为*号展示;
        • 属性:maxlength/minlength/pattern/placeholder/readonly/size;
      • 选择相关:
        • radio:单选框,一组选择之中,只能选中一项;
        • checkbox:复选框;
        • 属性:
          • name:多个选择器的name值,应该都是一致;
          • checked:表示选中当前项;
          • value:选中时表单获取的值;
      • file:文件选择框;
        • accept:允许选择的文件类型,逗号分隔;MIME、后缀、image/*任何表示法;
        • multiple:是否允许多选;
      • number:数字输入框,只能输入数字。
        • placeholder/readonly/max/min/step
      • range:是一个滑块,用户拖动滑块,选择给定范围之中的一个数值。
        • max/min/step;
      • color:选择颜色的控件,它的值一律都是#rrggbb格式。value没指定则默认#000000;
      • 链接相关:
        • url:只能输入网址的文本框。提交前会自动校验格式,不符合会提示;
        • email:只能输入电子邮件的文本输入框;提交前会自动校验格式,不符合会提示;
        • tel:只能输入电话号码的输入框。由于世界规则不一致,没有默认校验规则;
        • 属性:maxlength/minlength/pattern/placeholder/readonly/size;
      • 日期相关:
        • date/time/month/week/datetime-local:只能输入YYYY-MM-DD日期 / hh:mm:ss时间 / YYYY-MM月份 / yyyy-Www一年中第几周 / yyyy-MM-ddThh:mm时间 的输入框。
        • 属性:max/min/step/readonly;
      • 按钮相关
        • button:按钮,不建议使用,可用<button>代替;
        • submit:提交按钮,可用<button>代替;
        • reset:重置按钮,可用<button>代替;
        • image:将图像文件作为提交按钮,与type=submit完全一致;
      • hidden:不显示在页面的控件,用户无法输入它的值,主要用来向服务器传递一些隐藏信息。
  • textarea:生成多行的文本框。
    • autofocus、disabled、required、readonly、form、name、value;
    • cols、rows、maxlength、minlength、wrap:hard/soft(默认)/off;
  • button:可以点击的按钮,没有默认行为,需要用type属性或脚本指定功能。
    • autofocus、disabled、name、value、form;
    • type:可能的值有三种:submit(点击后将数据提交给服务器),reset(将所有控件的值重置为初始值),button(没有默认行为,由脚本指定按钮的行为)。
  • select :生成一个下拉菜单,其值为选中的option的value属性值。
    • autofocus、disabled、required、multiple、size、form、name;
  • optgroup:菜单项的分组,通常用在select内部。
    • label:菜单项分组的标题。
    • disabled:布尔设置,是否禁用该组。
  • option:用在selectoptgroupdatalist里面,表示一个菜单项。
    • disabled、selected、label、value;
  • label:行内元素,提供控件的文字说明,帮助用户理解控件的目的。
    • for:关联控件的id属性。
  • fieldset /legend :控件的集合,用于将一组相关控件组合成一组。legend用来设置控件标题。
    • disabled、form、name;
  • datalist:规定了<input>元素可能的选项列表,id属性对应input的list属性。
  • keygen:标签规定用于表单的密钥对生成器字段。
  • output:作为计算结果输出显示(比如执行脚本的输出)。

2、元素

浏览器渲染网页时,会把 HTML 源码解析成一个标签树,每个标签都是树的一个节点(node)。这种节点就称为网页元素(element),元素的内容就是开始标签与结束标签之间的内容。

“标签”和“元素”基本上是同义词,只是使用的场合不一样:标签是从源码角度来看,元素是从编程角度来看。比如<p>标签对应网页的p元素。

2.1 块级元素

  • 默认占据一个100% 宽度的独立区域,自动换行,可设置宽高,行高,内外边距,对齐。
  • 元素有:div ul ol li dl dt dd h1 h2 h3 h4… p
  • 显示转换:display: block;

2.2 行内元素

  • 默认与其他元素在同一行,不产生换行,设置宽高、行高、margin/padding上下、对齐无效;
  • 元素有:a b span i em strong(强调的语气)等
  • 显示转换:display: inline;

2.3 行内块元素

  • 默认不产生换行,可设置宽高,行高,内外边距,对齐。
  • 元素有:img input td
  • 显示转换:display: inline-block;

2.4 空(void)元素

  • 没有内容的HTML元素;
  • 常见的空元素:<br> <hr> <img> <input> <link> <meta>

(二)HTML标签与元素相关推荐

  1. Web前端开发笔记——第二章 HTML语言 第一节 标签、元素、属性

    目录 一.什么是HTML? 二.标签 (一)标签.元素的定义 (二)标签的嵌套 (三)标签的属性 (四)父元素.子元素.兄弟元素 三.HTML DOM树 结语 一.什么是HTML? HTML语言,即超 ...

  2. CSS入门二、美化页面元素

    零.文章目录 CSS入门二.美化页面元素 1.字体属性 CSS Fonts (字体)属性用于定义字体系列.大小.粗细.和文字样式(如斜体) (1)字体系列font-family font-family ...

  3. BIMFACE功能测评- 如何创建二三维标签?

    之前章节给大家重点讲解BIMFACE中针对构件状态展示的一些接口方法,那这次就重点和大家说说运维场景中比较高频且好用的功能--二三维标签. BIMFACE目前支持RVT.SKP.IFC.IGMS.DW ...

  4. HTML学习记录二:html标签(五):超链接标签

    HTML学习记录二:html标签(五):超链接标签 一.超链接标签写法 二.超链接标签的属性 三.超链接的锚点用法 四.链接分类 一.超链接标签写法 在 HTML 标签中, 标签用于定义超链接,作用是 ...

  5. juery学习总结(二)——juery操作页面元素

    所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...

  6. 自动化(二)——八种元素定位方法

    自动化(二) 一.元素定位 1)如何元素定位 二.元素定位方式 1)id定位 2)name定位 3) class_name定位 4) tag_name定位 5) link_text以及partial_ ...

  7. css元素定位:通过元素的标签或者元素的id、class属性定位

    前言 大部分人在使用selenium定位元素时,用的是xpath元素定位方式,因为xpath元素定位方式基本能解决定位的需求.xpath元素定位方式更直观,更好理解一些. css元素定位方式往往被忽略 ...

  8. 交换二维数组元素c语言,二维数组中元素替换问题!

    二维数组中元素替换问题! 题目:对某个二维数组右上三角的全部元素(不包括对角线上的元素)做如下变换: (1)若该数是偶数,则找到左下三角中和它关于对角线对称的元素用这两个元素的最大公约数替换该数 (2 ...

  9. C语言学习之有一个3X4的二维数组,要求用指向元素的指针变量输出二维数组各元素的值

    有一个3X4的二维数组,要求用指向元素的指针变量输出二维数组各元素的值. int main(){int a[3][4];int i,j,*p;//p是 int *型指针变量printf("请 ...

最新文章

  1. R语言使用ggpubr包的ggarrange函数组合多张结论图(垂直组合+水平组合)并对图像进行顺序编码A、B、C,,,
  2. SELECT语句小结
  3. python条件查询 或 in_64.Python中ORM查询条件:in和关联模型
  4. 《算法竞赛入门经典》 例题 4-1 古老的密码(Ancient Cipher) UVa 1339
  5. (收藏)Html相关网址
  6. scrapy同时运行多个spider
  7. 我最开始学dancing link的HTML5的时候
  8. 终于有人把「同侪效应」讲明白了
  9. IT职场人生系列之十五:语言与技术II
  10. 使用CocoaPods被卡住:Updating local specs repositories
  11. Android Canvas drawText实现中文垂直居中
  12. 《艾恩ASP文件上传类》开发和使用总结
  13. vba手机号码归属_Android中手机号码归属地查询实现
  14. python学习笔记(汇率兑换)
  15. 【杭电数电实验】verilog入门指北
  16. 看2022年卡塔尔世界杯有感
  17. html中的 脚本制作教程,html5教程制作简单画板代码分享
  18. XLSX导出页面表格内容 日期数据显示不全
  19. 循环移动数组,比如移动M个位置
  20. (转)Windows应用程序中动态的控制输入法

热门文章

  1. 业余无线电通信_其它业余无线电通信方式应避免占用业余卫星频率
  2. 教你如何更好的进行网页布局
  3. 六款APP加上一支笔 让你成为绘画大师
  4. 校园二手商品交易网站的设计与实现
  5. windows修改cmd命令行字体
  6. 数据分析入门的经典书籍——《精益数据分析》
  7. #3使用html+css+js制作网页 制作登录网页
  8. 【BZOJ4943】【UOJ315】【NOI2017】蚯蚓
  9. 谷歌浏览器兼容性极差!
  10. 记APP实现多语言(国际化)过程,兼容Android 8.0以上