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>