web前端HTML5学习笔记
Posted Jose的写字台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端HTML5学习笔记相关的知识，希望对你有一定的参考价值。
自结束标签
<img><img /><input><input />
注释
<!---->
标签属性
在开始标签或是自结束标签中设置属性，属性是一个键值对（key=x）
属性之间以及和标签名之间用空格隔开，属性值用引号标注
文档声明
html5的声明，放在代码段最前面
字符编码
通过head中的meta标签来设置网页的字符集，避免出现乱码。
<meta charset="utf-8">实体
在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。具体的实体名称可以在手册中查询。
meta标签
meta用于设置网页中的元数据
其中charset用于指定网页的字符集
name指定数据名称
content指定数据的内容
keywords表示网页的关键字
（下面为b站网页的例子）
<meta name="keywords" content="Bilibili,哔哩哔哩,哔哩哔哩动画,哔哩哔哩弹幕网,弹幕视频,B站,弹幕,字幕,AMV,MAD,MTV,ANIME,动漫,动漫音乐,游戏,游戏解说,二次元,游戏视频,ACG,galgame,动画,番组,新番,初音,洛天依,vocaloid,日本动漫,国产动漫,手机游戏,网络游戏,电子竞技,ACG燃曲,ACG神曲,追新番,新番动漫,新番吐槽,巡音,镜音双子,千本樱,初音MIKU,舞蹈MMD,MIKUMIKUDANCE,洛天依原创曲,洛天依翻唱曲,洛天依投食歌,洛天依MMD,vocaloid家族,OST,BGM,动漫歌曲,日本动漫音乐,宫崎骏动漫音乐,动漫音乐推荐,燃系mad,治愈系mad,MAD MOVIE,MAD高燃">description表示网页的描述
<meta name="description" content="bilibili是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐。"> 对网页的重定向
<meta http-equiv="refresh" content="3;url=https://www.bilibili.com">语义化标签
html的标签关乎语义，与实际视觉显示效果无关
在页面中独占一行的元素称为块元素（block element）
在页面内不会独占一行的元素称为行内元素（inline element）
标题标签
共有六级。h1~h6，重要性递减。
h1在网页中的重要性仅次于title，一般一个页面中只有一个h1。
一般标题标签只会使用到h1-h3，其余很少用，不用关注。
p标签表示页面中的一个段落，所以p也是一个块元素
hgroup标签，可以用来为标签分组，可以将相互有关联的标签放入。
<hgroup><h1>回乡偶书二首</h1><h2>其一</h2></hgroup>
em标签用于表示语音语调的加重
<p>住在山里<em>针</em>不辍</p>strong标签表示强调，重要内容
<p>今天必须要<strong>完成作业</strong></p>blockquote标签表示一个长引用,是块元素
鲁迅说：<blockquote>这句话我从来没说过！</blockquote>
q标签表示一个短引用，是行内元素
子曰<q>学而时习之，不亦乐乎</q>br标签表示页面中的换行
块元素与行内元素
块元素一般用于对网页进行布局，行内元素主要用于包裹文字
一般在块元素中可以放行内元素，而不会在行内元素中放置块元素
块元素中基本什么都可以放
p元素中不能放任何的块元素
此外，浏览器会自动对网页中不符合规范的内容进行修正
布局标签（结构化语义标签）
header表示网页头部
main表示网页主体部分，一个页面中只会有一个main
footer表示网页的底部
nav表示网页中的导航
aside表示和主题相关的其他内容（侧边栏）
article表示一个独立的文章
section表示一个独立的区块，当上述标签都无法表示时使用section
div没有语义，只表示一个区块，目前而言div还是主要使用的布局元素
span是行内元素，没有语义，用于在网页中选中文字
列表list
有序列表
使用ol来创建有序列表
使用li来表示列表项
<ol><li>结构</li><li>表现</li><li>行为</li></ol>
无序列表
使用ul来创建无序列表
使用li来表示列表项
<ul><li>结构</li><li>表现</li><li>行为</li></ul>
定义列表
使用dl标签来创建定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
列表之间可以嵌套
超链接
超链接可以使我们从一个页面跳转到另外一个页面，或者是当前页面的其他位置
使用a标签来定义超链接
属性：href指定跳转的目标路径
超链接也是一个行内元素，在a标签中可以嵌套任何除它自身外的元素
<a href="https://www.baidu.com">超链接</a>将href属性设置为#，点击超链接会跳转到页面顶部的位置
对于页面中指定位置的跳转，可以通过设置标签的id（字母开头的元素唯一标识），然后将href中的属性设置为#目标元素的id值即可
target属性用来指定超链接打开的位置
_self 默认值，在当前页面中打开超链接
_blank，在一个新的页面中打开超链接
相对路径
通常为.或..开头
./可以省略，表示当前文件所在的目录
../表示当前文件所在目录的上一级目录，不可被省略
图片标签
用于向页面中引入外部图片
使用imp标签来引入图片，imp是一个自结束标签，属于替换元素（块和行内元素之间，具有两者的特点）
属性
src指定的是外部图片的路径（具体规则与超链接相同）
alt是图片的描述，默认加载不显示，图片加载失败时会显示。而搜索引擎会根据alt的内容来识别图片。
width图片的宽度，height图片的高度。如果只修改了其中的一个值，则另一个值会等比例缩放。
图片的格式
jpeg（jpg）
支持的颜色比较丰富，不支持透明效果，不支持动图
一般用来显示照片
gif
支持的颜色比较少，支持透明效果，支持动图
颜色单一的图片，动图
png
支持的颜色丰富，支持透明效果，不支持动图
颜色丰富，复杂透明图片（专为网页而生）
webp
具备其他图片格式的优点，且文件较小
兼容较差
base64
将图片转换为字符，通过字符的形式来引入图片
一般用于需要同时加载网页和图片的情况
对于图片格式的选择
效果一样的话，用更小的
效果不一样的话，用效果更好的
内联框架
用于向当前页面中引入一个其他页面
src属性指定引入的网页的路径
frameborder属性指定内联框架是否需要边框
height和width调整框架的高和宽
音视频播放
音频播放
audio标签用来向页面中引入一个外部音频文件，默认情况不允许用户控制播放暂停
controls属性用于控制是否允许用户播放
autoplay属性用于控制是否自动播放音频文件（但大部分浏览器不会自动对音乐进行播放）
loop属性用于控制是否循环播放音乐
方式一：
<audio src="./source/audio.mp3" controls autoplay loop></audio>方式二：
<audio controls>对不起，您的浏览器不支持播放音频！请升级浏览器！<source src="./source/audio.mp3"><source src="./source/audio.ogg"><embed src="./source/audio.mp3" type="audio/mp3"></audio>
视频播放
使用video标签来向页面中引入一个外部视频文件，使用方式和audio基本上是一样的
<video controls>对不起，您的浏览器不支持播放音频！请升级浏览器！<source src="./source/video.mp4"><source src="./source/video.webm"><embed src="./source/video.mp4" type="video/mp4"></video>
以上是关于web前端HTML5学习笔记的主要内容，如果未能解决你的问题，请参考以下文章