HTML学习笔记：HTML基础

HTML基础

1.实体

实体：

在HTML中，不能直接书写一些特殊符号，比如多个连续的空格（多个空格会被浏览器解析为一个空格），比如字母两侧的大于号和小于号。如果我们需要在网页中书写这些特殊的符号，则需要使用HTML中的实体（转义字符）。

实体的语法：

&实体的名字;
例：

  空格
> 大于号
< 小于号
© 版权符号

2.meta标签

meta标签：

meta主要设置网页中的一些元数据，元数据并不是给用户看，而是给浏览器，搜索引擎等看的
charset 指定网页的字符集
name 指定数据的名称
content 指定数据的内容
description 用于指定网站的描述（同样用content来指定内容）
title 标签的内容会作为搜索结果上的超链接文字显示
http-equiv=“refresh” 将页面重定向到另一个网站，content中描述跳转秒数和跳转网站，用分号隔开
例：

<!—keywords表示网站的关键字，content表示关键字的内容，可以同时指定多个关键字，关键字之间用逗号隔开—>

3.语义化标签

语义化标签：

在网页中HTML专门用来负责网页的结构，所以在使用HMTL标签时，应该关注的是标签的语义，而不是它的样式。

标题标签：

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

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

p标签：

p标签标示页面中的一个段落，在页面中独占一行的元素称为块元素(block element)，标题标签和p标签都是块元素。

<p>这是第一个段落</p>
<p>这是第二个段落</p>

hgroup标签：

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

<hgroup>
	<h1>回乡偶书二首</h1>
	<h2>其一</h2>
</hgroup>

em标签：

em标签用于语音语调的加重（斜体）
在页面中不会独占一行的元素叫做行内元素（inline element）

strong标签：

strong标签表示强调，重要内容（加粗）

blockquote标签：

blockquote标签表示一个长引用（缩进）（块元素）

q标签：

q标签表示一个短引用（加引号）（行内元素）

br标签：

br标签表示换行

4.块元素和行内元素

块元素：（block element）

在网页中一般使用块元素对页面进行宏观布局

行内元素：（inline element）

主要用来包裹文字，对文字进行一些特殊效果的设置

一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素，块元素中什么都可以放，但p元素中不能放任何的块元素。虽然浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正。
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了出head，body以外的子元素

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

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

6.列表

列表：（list）

在HTML中可以创建列表，列表之间可以互相嵌套，HTML列表一共分为三种：

1.无序列表

使用ul标签来创建无序列表，li标签表示列表项

<ul>
	<li>结构</li>
	<li>行为</li>
	<li>表现</li>
</ul>

2.有序列表

使用ol标签来创建有序列表，li标签来表示列表项

<ol>
	<li>结构</li>
	<li>行为</li>
	<li>表现</li>
</ol>

3.定义列表

使用dl标签来创建定义列表，使用dt标签来表示定义的内容，d标签来对内容进行解释说明

<dl>
	<dt>结构</dt>
	<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
	<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
	<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>

7.超链接

超链接可以让我们从一个页面跳转到另一个页面，或者是当前页面的其他位置，使用a标签来定义超链接，超链接是一个行内元素，但在a标签中可以嵌套除它自身之外的任何元素

属性：

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

<a href=“www.baidu.com”>超链接</a>

target 用来指定超链接打开的位置，可选值： _self 默认值，在当前页面中打开超链接。 _blank 在一个新的页面中打开超链接。

<a href=“www.baidu.com” target=“_blank”>超链接</a>

当我们需要跳转到一个服务器内部的页面时，一般我们会使用相对路径，相对路径都会使用.或者…开头： ./ ， …/ 。 ./ 可以忽略不写，如果不写 ./ 也不写 …/ 就相当于写了./ 。 ./表示当前文件所在的目录， …/ 表示当前文件所在目录的上一级目录。
可以直接将超链接的href属性设置为#，这样点击超链接之后页面不会发生跳转，而是直接回到当前页面的顶部的位置。

<a href=“#”>回到顶部</a>

id 唯一不重复的属性，每一个标签都可以添加一个id属性，是元素的唯一标识，同一个页面中不能出现重复的id属性，当我们需要通过超链接跳转到页面中的任意一个位置时，可以利用id属性给标签附加唯一的属性，将href属性设置为#目标元素的id属性值。

<p id=“p3”>第三自然段</p>
<a href=“#p3”>跳转到第三自然段</a>

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

8.图片标签

图片标签用于向当前页面引入一个外部图片，使用img标签来引入外部图片，img是一个自结束标签。img元素属于替换元素，介于块元素和行内元素之间，具有两种元素的特点。

属性：

src 指定的是外部图片的路径，或者是图片的相对路径，路径规则和超链接是一样的。

<img src=“./img/1.gif”>

alt 表示图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性，图片不会被搜索引擎所收录。

<img src=“./img/1.gif” alt=“松鼠”>

width 指定图片的宽度（单位是像素）。
height 指定图片的高度（单位是像素）宽度和高度如果只修改了一个，则另一个会等比例缩放。如果同时修改，图片会被修改，拉伸。
注意：在一般情况下不建议修改图片的大小。

图片的格式：

jpeg(jpg)：支持的颜色比较丰富，不支持透明效果，不支持动图。一般用来显示照片。
gif：支持的颜色比较少，支持简单透明，支持动图。一般表示颜色单一的图片或者动图。
png：支持的颜色丰富，支持复杂透明，不支持动图。表示颜色丰富，复杂透明的图片（为网页而生）。

9.内联框架

iframe标签用于向当前页面引入一个其他页面（嵌套另一个网页），是一个自结束标签。

属性：

src 指定要引入的网页的路径。
width 指定网页的宽度。
height 指定网页的高度。
frameborder 指定内联框架的边框。

10.音视频

audio标签用于向页面引入一个外部的音频文件，video标签用于向页面引入一个外部的视频文件。音视频文件引入时，默认情况下不允许用户自己控制播放停止。

属性：

src 指定要引入的音频的路径。
controls 是否允许用户播放控制。
autoplay 音频文件是否自动播放，如果设置了autoplay，打开了页面就会自动播放，但目前大部分浏览器不会对音乐自动播放。
loop 音频文件是否循环播放。

<audio src=“./source/audio.mp3” controls></audio>

除了通过src来指定外部文件的路径，还可以通过source来指定文件路径。

<audio controls>
	<source src=“./source/audio.mp3”>
	<source src=“./source/audio2.ogg”>
</audio>