HTML的格式:
- html是根标签(元素),一个页面只有一个跟标签,网页中的所有内容都应该写在html跟标签中;
- head标签,该标签中的内容不会在网页中直接显示,它用来帮助浏览器解析页面
- title网页的标题标签,默认会显示在浏览器的标题栏中;搜素引擎在检索页面时,会首先检索title标题中的内容;它是网页中对于搜索引擎来说最重要的内容,会影响到网页在搜索引擎中的排名
- body标签用来设置网页的主体内容,网页中所有可见的内容,都应该在body中编写
- 文档声明(doctype):文档声明用来告诉浏览器 当前网页的版本;html5的文档声明<!doctype html>或<!Doctype HTML>
- 通过meta标签来设置网页的元数据,元数据不是给用户看
charset指定网页的字符集(常见的字符集 :ASCII,ISO88591,GB2312,GBK,UTF-8),避免乱码问题
name 指定的数据的名称
content 指定的数据的内容
keywords 表示网站的关键字,可以同时指定多个关键字,关键字之间用,隔开
<!Doctype HTML>
<html>
<head>
<meta charset="uft-8">
<meta name="keywords" content="HTML,前端,CSS3">
<title>网页的标题</title>
</head>
<body>
</body>
</html>
HTML的注释
:注释中的内容不会在页面中显示,但是可以在源码中查看 (注释不能嵌套)
<!-- -->
HTML的自结束标签
<img>
<input>
标签的属性:属性在标签中还可以设置属性;属性是一个名值对(x=y);属性是用来设置标签中的内容如何显示,属性和标签名或其他属性应该使用空格隔开;属性不能乱写,应该根据文档的规定来填写;有些属性有属性值,有些没有,如果有属性值,属性值应该用引号引起来
<font colour=""> </font>
字符实体:
-   ; 空格
- > ; 小于号
- < ; 大于号
- © ; 版权符号
- ' ; 单引号
- & ; 和
语义化标签
在网页中HTML专门用来负责网页的结构,所以在使用HTML标签时,应该关注的是标签的语义,而不是它的样式
-
标题标签:
h1-h6一共有六级标题
从h1-h6重要性递减,h1最重要,h6最不重要
h1在网页中的重要性仅次于title标签,一般情况下一个页面只会有一个h1
一般情况下标题标签只会使用到h1-h3,h4-h6很少用 -
hgroup标签用来为标题分组,可以将一组相关的标题同时放入到hgroup
<hgroup>
<h1>回乡偶书二首</h1>
<h2>其一<h2>
</hgroup>
-
p标签表示页面中的一个段落
p也是一个块元素 -
em 标签用于表示语音语调 的一个加重
-
strong 表示强调,重要内容
-
blockquote 表示一个长引用(块元素)
-
q表示一个短引用(行内元素)
-
br 标签表示换行
-
布局标签:
1.header表示网页的头部
2.main表示网页的主部分(一个网页只会有一个main)
3.footer表示网页的底部
4.nav表示网页的导航
5.aside和主体相关的其他内容(侧边栏)
6.article表示一个独立的文章
7.section表示一个独立的区块,上边的标签都不能表示时使用section
8.div没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
9.span行内元素,没有任何语义,一般用于在网页中选中文字
块元素和行内元素
- 块元素
在网页中一般通过块元素来对页面进行布局 - 行内元素
行内元素主要用来包裹文字
-注:1. 一般情况下会在块元素中放行内元素,而不会在行内元素中放块元素
2.快元素中基本什么都能放
3.p元素中不能放任何元素
列表
在html中也可以创建列表,html列表一共有三种:1.有序列表;2.无序列表;3.定义列表
- 有序列表,使用oil标签来创建有序列表,使用li表示列表项
<oil>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</oil>
- 无序列表,使用ul标签来创建无序列表,使用li表示列表项
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
- 定义列表,使用 dl 标签来创建一个定义列表,使用 dt 来表示定义的内容 , 使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构,结构用来规定网页中哪里时标题,哪里是段落</dd>
</dl>
- 列表之间可以互相嵌套
超链接
-
使用a 标签定义超链接
href 属性:
1.href 指定跳转的目标路径
2.值可以是一个外部网站的地址
3.也可以是一个内部页面的地址
4.可以直接将href属性设置为#,这样点击超链接以后页面不会发生跳转,而是转到当前页面的顶部的位置
5.可以跳转到页面的指定位置,只需将href 属性设置#目标元素的id 属性值
<a href="https://www.baidu.com">超链接</a>
<a href="07.liebiao.html">超链接</a>
4.<a href="#">回到顶部</a>
5.<a href="#p3">第三个自然段</a>
<p id="#p3">
target属性:用来指定超链接打开的位置
可选值:
_self默认值,在当前页面中打开超链接
_blank在一个新的网页中打开超链接
<a href="07.列表.html" target="_blank">超链接</a>
id属性(唯一不重复)
每一个标签都可以添加一个id属性
id属性就是元素的唯一标识,同一个页面中不能出现重复id属性
-
相对路径,当我们需要跳转到一个服务器内部的页面时,一般我们都会使用相对路径,相对路径都会使用 . 或 . . 开头(. / 或者. ./)
- ./可以省略不写,如果./不写 也不写. ./则就相当于写了./
- ./表示当前文件所在的目录
- . ./表示当前文件所在目录的上一级目录
-
超链接是一个行内元素,在 a 标签中可以嵌套除它自身外的任何元素
-
占位符
1.在开发中可以将#作为超链接的路径的占位符使用(有功能:会跳转到页面的顶部)
<a href="#">占位符</a>
2.可以使用javascript:; 来作为href的属性,此时点击这个超链接什么也不会发生(没有任何功能)
<a href="javascript:;">占位符</a>
图片标签
图片标签用于向当前页面中引入一个外部图片
使用 img 标签来引入外部图片,img标签是一个自结束标签
img这种元素属于替换元素(块和内元素之间,具有两种元素的特点)
属性:
src 属性:指定的是外部图片的路径(路径规则和超链接是一样的)
alt 属性:
1.图片的描述,这个描述默认情况下不会显示,有些浏览器会在图片无法加载时显示图片
2.搜索引擎会根据alt中的内容来识别
<img src="./img/1.gif" alt="松鼠">
width属性:图片的宽度(单位时像素)
height属性:图片的高度
宽度和高度如果只修改了一个,则另一个也会等比例缩放
注意:一般情况下PC端,不建议修改图片的大小,需要多大的图片就裁多大;但在移动端,经常需要对图片进行缩放(大图缩小)
图片的格式:
- jpeg(jpg):
支持颜色比较丰富,不支持透明效果,不支持动图
一般用来显示照片 - gif:
支持颜色比较少,支持简单透明,支持动图
颜色单一的图片,动图 - png:
支持颜色丰富,支持复杂透明,不支持动图
颜色丰富,复杂透明图片(专为网页而生) - webp:
这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
它具备其他图片格式的所有优点,而且文件还特别的小
缺点:兼容性不好 - base64:
将图片使用base64
一般都是一些需要和网页一起加载的图片才会使用base64 - 注:效果一样,用小的
效果不一样,用效果好的
内联框架
用于向当前页面中引入一个其他页面
src指定要引入的网页的路径
frameborder指定内敛框架的边框
<iframe src="https://www.qq.com" width="800" height="600"></iframe>
音频
audio标签用来向网页中引入一个外部的音频文件,音视频文件引入时,默认情况下不允许用户自己控制播放停止
属性:
controls是否允许用户控制播放
autoplay音频文件是否自动播放 (如果设置了autoplay则音乐在打开页面时会自动播放,但是目前来讲大部分浏览器都不会自动对音乐进行播放)
loop音乐是否循环播放
<audio src="./source/audio.mp3" controls autoplay loop></audio>
除了通过src来指定外部文件的路径以外,还可以通过source来指定文件路径
<audio controls>
对不起,您的浏览器不支持播放音频!请升级浏览器!
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300"><!--兼容ie8 -->
</audio>
视频
使用video标签来向网页中引入一个视频,使用方式和video基本一样
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>