HTML元素大全(1)

HTML元素大全(1)插图

01、基础元素

标题

从大h1到小h6,块元素,有6级标题。是一种标题类语义标签,内置了字体、边距样式。

  • 合理使用h标签,主要用于标题,不要为了加粗效果而随意使用。
  • h1用于最重要的标题内容,会被搜索引擎使用,用得太多影响SEO效果。

标题标签h1/2/3/4/5/6:一级标题

2级标题

3级标题

4级标题

5级标题
6级标题
属性 描述
align 标题的水平对齐方式 left、center、right

段落元素

段落元素

内容

(**paragraph **/ˈpærəɡrɑːf/ 段落、分段)块元素,表示一个内容段落,前后自动换行,段落之间会有间隙(默认margin上、下=1em),比
的行间距更大。

段落文字1

段落文字2
012

普通文字1,用br换行
普通文字1

HTML元素大全(1)插图1


换行

换行元素(Break):
,单标签,默认行间距。HTML中不识别输入的回车换行,需用
标签换行。


水平线

水平线元素:


,单标签,有颜色color、长度width、粗细size、对齐align等属性,CSS中可用border设置样式。





HTML元素大全(1)插图2

属性 描述
color 线颜色 颜色
width 宽度 像素、百分比
size 线粗细 整数,像素
align 水平对齐方式, left、center、right

列表标签

列表都是块元素,li中可以放任何东西,常用来组织列表相关内容,如商品列表、树形结构、导航等。

  • 无序列表

    :unordered list,li为列表项,属性type可定义符号样式,默认disc(实心圆)。

  • 有序列表

    :ordered list,li为列表项,属性type可定义排序样式,默认1(数字)。

