HTML自学笔记二 | 青训营笔记

succyag
161 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的的第2天  # 笔记创作活动

接上一篇HTML自学笔记一 | 青训营笔记

标题标签

标题标签.png

  • h1 ~ h6 一共六级标签
  • 从h1 ~ h6 重要性递减，h1 最重要，h6 最不重要
  • h1 在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个 h1
  • 一般情况下标题标签只会使用 h1 ~ h3，h4 ~ h6 很少用
  • 标题标签都是块元素

在页面中独占一行的元素称为块元素（block element）

p标签表示页面中的一个段落

p 也是一个块元素

hgroup标签用来为标题分组，可以将一组相关的标题同时放入到 hgroup

em标签用于表示语音语调的一个加重

在页面中不会独占一行的元素称为行内元素（inline element）

strong标签表示强调，重要的内容！

blockquote标签表示一个长引用

q标签表示一个短引用

br标签表示页面中的换行

块元素（block element）

  • 在网页中一般通过块元素对页面进行布局

行内元素（inline element）

  • 行内元素主要用来包裹文字
  • 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
  • 块元素中基本什么都能放
  • p 元素中不能放任何的块元素

浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，比如：

  1. 标签写在了根元素的外部
  2. p 元素中嵌套了块元素
  3. 根元素中出现了除 head 和 body 以外的子元素

布局标签（结构化语义标签）

布局标签.png

    header标签，表示网页的头部  
    main标签，表示网页的主体部分（一个页面只会用一个）  
    footer标签，表示网页的底部  
    nav标签，表示网页中的导航  
    aside标签，和主题相关的其他内容（侧边栏）  
    article标签，表示一个独立的文章  
    section标签，表示一个独立的区块，上边的标签都不能表示时使用section  
    div标签，没有语义，用来表示一个区块，目前来讲div还是我们主要的布局元素  
    span标签，是一个行内元素，没有任何的语义，一般用于在网页中选中元素

列表（list）

列表标签.png

HTML列表一共有三种：

  1. 有序列表
  2. 无序列表
  3. 定义列表
  • 有序列表，使用 ol 标签来创建有序列表，使用 li 表示列表项
  • 无序列表，使用 ul 标签来创建无序列表，使用 li 表示列表项
  • 定义列表，使用 dl 标签来创建一个定义列表，使用 dt 来表示定义的内容，使用 dd 来对内容进行解释说明

列表之间可以互相嵌套

超链接可以让我们从一个界面跳转到其他页面，或者是当前页面的其他位置

使用 a 标签来定义超链接

属性：href 指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址

alt + shift + 方向键进行复制

超链接也是一个行内元素，在超链接中可以嵌套它自身外的任何的元素

当需要跳转一个服务器内部的页面时，一般都会使用相对路径

相对路径一般都会使用 . 或 .. 开头

./ 可以省略不写，如果不写 ./ 也不写 ../ 则相当于写了 ./

./ 表示当前文件所在的目录

../ 表示当前文件所在目录的上一级目录

target 属性，用来指定超链接打开的位置

可选值：

_self 默认值，在当前页面中打开超链接

_blank 在一个新的页面中打开超链接

可以直接将超链接的 href 属性设置为 # ，这样点击超链接以后页面不会发生跳转，而是转到页面的顶部位置

id 属性(唯一不重复的)

每一个标签都可以添加一个 id 属性

id 属性就是元素的唯一标识，同一个页面中不能出现重复的 id 属性

可以跳转到页面的指定位置，只需将 herf 属性设置 # 目标元素的 id 属性

在开发中可以将 # 作为超链接的路径的占位符使用

可以使用 javascript:; 作为 herf 的属性，此时点击这个超链接什么也不会发生

图片标签用于向当前页面中引入一个外部图片

使用 img 标签来引入外部图片，img 标签是一个自结束标签

img 这种元素属于替换元素（块元素和行元素之间，具有两种元素的特点）

属性：

  • src 属性指定的是外部图片的路径（路径规则和超链接是一样的）

  • alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示

    搜索引擎会根据 alt 中的内容来识别图片，如果不写alt属性则图片不会被浏览器引擎搜索

  • width 图片的宽度（单位是像素）

  • height 图片的高度

    宽度和高度中如果之修改了一个，则另一个会等比例缩放

    注意：一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大，但是在移动端，经常需要对图片进行缩放（大图缩小）

图片的格式：

图片的格式.png

  • jpeg(jpg)

    • 支持的颜色比较丰富，不支持透明效果，不支持动图‘
    • 一般用来显示照片

  • gif

    • 支持的颜色比较少，支持透明效果，支持动图
    • 颜色单一的图片，动图

  • png

    • 支持的颜色丰富，支持复杂透明，不支持动图
    • 颜色丰富，复杂透明图片（专为网页而生）

  • webp

    • 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
    • 它具备其他图片格式的所有优点，而且文件还特别小
    • 缺点：兼容性不好

  • base64

    • 将图片使用base64进行编码，这样可以将图片转换为文字，通过字符的形式来引入图片
    • 一般都是一些需要和网页一起加载的图片才会使用base64

    效果一样，用小的

    效果不一样，用效果好的

内联框架，用于向当前页面中引入其他页面

src 指定要引用的网页的路径

frameborder 指定内联框架的边框

iframe

音视频播放

audio 标签用来向页面中引入一个外部的音频文件

音频文件引入时，默认情况下不允许用户自己控制播放停止

属性：

controls 是否允许用户控制播放器

autoplay 音频文件是否自动播放

如果设置了 autoplay 则音乐在打开页面时自动播放，但是大部分浏览器不会自动对音乐进行播放

loop 音乐是否循环播放

embed

使用 vedio 标签来向网页中引入一个视频

使用方式和 audio 基本是一样的

avatar
文章
阅读
粉丝