html和css资料链接
提取码zyq6
w3school的HTML教程
1.网页的结构
根据W3C标准，一个网页主要分为三部分组成：结构（HTML）、表现（CSS）、行为（JS）
- 结构：HTML用于描述页面的结构
- 表现：CSS用于控制页面中元素的样式
- 行为：JS用于响应用户操作
2.HTML
- 超文本标记语言（Hypertext Markup Language）
- 注释
<!-- -->
3.网页的基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
-
<!doctype html>
文档声明：告诉浏览器当前的网页版本为html5 -
meta标签
设置网页的字符集，避免乱码问题
4.HTML的标签
- 标签就是元素
- 在使用html标签时应该关注的是标签的语义，而不是它的样式
html
html页面的根标签（元素），网页中所有的内容都要写入根元素的里边
表示这个是个中文网站
<html lang="zh">
lang="en"表示这是个英文网站
head
- 是html的子元素
- head是网页的头部，head中的内容不会再网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页
meta
- meta标签用来设置网页的元数据，元数据不是给用户看的
- 元数据（网页的底层的数据，初始化的数据）
- charset 指定网页的元数据，用于避免乱码
- name 指定数据的名称
- content 指定数据的内容
<meta name="keywords" content="HTML5,前端,CSS3">
<meta name="description" content="这是一个非常不错的网站">
keywords :表示网站的关键字,用于搜索引擎的推荐识别，可以同时使用多个关键字，关键字之间用逗号隔开
description:用于指定网站的描述，会显示在搜索引擎的搜索结果中
- http-equiv 用于网站的跳转
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
打开此网页后，过三秒会跳转到目标网页
title
- title中的内容会显示在浏览器的标题上
- 搜索引擎会根据title中的内容来判断网页的主要内容
- title标签的内容会作为搜索结果的超链接上的文字显示
body
- 是html的子元素，表示网页的主体，网页中所有的课件内容都应该写在body里
标题标签（h1~h6）
- h1是一级标题,h6是6级标题，字体依次变小，重要性递减
- h1在网页中的重要性仅次于title标签，一般情况下一个网页只会有一个h1
- 是块元素（在页面中独占一行的元素）
hgroup
hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup
<hgroup>
<h1></h1>
<h2></h2>
</hgroup>
p（段落）
- p标签表示页面中的一个段落
- 块元素
em
- em标签用于表示语音语调的加重，是斜体的
- 行内元素（在页面中不会独占一行）
<p>今天<em>天气</em>真不错</p>
strong（加粗）
表示强调，重要的内容
- 行内元素
blockquote（长引用）
用于引用别人的话
- 块元素
鲁迅说，
<blockquote>
这句话我是没说过的！
</blockquote>
q（短引用）
带有双引号的引用
- 行内元素
子曰：<q>学而时习之，乐呵乐呵</q>
br
表示页面中的换行
布局标签（结构化语义标签）
header和footer可以表示某一部分的底部和头部，但是main在一个页面只能有一个
header（网页头部）
表示网页的头部
main(网页主体)
表示网页的主体部分（一个页面中只会有一个main）
footer（网页的底部）
nav（网页中的导航）
aside（其他内容，侧边栏）
和主体相关的其他内容，侧边栏
article（独立的文章）
section（独立的区块）
上边的标签都不能表示时使用section
div
div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
- div可以代替上面的所有
span
- 行内元素
- 没有任何的语义，一般用于在网页中选中文字
列表
html中的列表其实有三种
- 有序列表
使用ol来创建有序列表，使用li表示列表项
<ol>
<li></li>
<li></li>
<li></li>
</ol>
- 无序列表
使用ul标签来创建无序列表，使用li表示列表项
<ul>
<li></li>
<li></li>
<li></li>
</ul>
- 定义列表
使用dl标签来创建一个定义列表
使用dt来表示定义的内容
使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>结构表示一个物体的大概组成</dd>
</dl>
- 列表之间可以互相嵌套
<ul>
<li>
aa
<ul>
<li>aa-1</li>
</ul>
</li>
</ul>
a （超链接）
超链接可以让我们从一个页面跳转到其他页面或者是当前页面的其他位置
<a href="https://www.baidu.com">超链接</a>
- 属性
- href：指定跳转的目标路径
值可以是一个外部网站的地址
亦可以是一个内部页面的地址 - target：指定超链接打开的位置
_self：（默认值）在当前页面中打开的超链接
_blank:在一个新的页面中打开超链接
<a href="" target="_self"></a>
-
使用超链接进行html页面的区域跳转
（一篇文章，控制移动到哪段，顶部或底部等） -
跳转到顶部
<a href="#">回到顶部</a> -
为标签设置id,跳转到 指定id位置
<a href="#bottom">去底部</a>
<p id="bottom'>底部<p>
- 使用javascript:;让href没有作用（用于开发阶段，占位符）
<a href="javascript:;">这是一个新的链接</a>
相对路径
相对于当前路径
当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径
- 相对路径都会使用./或../开头，如果不写则默认写了./
- ./表示当前文件所在的目录
- ../表示当前文件所在目录的上一级目录
5.标签的属性
- 属性：在标签中（开始标签或自结束标签）还可以设置属性，属性是一个名值对（x=y）
- 属性用来设置标签中的内容如何显示
- 属性title
当鼠标悬停后会显示title中的信息
<p title="你好，世界！">hello world!</p>
6.字符编码
-
编码
将字符转换为二进制的过程 -
解码
将二进制码转换为字符的过程 -
字符集
编码和解码所采用的的规则称为字符集 -
乱码问题
如果编码和解码所采用的的字符集不同就会出现乱码问题 -
utf-8（万国码）
在开发时使用的字符集编码都是utf-8 -
可以在meta标签来设置网页的字符集，避免乱码
7.实体
- 在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
- HTML中的有些时候，我们不能直接书写一些特殊符号，比如：多个连续的空格，字母两侧的大于和小于符号
- 如果我们需要在网页中书写这些特殊的符号，则需要使用HTML中的实体（转义字符）
语法
- &实体的名字；
- 空格
 ； - 大于号
