HTML的基本概念
标签属性
- 属性是一个名值对（x=y)
- 属性用来设置标签中的内容如何显示
- 属性和标签或者和其他属性使用空格隔开
例如：
<h1>这是我的<font color="red" size='30'>第二个</font>页面</h1>
结果图
meta标签
<!doctype html><!-- 文档声明，声明当前网页的版本 -->
<head>
<meta charset="UTF-8"> <!-- 指定网络的字符集,编码和解码所采用的规则称为字符集 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="HTML"> <!-- keywords：表示网站的关键字，可以指定多个关键词，关键字用逗号隔开-->
<meta name="description" content="亚马逊"> <!--网站的描述会体现在搜索引擎的搜索结果中-->
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
<!--
将页面重定向到另外一个页面
content="3;url=http://www.baidu.com"
3秒跳转到百度
-->
<!-- title的内容会显示在浏览器的标题栏，搜索引擎主要会根据title中的内容来判断网页的主要内容 -->
<title>Document</title>
</head>
语义化标签
- 块标签
- 行内标签
- 布局标签
| 块标签 | 行内标签 | 布局标签 |
|---|---|---|
| h1~h6： 标题标签 | em标签： 加重语音语调 | header :表示网页的头部 |
| p ：段落标签 | strong标签：加重 | main: 网页的主体部分 |
| hgroup 标题分组 | blockquote标签：一个常引用 | footer 表示网页的底部 |
| q：表示一个短引用 | nav: 网页的导航 | |
| a:超链接 | aside :与主体相关的主要内容（侧边栏） | |
| article :表示一个独立的文章 | ||
| div ：一个区块，div是主要的布局元素 | ||
| span：用于网页选中的文字 |
列表（list）
-
有序列表
- 有序列表，使用 ol标签来创建有序列表
- li 表示列表项
<ol> <li>铅笔</li> <li>尺子</li> </ol>
- 无序列表
- 无序列表，使用 ul标签来创建无序列表
- li 表示列表项
<ul>
<li>铅笔</li>
<li>尺子</li>
</ul>
结果：
- 定义列表
- 使用dl标签来创建一个定义列表
- 使用dt来表示定义的内容
- 使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>对结构进行解释说明</dd>
</dl>
结果：
列表之间可以嵌套使用
<ul>
<li>
aa
<ol>
<li>aa-1</li>
<li>aa-2</li>
</ol>
</li>
</ul>
结果：
超链接
作用：超链接可以从一个页面跳转到其他页面或者是当前页面的其他位置
格式：<a herf="指定跳转的路径"></a>
- a 定义超链接
- href 指定跳转的路径, 值可以是一个外部网站的地址,也可以跳转内部网站列表
<a href="https://www.baidu.com">超链接</a>
图片标签
含义：图片标签用于向当前页面引入一个外部图片， 使用img标签来引入外部图片，img标签是一个自结束标签， img属于替换元素（基于块和行元素之间）
格式：<img src="地址" alt="图片描述" width='" " height=" ">
属性：
- src ：指定的是外部图片的路径
- alt： 图片的描述，有些浏览器会在图片加载不不出来的时候显示
- width ：图片的宽度（单位是 像素）
- height ：图片的高度
-宽度和高度中如果只修改了一个。则另外一个也跟着等比例改变
图片格式
- jpeg(jpg)
-支持的颜色比较丰富，不支持透明效果，不支持动图 - gif
-支持的颜色比较少，支持透明效果，支持动图 - png
-支持的颜色比较丰富，支持透明，支持动图，为网页而生 - webp
-这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别小
-缺点：兼容性不好
内部标签
<img src="./img/1.png" alt="大象" >
外部标签
<img src="http://img.sj33.cn/uploads/allimg/201304/0912521350-8.jpg" alt="钢铁侠">
相对路径
含义：指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系
表示：相对路径会使用 ./或者 …/开头，./ ：表示文件所在的目录，…/ ：表示当面文件的所在目录的上一级目录， ./可以省略不写，如果不写 ./，也不写…/ 则就相当于写了 ./
格式：<a href="../地址" target="指定超链接打开的位置">名称</a>
herf可选值:
#bottom:去底部
#标签 ：去指定标签位置
#:回到当前页面的顶部
javascript:; 什么也不会发生，为空
targer可选值：
_self默认值 ：当前页面中打开超链接，不会打开其他页面
_blank :打开一个新的页面
<a href="../introduce/07列表.html" target="_blank">超链接1</a>
内联框架
含义：内联框架 用于向当前页面中引入一个其他的页面
属性：
- src 指定引入的网页的路径
- frameborder 内联框架的边框
<iframe src="https://www.taobao.com" frameborder="0"></iframe>
结果
音视频
音频(audio)
audio：标签用来引入一个外部的音频文件，默认情况下不允许用户自己控制或停止播放
属性:
- controls :允许用户控制播放
- outoplay: 音频自动播放，打开网页就会自动播放
- loop: 音乐循环播放
(以上写上即生效）
<audio src="路径" 属性></audio>
<!-- <source src="路径.mp3"> -->
<!-- <source src="路径.ogg"> -->
视频(video)
使用video标签来向网页播放视频文件，属性和 audio标签一样,使用方法也一样
<video src="路径.mp4" 属性></video>
7130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
