HTML 【实用教程】（2024最新版）

07-07 1111阅读

核心思想 —— 语义化

【面试题】如何理解 HTML 语义化 ?

仅通过标签便能判断内容的类型，特别是区分标题、段落、图片和表格

增加代码可读性，让人更容易读懂
对SEO更加友好，让搜索引擎更容易读懂
html 文件的基本结构

html 文件的文件后缀为 .html，如 index.html

vscode 中输入英文 ! 可快捷输入
```
  
  
    
    
    
    
    
    Document
    
    
      html,
      body {
        height: 100%;
      }
    
  
  
  
  
  
  
  
  
```
```
【面试题】为什么 标签要写在 中  ?
```
浏览器解析 HTML 文档是自上而下的，将标签要写在中就能先加载样式，再加载元素。

若将标签写在下方，则是先加载元素，再加载样式，导致用户会看到没有样式的页面结构。
```
【面试题】为什么 标签要写在  内的底部  ?
```
浏览器解析 HTML 文档是自上而下的，若未放在内的底部，则会先加载并解析 JS ，再渲染元素，导致页面渲染的时间延长，倘若 JS 中涉及 DOM 操作，还会阻塞页面的渲染。

html 标签的分类

根据标签的默认的 display 样式值分为两类
```
【面试题】HTML有哪些内联元素和块状元素 ?
```
内联元素

宽度由内容决定
- display :inline 若非替换元素，不能设置宽高
```
img，span ,  a ,  b 等
```
  - display :inline-block 可以设置宽高
```
input， button 等
```
    块状元素
    
    宽度由容器决定（宽度会撑满整个容器），可以设置宽高
    - display: block
