【前端笔记】简单HTML学习笔记

棋小仙

已于 2022-03-19 14:30:06 修改

阅读量290

点赞数

分类专栏： Web前端文章标签：前端 html

于 2022-01-08 14:45:06 首次发布

本文链接：https://blog.csdn.net/qq_43741689/article/details/122380289

版权

Web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML学习简记

目录链接

HTML学习简记

1.HTML文档声明

网页文档声明，主要用来告诉浏览器当前的网页版本

  <!--html5文档声明如下-->
  <!doctype html>
  <!Doctype Html>

2.网页的基本结构

HTML4:

  <html>
    <head>
      <title></title>
    </head>
    <body>
    </body>
  </html>

HTML5

  <!doctype html>
  <html>
    <head>
      <title></title>
    </head>
    <body>
    </body>
  </html>

3.字符编码

编码:将字符集转换为二进制的过程
解码:将二进制转换为字符集的过程
乱码问题:如果编码和解码所用的字符集不同，就会出现乱码
常见字符集:

ASCII 美国英国
ISO88591 欧洲
GB2312 中国
GBK 中国
UTF-8 支持任何语言(Unicode编码)

可以通过meta标签来设置网页的字符集，避免乱码问题

  <!doctype html>
  <html>
    <head>
      <meta charset = "utf-8">
      <title></title>
    </head>
    <body>

    </body>
  </html>

4.html基础

实体(语法:`&实体名字`)

网页中的转义字符，用于在网页中书写一些特殊符号

`meta`标签:元数据标签

用于设置网页的元数据，常用以下属性
charset:用于指定网页的字符集
name:指定数据的名称
content:指定数据的内容

`h1` ~ `h6`标签:标题标签(块元素)

表示一到六级标题标签
通常一个页面只有一个h1，h2 ~ h3常用，h4 ~ h6很少使用
-hgroup标签用来给标题分组，可以将一组相关的标题放入hgroup标签中

`p`标签:段落标签(块元素)

表示页面中的一个段落

块元素和行内元素的区别

block element:块元素，在页面中独占一行，通常用来布局
inline element:行内元素，在页面中不会独占一行，通常用来放文字
浏览器自动纠正:
浏览器在解析页面结构时，会自动对不符合规范的内容进行纠正
例如:

1.标签写在了根标签(即html标签)的外面
2.p标签内嵌套了块元素
3.根元素中出现了head和body之外的元素
...

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

不常用:

1.header表示网页头部
2.main表示网页主体
3.footer表示网页底部
4.nav表示网页导航
5.aside和主体相关的其他内容(侧边栏)
6.article表示一个独立的文章
7.section表示一个独立的区块，前面的标签都不能表示时使用section

常用:

1.div没有语义，通常用来表示一个独立的区块
2.span行内元素，通常用来选中文字

列表

有序列表:ol标签，使用li标签作为列表项
无序列表:ul标签，使用li标签作为列表项
定义列表:dl标签，使用dt来表示定义的内容，使用dd来对内容解释说明

相对路径

相对于当前文件所在的路径
./表示当前文件所在目录，./可以忽略不写
…/表示上一级目录

它具备其他图片格式的所有优点，而且文件还特别小
缺点：兼容性不好
效果一样，用小的
效果不一样，用效果好的

(5)base64

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

8.注意:
一般在pc端不建议修改图片大小，但是在移动端通常需要把大图缩小

`iframe`标签内联框架(不常用)

用于向当前页面中引入一个其他页面
1.src属性，标识网页的路径
2.width属性
3.height属性
4.framebroder 指定内联框架的边框大小

`audio`标签音频标签

用来向页面中引入一个外部的音频文件
音视频文件引入时，默认情况下不允许用户自己控制播放停止
1.controls属性，是否允许用户控制播放(写了之后就允许用户自己控制播放)
2.src属性，引入的音频路径
3.autoplay属性，是否允许自动播放
（写了之后就会在打开页面时自动播放，但是大部分浏览器都不会自动播放音乐，需要先播放过然后刷新才会自动播放）
4.loop属性，音乐是否循环播放
除了通过src来指定外部文件的路径以外，还可以通过source来指定文件路径
(这种写法比较友好，可以兼容多种浏览器，在低级的浏览器里会有提示)
(可以写多个source，来兼容不同的格式的音频文件，上面的不能播放会播放下面的)

<audio controls>
	对不起，您的浏览器不支持播放音频！请升级浏览器
	<source src = "./source/audio.mp3">
	<source src = "./source/audio.ogg">
</audio>

`embed`标签(不常用) 音频标签

支持ie8 会自动播放，必须要指定width和height属性，需要指定格式
兼容ie8和Chromium,可以用下面写法

<audio controls>
	<!-- 对不起，您的浏览器不支持播放音频！请升级浏览器 -->
	<source src = "./source/audio.mp3">
	<source src = "./source/audio.ogg">
	<embed src = "./source/audio.mp3" type = "audio/mp3" width="300" height="100">
</audio>

`video`标签视频标签

<video controls>
	<source src = "./source/video.webm">
	<source src = "./source/video.mp4">
	<embed src = "./source/video.mp4" type = "audio/mp4" width="300">
</video>

也可以通过iframe来引入外部视频