前端——HTML5上课笔记
网页：
结构：HTML用于描述页面的结构
表现：CSS用于控制页面中元素的样式
行为：JavaScript用于响应用户操作
HTML5
Hypertext Markup Language 超文本标记语言
HTML5：
1. 超文本=超链接
2. 网页基本结构示例：
<!doctype html>
<html>
<head>
<meta charset=”utf-8”>
<title> 网页标题</title>
<!--
head中的内容不会直接出现在网页中，主要用来帮助浏览器或搜索引擎来解析网页；
title中的内容会显示在浏览器的标题栏，搜索引擎主要根据title中的内容来判断网页的主要内容。
title中的内容也会作为搜索引擎结果的标题。
-->
</head>
<body>
<!--
body表示网页的主体，网页中所有的可见内容都应该写在body里
-->
<h1>网页的大标题</h1>
<p></p>
<!-- 注释，不能嵌套 -->
</body>
</html>
注：网页中：元素=标签(tag)
3. 属性：(attributes)
（1） 在标签中（开始标签或自结束标签）还可以设置属性，属性是一个名值对（x=y），属性用来设置标签中的内容如何显示。
（2） 属性和标签名或其他属性应该使用空格隔开
（3） 属性要根据文档规定来编写，有些属性有属性值，有些没有，属性值应该使用引号引起来
4. 文档声明：
文档声明用来告诉浏览器当前网页的版本：HTML4 XHTML2.0 HTML5 ……
HTML5的文档声明：<!doctype html> 或者 <!Doctype HTML>写在网页最开头
5. 字符集(charset)：
编码和解码所采用的规则称为字符集
如果编码和解码所采用的字符集不同就会出现乱码。
ASCII ISO88591 GB2312 GBK UTF-8（万国码）
<meta charset="utf-8"> 设置网页的字符集
6. 实体：
在网页中需要书写一些特殊的符号，则需要使用html中的实体（转义字符）
实体语法：&实体的名字; 例： 表示空格 >大于 <小于 ©版权符号
7. meta:
主要用于设置网页中的一些元数据，例：charset：指定字符集，name：指定数据的名称 ，content：指定数据的内容。
<meta name="keywords" content="html5 前端 css3">
keywords表示网站的关键字，可以同时指定多个关键字，关键字之间用逗号隔开 <meta name="description" content="网站的描述，显示在搜索引擎的结果页面">
< meta http-equiv=”refresh” content=”3;url=https://www.baidu.com” >表示隔3秒后将页面重新定向到另一个网站
8. 标题标签：
h1—h6 六级标题，重要性递减，h1在网页中的重要性仅次于title标签，一般情况一个页面只有一个h1，h4—h6很少使用。
块元素：在页面中独占一行的称为block element
<p>表示页面中的一个段落</p>，也是块标签。
<hgroup> 用来为标题分组
9. 语义化标签：
<em>标签用于表示语音语调的加重（斜体），是行内标签（inline element）----在页面中不会独占一行
<strong>标签强调重要内容（加粗），
<blockquote>表示长引用，块元素
<q>表示短引用，行内元素
<br>换行
<b>加粗强调
<i>表示学术名词，外国谚语
<small>注释
<sub>下标
10.块和行内
块：block element 在网页中一般通过块元素来布局
行内：inline element 主要用来包裹文字
一般会在块元素中放行内元素，而不会在行内元素中放块元素
块元素中基本上什么都能放，P元素中不能放任何的块元素
注：浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正，会修改网页在内存中的结构（通过检查—Elements来查看），不会修改源代码。
11. 布局标签：
<header> 表示网页头部
<main> 表示网页主体部分,一个页面中只有一个
<footer> 表示网页底部
<nav> 表示网页中的导航
<article> 表示一个独立的文章
<aside> 表示和主体相关的其他内容（侧边栏）
<section> 表示一个独立的区块，上面的标签都不能使用时就使用section
<div>没有语义，用来表示一个区块，目前来讲div是主要的布局元素
<span>是一个行内元素，没有任何语义，一般用于在网页中选中文字
12. 列表（list）:
html中一共有3种：有序列表，无序列表，定义列表
有序列表：使用<ol>标签创建，使用<li>表示列表项
无序列表：使用<ul>标签创建，使用<li>表示列表项（多）(下拉菜单)
定义列表：使用<dl>标签创建，使用<dt>表示定义的内容，使用<dd>来对内容进行解释说明
注：3个列表之间可以互相嵌套
13. 超链接：
跳转到其他页面或者当前页面的其他位置
使用<a></a>标签来定义超链接,它是行内元素，但是在<a>标签中可以嵌套除它自身外的任何元素
属性： href 指定跳转的目标路径，值可以是一个外部网站的地址，也可以是一个内部页面的地址。
<a href=”https://www.baidu.com” > </a> <a href=”07web.html” > </a>
可以将href的属性值设置为#，这样点击超链接以后，页面不会发生跳转，而是回到当前页面的顶部的位置。
在开发中，可以将#设置为占位符，使用javascript:;作为占位符，此时点击这个超链接什么也不会发生。
可以跳转到页面指定的位置，只需将href属性设置 #目标元素的id值属性
target 用来指定超链接打开的位置，
可选值：
_self 默认值 在当前页面中打开超链接（国外）
_blank 在一个新的页面中打开超链接（国内）
id属性：每一个标签都可以添加，唯一不重复的，同一个页面中不能出现重复的id，字母开头
14.相对路径：
当我们要跳转到一个服务器内部的页面时，一般我们都会使用相对路径，相对路径都会使用.或..开头：./ , ../ ,
./可以省略不写，如果 ./和../都不写，就默认写了./
./表示当前文件所在的目录
../表示当前文件所在目录的上一级目录
<a href="../07web.html" > </a>
<a href="./inner/target/07web.html" > </a>
15. 图片标签:
用于向当前页面引入一个外部图片
<img>自结束标签
属性：src：指定的是外部图片的路径（路径规则是超链接是一样的）
img属于替换元素，介于块和行内元素之间，具有两种元素的特点。
alt:对图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性，图片不会被搜索引擎收录。
width 图片的宽度（单位是像素）
height 图片的高度（单位是像素）
宽度和高度如果只修改了一个，另一个会等比例缩放。
注意：一般在PC端，不建议修改图片的大小，需要多大图片就裁多大
但是在移动端，经常需要对图片进行缩放（大图缩小）
16. 图片格式：
jpeg(jpg) :支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示照片，可压缩
gif:支持的颜色比较少，支持简单透明，支持动图，颜色单一的图片，动图
png:支持的颜色丰富，支持复杂透明，不支持动图，颜色丰富，复杂透明的图片（专为网页而生）
webp:谷歌新推出的专门用来表示网页中的图片的一种格式，具备其他图片格式的所有优点，而且文件比较小。兼容性不太好。
推荐：效果一样，用小的，效果不一样，用好的。
Base64：将图片使用base64编码，这样可以把图片转换成字符，图片加载速度块。
注：Logo:gif 照片：jpg
17. 内联框架 ：
用于向当前页面中引入一个其他页面
src指定引入网页的路径，frameborder指定内联框架的边框
<iframe src="https://www.qq.com" width="" height="" frameborder="0/1"></iframe>
18. 音视频的播放：
<audio src=”“ controls autoplay loop>用来向页面中引入外部的音频文件
音频文件引入时，默认情况下不允许用户自己控制播放停止。
controls是否允许用户播放。
autoplay 音频文件是否自动播放，如果设置了autoplay，则音乐在打开页面时会自动播放，但是目前来讲大部分浏览器都不会自动进行播放。
loop循环播放
除了通过src来指定外部文件的路径外，还可以通过source来指定，例：
<audio>
对不起，你的浏览器不支持音频播放！请升级浏览器。
<source src="">
</audio>
视频播放与音频播放类似：
<video controls autoplay loop>
<source=" ">
</video>
扫一扫
1693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