```
div，h1-h6，p，ul, ol ，form , hr 等
```
      - display: table
        table
        
        display: list-item
        li
        
        HTML 中的替换元素
        
        通过修改某属性值（大部分是 src 属性）就能替换其呈现内容的元素，被称为“替换元素”。
        
        以下标签，都是替换元素：
        
        img、video、iframe、canvas、textarea、input、select、object
        
        替换元素的特征
        
        都是内联元素
        内容的外观不受其他标签 CSS 的影响，如替换的内容中的文本等。
        替换的内容本身就有尺寸
        img 默认的尺寸即其加载的图片的尺寸。
        video、iframe、canvas 等默认的尺寸（不包括边框）是300px * 150px。
        替换元素的基线（vertical-align 的默认值 baseline 即基线）为元素的下边缘，而不是字符 x 的下边缘
        若未加载替换内容（如未设置 src 属性），替换元素就会失去替换元素的特征，变成一个普通的内联元素
        替换元素的尺寸
        
        替换元素的最终尺寸由以下三种方式共同决定，它们的优先级由高到低依次是：
        
        通过 CSS 的 width、height、max-width/min-width、max-height/min-height 设置的尺寸
        替换元素上的 html 属性可以设定尺寸，如 img 的 width 和 height 属性、input 的 size 属性、textarea 的 cols 和 rows 属性等
        替换的内容本身有尺寸
        HTML5 新增的标签
        
        【面试题】HTML5 新增了哪些标签 ? (回答几个常用的即可)
        
        结构性标签
        
        : 定义文档或节的头部。 : 定义导航链接。 : 定义文档中的独立节。 : 定义文档、页面、应用或网站中独立的内容区域。 : 定义页面的侧边栏内容。 : 定义文档或节的页脚。 : 定义文档的主体内容。
        
        多媒体标签
        
        : 定义视频或电影。 : 定义音频内容。 : 为和元素定义媒体资源。 : 为和元素定义文本轨道。 : 定义嵌入的内容，比如插件。 : 用于在网页上绘制图形。
        
        表单标签
        
        : 定义选项列表，与元素配合使用，以提供“自动完成”功能。 : 定义不同类型的输出，比如脚本的输出。
        
        其他标签
        
        : 定义日期或时间。 : 定义高亮显示的文本。 : 定义任何类型的任务的进度。 : 定义已知范围或分数值内的标量测量。 : 定义用户可见的或者隐藏的额外的细节。 : 定义元素的可见标题。 : 规定独立的流内容（图像、图表、照片、代码等等）。 : 定义元素的标题（caption）。
        
        HTML 常用标签实战要点
        
        link 外链资源
        
        限 head 标签内使用，可定义文档与外部资源之间的关系，如外链 css 样式，外链页面标题前的小图标等。
        
        a 超链接
        
        超链接 a 标签的四大功能（页面跳转、页内滚动【锚点】、页面刷新、文件下载）
        https://blog.csdn.net/weixin_41192489/article/details/140217094
        
        给段落添加超链接
        用 p 包裹 a，而不是 a 包裹 p
        
        段落
        
        普通文本专用标签
        
        br 段落内换行
        
        仅适用于 p 标签内部的换行，段落间的换行或调整元素间的间距请使用样式 padding、margin 等样式。
        
        广东省
        广州市
        黄埔大道西601号
        
        
        
        span 行内文本
        
        用于包裹行内的部分文本来添加特殊的样式。
        
        要点：不能长时间睡觉。
        
        sup 上标
        
        m2
        
        sub 下标
        
        m2
        
        pre 预定义文本
        
        块状元素 display: block
        
        可保留所有空白字符(空格、换行符)，原封不动的输出结果，常用于展示计算机的源代码。
        
        你好：我昨天给你打了个电话。
        
        code 代码
        
        内联元素 display: inline
        
        用于表示计算机源代码或者其他机器可以阅读的文本内容，为保留代码的缩进格式，通常和 pre 标签一起使用。
        
        code 标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来。
        
        let a = 1;
        
        列表相关标签
        
        ul 无序列表
        
        type 属性可修改序号类型
        disc 实心原点【默认】
        square 实心方点
        circle 空心圆
        咖啡
        
        茶
        
        牛奶
        
        
        
        ol 有序列表
        
        type 属性 —— 序号类型，如1( 阿拉伯数字【默认】) 、a、A、i、I
        start 属性 —— 计数起点
        咖啡
        
        茶
        
        牛奶
        
        
        
        嘿嘿
        
        嘿嘿
        
        呵呵
        
        
        
        哈哈
        
        哈哈
        
        哈哈
        
        
        
        列表嵌套
        
        li 是一个容器级标签，里面什么都能放，包括 ul。
        
        北京市
        海淀区
        
        朝阳区
        
        东城区
        
        广州市
        天河区
        
        越秀区
        
        
        
        table 表格
        
        https://blog.csdn.net/weixin_41192489/article/details/140217983
        
        i 图标
        
        i 标签原用于表示斜体文字，默认有字体倾斜的效果，但现在斜体统一通过css实现。因 i 为图标 icon 的首字母，现习惯用 i 标签来展示图标，所以需添加样式 font-style:normal 取消默认的倾斜。
        
        ☎
        
        img 图片
        
        display :inline 内联元素
        
        支持的图片格式：jpg(jpeg)、gif、png、bmp，其他格式不支持，如psd、ai
        
        src【必要】：图片的地址
        
        alt【重要】：当图片无法显示时，代替图片显示的内容，搜索引擎会抓取此属性。alt 源自单词 alternate “替代”，代表替换资源。（有的浏览器不支持）
        
        要想图片保持宽高比，通常只设置 width 和 height 中的一个
        
        【实战技巧】响应式图片
        https://blog.csdn.net/weixin_41192489/article/details/126038175
        
        【实战技巧】图片懒加载（手写）
        https://blog.csdn.net/weixin_41192489/article/details/126263221
        
        audio 音频
        
        display :inline 内联元素
        
        
        您的浏览器不支持 audio 标签。
        
        src【必要】：音频的地址
        controls 展示音乐播放器
        autoplay 自动播放
        loop 循环播放
        preload 预加载（设置 autoplay 时，此属性将失效）
        下方为使用 vue3 实现的简易音乐播放器，相关属性和方法详见注释
        
        let bgMusic_ref = ref(null) function printInfo() { let musicInfo = { //currentTime 当前播放进度（单位秒s） currentTime: bgMusic_ref.value.currentTime, //duration 音频总时长（单位秒s） duration: bgMusic_ref.value.duration } console.log(musicInfo) } function play() { // 播放音频 bgMusic_ref.value.play() } function pause() { // 暂停播放音频 bgMusic_ref.value.pause() } // 重新播放音频（从头开始播放） function rePlay() { // 先将当前播放进度重置为 0 bgMusic_ref.value.currentTime = 0 // 再播放音频 bgMusic_ref.value.play() } 您的浏览器不支持 audio 标签。播放暂停重新播放打印音频信息
        
        【实用技巧】下载音乐到本地电脑
        https://blog.csdn.net/weixin_41192489/article/details/122680809
        video 视频
        
        display :inline 内联元素
        
        仅支持MP4、WebM、Ogg三种格式，不支持其他格式，如flv、mkv等
        
        
        
        src【必要】：视频的地址
        
        controls 展示视频播放器
        
        autoplay 自动播放
        
        loop 循环播放
        
        preload 预加载（设置 autoplay 时，此属性将失效）
        
        【实用技巧】下载视频到本地电脑-CSDN博客
        https://blog.csdn.net/weixin_41192489/article/details/140223996
        
        iframe 内嵌框架
        
        display :inline 内联元素
        
        在页面内嵌入网页
        
        src【必要】：其他网页的地址
        
        表单相关标签
        
        button 按钮
        
        display :inline-block 内联元素
        
        点击我！
        
        HTML 渲染特殊字符
        
        字符描述代码
        空格 non-breaking spacing
        大于号greater than >
        © 版权 ©
        & 和号 &
        更多特殊字符，参考《html特殊字符的html，js，css写法汇总》
        https://www.cnblogs.com/starof/p/4718550.html
        
        HTML 常用标签实战范例
        
        页面布局
        
        vue3【实战】语义化首页布局-CSDN博客
        https://blog.csdn.net/weixin_41192489/article/details/140215515
        
        CSS 【实战】 “四合院”布局-CSDN博客
        https://blog.csdn.net/weixin_41192489/article/details/139243680