Html结构及常用标签

Html结构

<!--文档声明-->
<!DOCTYPE html>
<!--根标签-->
<html lang='en'>
<!--head标签 保存一些元信息，这里标签，信息，不会在浏览器中显示出来，帮助浏览器解析页面的-->
<head>
<!-- meta标签，也是用来保存设置网页的元数据，不会变的数据，这些数据也是给浏览器看的-->
<!-- 设置网页的字符集 --><meta charset='UTF-8'>
<!--keywords/description 关键词/描述链接--><meta name='' content=''>
<!--网站链接--><meta http-equiv='' content=''>
<!--title标签，网页标题--><title>Document</title>
</head>
<!--body标签，设置网站主体内容，网页可见内容都在这里设置--><body></body>
</html>

Html常用标签

常用实体

空格 &nbsb;

> >

< <

常用标签

标题标签

....

段落标签

用于表示内容的一个自然段，p标签里内容默认情况会独占一行，段与段之间有一个间距，它是块元素

    <p>锄禾日当午</p><p>汗滴禾下土</p>谁知盘中餐粒粒皆辛苦

标题分组标签

可以将一组相关标题放在一块

    <hgroup><h1>古诗一首</h1><h3>其一</h3></hgroup>

em标签，斜体强调标签，强烈的强调，用于表示语音强调的一个加重

    今天 <em>是</em> 周一

strong标签，强调标签，对内容的强调

   今天是<strong>周二</strong>

blockquote 长引用标签，引用某人说的话，会换行

   <blockquote>学而时习之</blockquote>

q 短引用，样式上，会加双引号

   孔子曰<q>温故而知新</q>

br 换行标签是一个自结束标签

hr 可以在页面中生成一条水平线是一个自结束标签

del标签，表示一个删除的内容，会自动添加删除线

   <del>1000000</del>

center 居中标签

   <center>我在中间哈哈哈</center>

结构标签

布局标签

header 网页的头部

main 网页主体内容

footer 网页的底部

nav 网页的导航部分

aside 和主体相关的内容，侧边栏

article 文章，宣传段落之类

section 独立的区块，如果上面的标签都不合适，就可用

div 没有语义就是表示一个区块

span 行内元素，用于在网页中包裹文字

列表标签

列表（list）一组一组

1:有序列表用ol标签创建，li表示列表项

使用有序的序号作为项目的符号

type 属性可以更改序号

默认值：阿拉伯数字，1 2 3

A a I····

2:无序列表用ul标签创建，li表示列表项

type属性

disc 实心圆默认值

circle 空心圆

square 实心方块

3:定义列表用dl标签创建，dt被定义的内容，dd表示具体内容

ol ul dl三个列表之间，可以嵌套使用

超链接

功能：

1:从一个页面跳到另一个页面

2:在当前页面进行跳转

特点：是一个行内元素，但我们可以在超链接中除自身外放任何元素

属性：href

指向的是链接跳转的目标地址

-属性值可以是一个外部的网站的地址绝对路径

-属性值还可以是内部的地址相对路径

target

用来指定打开链接的位置

可选值：

_self ,表示在当前窗口中打开（默认值）一般情况下在国外网站用的更多

_blank 在一个新的页面中打开链接一般国内更多

相对路径跳转规则

使用./ 或者 ../ 来进行相对路径的选择

./ 当前文件所在的目录，浏览器默认的，可以省略

../ 跳出当前文件

    <a href="https://www.jd.com/" target="_blank">超链接1</a><a href="04.列表标签.html">超链接2</a><a href="../work0325/06.实体.html">超链接3</a>

超链接也可以跳转到同一页面制定位置

id属性值

可以自定义，随便你取名字

注意：

1:不可以以数字开头

2:尽量不用中文

 <!-- 需求2:可以回底部 --><a href="#dibu">去底部</a><!-- 需求3:可以去中间 --><a href="#center">去中间</a><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p id="center">我是中间部分</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><p>起韩判雷非最特到畴而春尽，承这大只丐忧他位清徨耐招，国给到洪促叹了承兴面要的的，春己为一爱韩只舟书将李君等，日台两洪起褒，承得妄慷么死刑一衣，惊一联反太读京秦也的九用赠大，韩他何恩商老罪卞无衣不亓竟作不劝皇厅不，生冈衣，皇人为来太流太一，舟洪心前来秦己为。</p><!-- 需求1:回到顶部 --><a href="#">回到顶部</a><p id="dibu">我是底部</p>

img标签

作用：向页面引入一个外部的图片，自结束标签，img标签兼具块元素与行内元素的两种特点

属性：

src:设置外部图片的路径，路径规则跟超链接是一样

alt：可以用来设置图片不能加载的时候，对图片描述

搜索引擎是通过对alt属性进行检索，然后反馈出来的

如果不写话，浏览器就不会进行收录

width：设置图片的宽度，一般用px作为单位

height：设置图片的高度，一般用px作为单位

注意：

实际开发过程，我们宽度，高度，一般只设置一个，另外一个浏览器会等比例缩放

<img src="./img/img/lmt.webp" alt="img" width="400px" />

图片的格式

使用的场所不一样，图片的格式也不一样

JPEG（JPG）

-支持的颜色比较多，图片可以进行压缩，但不支持透明

-一般用来保存照片等颜色丰富的图片

GIF

-支持的颜色比较少，支持简单透明，支持动图

-图片颜色单一或者动图可以用gif格式

PNG

-支持的颜色比较多，支持复杂透明效果，不支持动图

-可以用来显示颜色复杂，透明的图片

-可以将专为我们的网页而生的

webp

-谷歌新推出的格式，兼具各种图片的优势，而且文件比较小

-缺点：兼容性不好

base64

-将图片转成文字编码格式，字符，通过字符引入到我们的网站

-如果需要和网页一起加载的时候用

音视频

用来向页面引入一个外部音频文件 h5新增的标签，IE9以下的浏览器是不能识别

音视频文件引入时，我们浏览器默认是不允许用户自己控制播放暂停

属性：

controls 可以控制音频是否播放

autoplay 可以控制是否自动播放，目前大部分浏览是不可以自动播放

除了IE8以下

loop 是否循环播放

    <!-- 第一种写法 --><audio src="./source/达拉崩吧.mp3" controls autoplay loop></audio><!-- 第二种写法 --><audio>对不起，你的浏览器无法识别播放音频<source src="./source/达拉崩吧.mp3" /></audio><!-- 视频  使用方式跟音频是一样 --><!-- 第一种写法 --><video src="./source/绝地逢生.mp4" controls loop></video><!-- 第二种写法 --><video controls><source src="./source/绝地逢生.mp4"></video><!-- 外部资源  了解即可--><iframe src="https://haokan.baidu.com/v?vid=16284230423245589389&pd=pcshare" frameborder="0" width="600px" height="400px"></iframe>