属性 描述 值/示例
type 序号类型 无序列表disc=实心圆、square=方块、circle=空心圆
有序列表1=数字、a/A=字母、i/I=阿拉伯数字
start 有序列表:序号开始的值,默认1

    reversed 有序列表:倒序排列

    1. 的属性value
    2. 有序列表:设置序号值,会影响后面

      • l1
        • l1的嵌套子节点
      • l2
      • l3
      1. l1
      2. l2
      3. l3
      4. l4
      5. l5

      HTML元素大全(1)插图3

      • 无序标签、有序标签可以多层(相互)嵌套。
      • 列表项中的内容可以是文本,也可以是其他标签,如图片img、a标签。
      • 使用场景:新闻列表,导航按钮。
      • list-style-type:在css中设置列表符号样式,如ul li{list-style-type:disc} ``ol li{}枚举值-菜鸟教程
        • disc、circle...:实心、空心符号
        • decimal...:数字

      ⌨️快捷键(VSCode)标签名*数量>子标签名*数量,快速输入多组父子标签,加大括号则为标签中内容。ul>li*3:快速输入ul标签+3组子li标签。

      语义化描述列表

      作用同

        类似,通常用于展示词汇表或者元数据 (键 - 值对列表),块元素。JD首页的分类导航就是用的

        结构。

        元素/属性 描述

        description list,描述列表,包含多组

        description term( /tɜːrm/ 术语,项 )描述术语(标题)

        的子元素

        description definition(/ˌdefɪˈnɪʃn/,定义)描述内容

        的子元素,放到

        后面,用来描述

        。默认样式左缩进:margin-inline-start: 40px

        人物简介:
        一代诗仙
        代表作:
        仰天大笑出门去,下楼排队做核酸

        HTML元素大全(1)插图4

        /引用元素

        语义化引用元素,代表其中的文字是引用内容。

        元素/属性 描述

        块元素

        块级引用元素(quote /kwoʊt/ 引用、引文),默认会增加缩进,一般都会加上额外的自定义样式。
         cite (/saɪt/ 引用)标注引文相关资源的url地址或相关解释信息,但并不会显示
        行内元素 行内引用行内元素,默认样式是用伪元素添加了引号“”
         cite 同上块引用

        ⚠️注意:默认样式不同浏览器不同,所以最好通过css统一样式。

        
        
        块引用blockquote文本行内引用q
        行内引用q

        HTML元素大全(1)插图5

        文本元素

        针对文本内容的常规元素。除了pre是块元素,其他都是行内元素。文本标签一般会嵌套在

        标签中使用,实现不同语义/效果。

        元素/属性 描述 值/示例
        span>
        ( /spæn/)无特定含义,是用来组织文档的行内元素(行内容器),外观取决于css span内容
        设置文本字体样式的文本元素,文本在标签里
         face 字体类型,值为字体名称 face="楷体"
        size 字体大小,从 1 到 7 的数字,默认3。不同于字号,已废弃不推荐使用。 推荐css代替
         color 字体颜色 颜色

        
        

        块元素

        预格式的文本(predefine /ˈpriːdɪˈfaɪn/ 预定义),保留空格、换行符,默认等宽字体。只能包含文本/行内元素,不能再包含其他块元素了。
        粗体样式(Bold),单纯样式效果
        strong>
        粗体效果,加重语气,更强调语义,语义在搜索引擎、语音阅读时有效
        _斜体_样式,单纯样式效果
        em>
        _斜体_效果(emphasis/ˈemfəsɪs/强调),着重语气,和i相比强调的语义
        下划线
        删除线
        下标(字体小)
        上标(字体小)
        span内容
        font标签内容
        
        pre字体内容   ,
          支持回车和空   格

        粗体b  
        粗体strong 
        斜体i 
        em标签 
        下划线u 
        删除线del 
        下标sub 
        上标sup

        HTML元素大全(1)插图6

        语义元素

        表示特点语义的元素,默认提供了一些样式(吃藕丑)。

        元素/属性 描述
        行内元素 缩略语或缩写(abbreviation /əˌbriːviˈeɪʃn/ 缩略),默认样式:下划线(虚线)
         title 用title解释其含义,鼠标提示显示

        块元素

        联系方式的元素,如地址、URL,邮箱等。默认样式:斜体+块元素
        行内元素 计算机代码,默认样式:等宽字体
        行内元素 变量名称:数学表达式或编程中的变量,默认样式:斜体
        行内元素 键盘、用户输入,默认样式:monotype 字体
        行内元素 计算机程序输出,(sample,样本)默认样式:monotype 字体
        行内元素,IE🚫 时间日期,用于根据不同的语言输出不同的格式
         datetime 合法的日期时间值
        我们使用 HTML(abbr缩写) 来组织网页文档。 欢迎光临怡红院!联系方式(address):
        长安南路   发送邮件
        code代码   var变量   键盘kbd Fn+R   计算机输出samp  

        HTML元素大全(1)插图7

        及语义

        是一个容器元素,是一个“纯粹的”、“无任何语义的”容器块元素,用来把不同的内容分区管理。本身无任何表现效果,配合css使用。
        在HTML5中增加了和div相同作用的语义化块布局元素标签,这些元素定义了一个大概的语义范围,并没有一个严格的界限,同样也么有任何样式。语义块元素可读性更好,也更有利于SEO。

        元素/属性 描述

        块级无语义元素(division 分区)
        align 内部内容的对齐方式,已废弃

        IE9

        页眉:文档头部相关区域

        导航栏:主导航相关区域

        页脚:底部相关区域,如页面下面的版权信息、文章后面的申明信息等

        侧边栏:页面内容以外的区域,如侧边栏、呼出框等
        主内容:文档主内容区域

        文章,表示一个独立的、可重复的内容块,如一篇博客、一条评论、一篇帖子

        段落部件,文档中的章节、页眉、页脚,把article分为多个section

        ⚠️注意:语义化块元素在_一些古老_的浏览器存在兼容性问题,如IE8。

        div布局

        div class="header"
        div class="left"
        div class="right"

        语义布局

        header class="header"
        article class="right"
        footer class="footer"

        HTML元素大全(1)插图8HTML元素大全(1)插图9

        超链接

        元素是最常用的超链接标签,主要属性是href这是网络互联的重要特性。行内元素,不会换行。双标签:标签内可以放其他内容,如文字、图片。

        属性 描述 值/备注
        href 超链接(hypertext reference),要跳转的目标链接地址,除了http地址,还支持页面内部的锚点跳转。 🔸 相对路径或网络路径,资源路径
        🔸 锚点/文档片段:页面内部跳转,用#号标识, 作为文档片段使用,跟在url后面
         ● href="#",或不设置,跳转到头部
         ● 用标签的name属性作为锚点,href="#name"http://url#id
         ● 用其他标签的id属性作为锚点,href="#id"http://url#name
        🔸 电子邮件连接:href="mailto:URL"
        🔸 电话:href="tel:号码"
        name 元素名称,可作为锚点 设置锚点,跳转到锚点
        target 告诉浏览器用什么方式来打开目标页面 - _self:在同一个网页中显示(默认值)
        - _blank在新的窗口中打开
        - _parent:在父窗口中显示;_top:在顶级窗口中显示。
        rel 与目标对象的关系
        download 指示这是一个下载地址 值为本地保存文件名

        ⚠️当不希望a标签执行跳转,用来执行其onclick事件时,需设置href="javascript:void(0)",申明不执行跳转。

        显示的内容=a标签=百度
        相对地址
        
        默认#-跳转到头部
        a标签的name属性作为锚点   
        任意元素的id属性作为锚点
        
        不执行a标签跳转
        

        a标签设置了href属性后,就是一个可以点击操作的超链接了,鼠标样式为小手形状HTML元素大全(1)插图10(pointer),同时有三种显示模式(默认样式),都可以通过css样式(伪元素选择器)调整。

        HTML元素大全(1)插图11

        • 未点击时,显示为蓝色字体+下划线
        • 点击访问过,显示为紫色字体+下划线
        • 鼠标点击链接时,显示为红色字体+下划线

        元素标签的样式应该遵循上面的基本逻辑,基本原则就是让人容易分辨出这是一个超链接。


        02、

        表格

        是一个嵌套组合的复合元素,块元素,一个表格table,有多个行,每行有多个单元格组成,常用于展示集合数据。

        包含多种特有的子元素,构成表格的各个部分。
        表格元素结构/顺序

        /

        HTML元素大全(1)插图12

        元素/属性 描述 值/备注

        的子元素

        元素

        。目的是统一列样式管理

        子元素,并不能创建列,只是管理样式

        ,包含多个

        元素

        元素


        定义表格元素
         border 表格外边框粗细,>=1,会同时开启单元格边框(1),通过css合并 像素
         align 整个表格相对于父容器的对齐方式 right、center、left
         width、height 表格宽度、高度,table/tr/td/th都支持 像素、百分比
         bgcolor 背景色,table/tr/td/th都支持 bgcolor="#F5F5F5"

        表格行(table row),包含多个th或td
         align 行内(单元格)内容的水平对齐方式,默认left right、center、left
         valign vertical,垂直对齐默认middle,对应的css属性为vertical-align top、middle、bottom
        rowspan 行(水平)单元格合并,合并下面的单元格,需去掉对应的单元格 合并单元格的数量

        基本单元格(table data cell),

         align 单元格内容的对齐方式 right、center、left
         width 单元格宽度,一列中多个高度设置则取最大值。
        colspan 列(垂直)单元格合并,合并右边的单元,需去掉对应的单元格 合并单元格的数量
        其他语义化子元素 让表格结构更清晰,也更容易进行样式管理

        表头,1个可选,包0或多个

        表头单元格(table header cell),同

        ,默认样式:居中、加粗
         scope 表头类型,(/skoʊp/范围)row=行表头,col=列表头。 便于阅读器理解表格

        表格标题,1个可选,可用css的caption-side设置位置

        表格列分组,0个或多,包含多个

         span 横跨的列数,还有width、class、style用于管列样式 css支持的样式好像不多

        表格主体数据区域,零个或多个

        DOM中一直都会有的

        汇总行,1个可选,包含0 或多个

        ⌨️快捷键(VSCode)
        多组标签文本输入:标签名*数量{文本内容},后面加上花括号,自动补充标签内容。如table>tr*2>td*4{单元格}

        name age birthday
        zhangsan 22 2000-12-12
        23 2000-12-12 多了一格

        HTML元素大全(1)插图13


        03、多媒体与嵌入

        这样的元素被称之为替换元素,因为这些元素的内容和尺寸由外部资源所定义,而不是元素自身。

        图片

        图片标签(image)单标签、行内元素,最核心属性src指向图片地址,可以是网络路径、文件地址。行内元素,不会自动换行,可嵌套在a标签里面,实现图片点击跳转效果。

        元素/属性 描述 值/备注
        src 图片资源的地址,支持网络路径、文件路径。 资源路径说明
        alt 图片无效时的占位文字,建议填写有意义内容(或空),阅读器会读 这是一个充满人性化的属性!
        height、width 高宽,只设置一个属性会自动等比缩放,所以一般设置一个即可 尺寸,图片无效时尺寸也无效了
        srcset 候选图像:图像url 宽度w/像素密度x,多个逗号分割,优先于src。
        根据屏幕密度,和sizes的设置来选择(下载)图像。
        配合sizes实现响应式图片
        sizes 资源的大小:媒体条件 尺寸值,多个逗号隔开。
        基于媒体查询选择最合适图像(srcset)及设置图像显示大小
        sizes="(max-width: 600px) 200px, 50vw
        border 边框粗细,已废弃,由css的border代替 像素
        align 相对于父容器内的对齐排列方式。已废弃 top、bottom、middle、left、right

        新的srcsetsizes属性可用来更好的实现响应式图片,以适应不同分辨率的设备。不过老旧的浏览器并不支持,所以仍需保留src,以便更好的兼容。

        ⚠️注意:在调试srcset、sizes的时候,img会缓存图片,手动调整浏览器窗口大小并不会立即生效,需清除缓存(或禁用缓存)。而不会有这个困扰!

        HTML元素大全(1)插图14
        图片不存在
        HTML元素大全(1)插图16
        HTML元素大全(1)插图17
        
        HTML元素大全(1)插图18
        HTML元素大全(1)插图19
        

        HTML元素大全(1)插图20

        现代图片

        图片,由多个媒体资源组成,元素标签内部依然需要包含一个元素,不支持或没有匹配到合适的时,则会显示内部

        元素/属性 描述
        媒体资源 的子元素
         srcset 资源url
         media 媒体查询 media="(min-width: 800px)"大于800px时命中
         type 资源的MIME 类型 type="image/svg+xml"

        在图片格式上,推荐多用新的图形,如.svg.webp.jpeg,可以在有高质量的同时有较低的文件大小。

        
            
            
            HTML元素大全(1)插图21
        
        
            
            HTML元素大全(1)插图22
        
        

        内容块语义元素

        为了更好的展示图片内容,可使用 HTML5 的

        元素,专门用来展示图形内容的语义化容器元素,不过本身并没有什么特别的样式,需css。

        元素/属性 描述

        块元素

        可附标题内容元素(figure /ˈfɪɡə(r)/ 图形),代表一段独立的内容。不一定要是一张图片,可以是几张图片、一段代码、音视频、方程、表格或别的。默认样式:缩进
        块元素
        描述了

        元素的说明/标题(caption /ˈkæpʃ(ə)n/ 说明、字幕、标题)

        晚霞
        洗一洗,那是我逝去的青春!

        HTML元素大全(1)插图24

        元素/属性 描述
        媒体播放器,除了属性,还有很多JS方法事件用于视频播放控制
        src 视频资源url,MP3 (音频) 和 MP4/H.264 (视频) 是被广泛支持的两种格式,MP4专利到2027
        controls 启用视频控制功能
         width、height 宽高
         autoplay 启用自动播放,一般不建议使用
         loop 启用循环播放( /luːp/ 循环)
         muted 开启静音(muted /ˈmjuːtɪd/)
         poster 默认显示的海报图片URL(/ˈpəʊstə(r)/ 海报)
        媒体资源,代替src,可以放多个,提升浏览器对媒体格式的兼容性。的子元素
        时序字幕的子元素
         标签内的内容 当浏览器不支持时会显示,降级方案
        音频播放器( /ˈɔːdiəʊ/ )
         同 基本相同,除了没有width、height、poster属性
        
        
        

        内联框架,嵌入一个完整的HTML页面,iframe 元素会创建其文档的内联框架,有自己的会话历史记录 (session history)和DOM 树。嵌入的文档会被包含在 window.frames,通过脚本可以访问其contentDocument。同时在框架内部,脚本可以通过 window.parent 引用父窗口对象。

        元素/属性 描述
        内联框架
        src url地址
         height/width 高度、宽度(默认300px)
         frameborder 是否显示边框,1(yes),0(no),推荐用css设置border
         sandbox 安全性相关设置,支持很多参数
         srcdoc 可以被渲染到iframe的HTML 代码
         name 名称,window.frames.name
        HTML 4 中用来定义窗口(框架),H5已不支持

        的上下级可以相互访问,这的确很方便,但这同样非常危险,因为你的网页可被人任何人嵌入。脚本访问框架内容必须遵守同源策略(协议、端口、IP地址(域名)都相同),并且无法访问非同源的 window 对象的几乎所有属性。跨域的通信可以通过 Worker.postMessage() 来实现。

        ⚠️因此被嵌入,和嵌入其他网页,都需要格外谨慎小心,注重安全防范。

        • 使用HTTPS。
        • 使用 sandbox 属性控制权限。
        • 配置 CSP 指令,在meta中配置CSP 安全策略。
        • 需重视安全问题,只有在必要时嵌入。

        过时的嵌入元素

        元素用来嵌入多种外部内容的通用嵌入工具,如 Java 小程序、Flash、PDF、浏览器插件,甚至视频,SVG 和图像等类型。现代的WEB技术已比较成熟了,就像IE一样,插件也将逐步称为历史。

        元素/属性 描述
        单标签 ( embed /ɪmˈbed/ 嵌入)将外部内容嵌入文档
         src 资源url地址
         type 资源的 MIME 类型
         height/width 高度、宽度
        嵌入一个外部资源
         data 资源url地址
         type 资源的 MIME 类型
         height/width 高度、宽度
        
            You don't have a PDF plugin, but you can download the PDF file.
        
        

        ©️版权申明:版权所有@安木夕,本文内容仅供学习,欢迎指正、交流,转载请注明出处!原文编辑地址

                
        posted @

        2022-10-25 10:02 
        安木夕 
        阅读(22
        评论(0
        编辑 
        收藏 
        举报

            

            
                    

        Copyright © 2022 安木夕

        Powered by .NET 6 on Kubernetes








        文章来源于互联网:HTML元素大全(1)

        THE END
        分享
        二维码