自用HTML笔记

注意事项：!+Tab 在vscode中可直接输出框架

注释和自结束标签：

自结束标签：
标签一般成对出现，但存在一些自结束标签，自结束标签不需要结束标签

注释：
使用<!-- -->将注释内容括起来即可，注释不能嵌套

标签的属性：

在标签中可以给标签和自结束标签设置属性
属性是一个名值对结构,用来设置标签中的内容如何显示

example:

<h1>这是一个<font color="red">有趣</font>的网站</h1>

实体的语法：

& + 实体的名字 + ；

example:

	&nbsp; 	<!--空格-->
	&gt;	<!--大于号-->
	&lt;	<!--小于号-->  
	&copy;	<!--版权符号-->

meta标签

meta标签主要用于设置网页中的一些元数据

charst     指定网页的字符集
name      指定数据名称
content   指定数据内容

example:

<meta name="keyweords" content="HTML,前端，css3">
<meta name="description" content="这是一个网站">
<!--将页面重新定向另一个网站：-->
	<meta http-equiv="refresh" content="3;url=https:www.baidu.com">

一些常用标签：

h1~h6			一~六级标题
p				页面中的一个段落
hgroup			标题分组
em				斜体
strong			强调
blockquote		块引用（换行并空两格）
q				短引用（不会换行）
br				换行不分块
header			头部
main			主体（一个网页只能有一个）
footer			底部
nav				导航
aside			和主体相关的其他内容
article			独立的文章
section			独立的区块，header~article都可以用section表示
div				无语义，用来表示一个区块
span			行内元素，无语义，用于在网页中选中文字

列表：

列表之间可以互相嵌套

无序列表：

<ul>
	<li>
	</li>
</ul>

有序列表：

<ol>
	<li>
	</li>
</ol>

定义列表：

<dl>
	<dt></dt>	<!--用来定义的内容-->
	<dd></dd>	<!--对内容进行解释说明-->

超链接：

超链接用a标签，可以嵌套除它自身的任何元素

属性：
    href    指定跳转的目标路径
              值可以是外部页面的一个地址，也可以是内部页面的一个地址
              若设置为#，会转到当前页面的顶部
              可以跳转到页面的指定位置，只需将herf值设定为#元素id属性值
   target  用来指定超链接打开的位置
              可选值：
                   _self  默认值，在当前页面中打开链接
                   _blank  在一个新的页面中打开链接
    id        每个标签都能添加一个id属性，id是元素的唯一标识不可重复

相对路径：
    当我们需要跳转服务器内另一个页面时，我们一般会使用相对路径
    相对路径通常使用./或../开头
          ./可以省略不写，若./和../都不写则默认写了./
          ./表示当前文件所在的目录
          ../表示当前文件所在目录的上级目录

example:

<a href="https://www.baidu.com">超链接</a>
<a href="07列表.html">超链接</a>		<!--要在同一个文件夹-->
<a href="../inner/target2.html">超链接</a>
<a href="#bottom">去底部</a>

图片标签：

用于向当前页面中引入一个外部图片，使用img标签引入，它是一个自结束标签

属性：
    src        指定外部图片的路径，路径规则和超链接相同
    alt         图片描述,有些浏览器会在图片无法加载时显示
                 搜索引擎会根据alt中的内容来识别图片
    width     图片宽度
    height    图片高度,宽度和高度若只修改一个图片会等比例缩放

example：

<img src="./img/1.gif" alt="松鼠" width="200">

内联框架：

用于向当前页面中引入一个其他页面，使用iframe标签

属性：
    src                    指定要引入的网页的路径
    frameborder     指定内联框架的边框
    height,width     与图片相同

example:

<iframe src="http://www.qq.com" width="800" height="200" frameborder="0">

音视频播放：

audio用来向页面中引入一个外部音频文件
video用来向页面中引入一个外部视频文件

属性：
    controls     允许用户控制，不需要给值
    autoplay    音频文件是否自动播放，不需要给值（大部分浏览器不自动播放）
    loop           循环播放，不需要给值

example:

<audio src="./source/3.mp3" controls></audio>

<audio>
抱歉，您的浏览器暂不支持此功能！
<source src="./source/3.mp3">
<source src="./source/3.ogg">
<embed src="./source/3.ogg" type="audio/mp3">
</audio>