HTML基础

实体(转义字符)的语法：

 空格

>大于号

<小于号

©版权符号

Meta主要用于设置网页中的一些元数据，不是给用户看的。

charset指定网页的字符集

<meta charset="UTF-8">

name指定网页的名称

content指定网页的内容

Keywords网站的关键字，可以同时指定多个关键字(关键字之间使用用逗号隔开)

<meta name="keywords" content=" HTML,css, JavaScript"></meta>

description用于网站的描述(网站的描述会显示在搜索引擎的搜索结果中)

<meta name="description" content="这是一个不错的网站"></meta>

title标签的内容会作为搜索结果超链接上的文字显示

<title>下载</title>

超链接，3代表延迟几秒

<meta http–equiv=" refresh" content="3;http:// www.baidu.com"></meta>

HTML是专门负责网页的结构

所以使用HTML标签时应关注标签的语义，而不是它的样式

标题标签:h1~h6(一共六级标题)

从h1~h6重要性递减，h1最重要，h6最不重要;h1的重要性仅次于标题title标签，一般情况下一个页面只有一个h1元素

<h1>一级标题</h1>

<h2>二级标题</h2>

<h3>三级标题</h3>

(常用标题)(Ctrl+回车:光标换行)

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

<hgroup>

<h1>我爱你</h1>

<h2>你爱我</h2>

</hgroup>

p标签表示页面中的一个段落，也是一个块元素

<p>独占一行，表示段落<p>

em(行内标签)标签表示语音语调的加重

<p>今天天气<em>真<em>好</p >

strong表示强调，重要内容

<p>今天你必须<strong>完成作业<strong>!</p >

blockquote表示长引用

鲁迅说:<blockquote>这句话我没说过</blockquote>

q表示短引用

子曰:<q>学而时习之，不亦说乎</q>

br表示换行

<br*2>换两行</br>

块元素:在页面中独占一行的元素

行内元素:在页面中不会独占一行

标题标签是块元素

块元素(block element):

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

行内元素(inline element):

行内元素用来包裹文字

一般情况下，会在块元素中放行内元素，不会在行内元素放块元素。块元素中一般什么都能放。

p元素中不能放任何块元素

浏览器解析网页时，会自动对网页中不符合规范的内容自动修改

比如:标签写在根元素外面，p元素中嵌套了块元素;根元素中出现了除head和body以外的子元素

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

hearder:网页的头部

main:网页的主体部分(一个网页中只有一个main)

footer:网页的底部

nav:网页中的导航

aside:和主体相关的其他内容(侧边栏)

article:一个独立的文章

section:一个独立的区块，上边的标签都不能表示时使用section

div:没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素span:行内元素，没有任何的语义，一般用于网页中选中文字

列表的分类

1有序列表2无序列表3定义列表

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

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

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

列表之间可以相互嵌套

<ul>

<li>结构</li>

<li>表现</li>

<li>行为</li>

</ul>

<ol>

<li>结构</li>

<li>表现</li>

</ol>

<dl>

<dt>结构</dt>

     <dd>对结构解释说明</dd>

</dl>

超链接(行内元素):可以使我们从一个页面跳转到其他页面，或者是当前页面的其他位置

使用a标签来定义超链接，在a标签中可以嵌套除它自身外的任何元素

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

<a href=" ">超链接</a>

<a href="07.列表.html">超链接2</a>

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

可选值:

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

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

<a href="07.列表.html" target="_black">超链接</a>

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

<a href="#">回到顶部</a>

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

id属性(唯一不重复):

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

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

<a href="#p3">去p3</a>

<p id="p3">p3</p>

<a href="#botton">去底部</a>

<p id="bottom">回到底部</p>

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

<a href="#">这是一个新的超链接</a>

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

<a href="JavaScript:;">空链接</a>

当我们需要跳转到一个服务器页面时，一般我们都会使用相对路径，相对路径都会使用.或..开头(./或../)

./可以省略不写，如果不写就代表写了./

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

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

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

属性:src :属性指定的是外部图片的路径(路径规则和超链接一样)

alt :图片的描述，这个描述默认情况下不会显示，有些浏览器图片无法加载是会显示;搜索引擎会根据alt的内容来识别图片，如果不写alt属性则图片不会被搜索引擎找到

width:图片的宽度(单位是像素)

height:图片的高度

宽度和高度任意一个修改，另一个也会等比例修改

注意:一般情况在PC端，不建议修改图片大小，需要多大就裁剪多大;但是在移动端经常对图片进行缩放

图片的格式:

jpeg(JPG):支持的颜色丰富，不支持透明效果，不支持动图，一般用来显示照片

gif:支持的颜色较少，支持简单透明，支持动图，用来支持颜色单一的图片、动图

png:支持的颜色丰富，支持复杂透明，不支持动图，用来表示颜色丰富、复杂透明的图片(专为网页而生)

webp:这种格式是谷歌新推出的专门用来表示网页中的图片一种格式

优点，具备其他图片格式所有优点，而且文件特小;缺点，兼容性不好

用图方式:效果一样，用小的;效果不一样，用好的

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

内联框架:用于向当前页面中引入一个其他页面;src 指定要引入的网页路径;frameborder 指定内联框架的边框

<iframe src="https:// www.baidu.com" width="500" height="600" frame=0>

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

属性:

controls是否允许用户控制播放

autoplay 音频文件是否自动播放

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

loop 音乐是否循环播放

<audio src="./source/audio.mp3" controls antoplay loop></audio>

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

<audio controls>

1对不起，您的浏览器不支持，请升级

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

2<embed src="./source/audio.mp3" type="audio/mp3" width="300">

</audio>

使用video标签来向网页中引入一个视频，使用方法和audio基本是一样的

<video controls>

<source src="./source/flower.webm"></video>