> - 小于号
< - 版权符号
©
8.块和行内
块元素
在网页中一般通过元素来对页面进行宏观布局
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
- p元素中不能放任何的块元素
- 补充：浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
行内元素
主要用来包裹文字
9.图片标签img
用于向当前页面引入一个外部图片
- 自结束标签
- 属性：
- src：属性指定的是外部图片的路径（路径规则和href是一样的）
路径可以是相对路径，也可以是网址路径 - alt：对图片的描述，默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所识别
- 是一种替换元素(介于块和行内元素之间)
- 如果高度和宽度中只被修改了一个，则另一个会等比缩放
- 一般情况在pc中，不建议修改图片的大小
图片格式
- jpeg（jpg）
支持的颜色较丰富，不支持透明效果，不支持动图 - 一般用来显示照片
- gif
支持的颜色较少，支持简单透明，支持动画 - png
支持的颜色丰富，支持复杂透明，不支持动图 - 转为网页设计而生
- webp
谷歌推出的专门用来表示网页中的图片的一种格式 - 具备其他格式的所有优点，而且文件还小
- 兼容性不好
base64（图片编码）
- 将图片用base64进行编码，这样可以将图片转换为字符，然后通过支付的形式来引入图片
- 一般都是一些需要和网页一起加载的图片才会使用base64，使用场景不多
效果一样用小的，效果不一样用适合的
10.内联框架
用于向当前页面中引入一个其他页面
- src:指定一个要引入的网页路径
- 网页宽度
- height：网页高度
- frameborder：边框粗细，为0表示没有
<iframe src="https://www.qq.com" frameborder="0"></iframe>
- 了解，使用不多，因为两个网页没有关联，搜索引擎不好爬取
11。音视频播放
audio（引入音频）
和图片的引入一样
音视频文件引入时默认情况下是不允许用户自己控制播放停止
- 属性
- src：资源路径
- controls:允许用户控制，会出现控制ui
- autoplay:音频文件是否自动播放
如果设置了autoplay则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器不会自动对音乐进行播放 - loop：循环播放
<audio src="./source/audio.mp3" controls loop></audio>
除了通过src来指定外部文件的路径以外，还可以通过source来指定文件
<audio>
对不起！您的浏览器不支持，请升级浏览器
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300px">
</audio>
- 这样写的好处是，当浏览器不支持时就不能识别audio和source，就会识别提示语，而当浏览器支持是就不会显示提示语
- 并且有多个格式类型，可以进行兼容处理
- embed是为了兼容ie8进行的优化
当前两个source都不支持时就会跳到<embed>
video（引入视频）
使用方式基本上和audio是一样的
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./souce/flower.mp4" type="video/mp4">
</video>