前端任务：
1.学习HTML&CSS
2.学习选择器，盒模型，浮动，定位，图标字体
3.利用纯html&css完成小米商城（https://www.mi.com)的上半部分，只需完成导航条，轮播图，广告栏搜索框即可，功能需要用到js，所以现在不需要实现。
4.学习视频参考https://www.bilibili.com/video/BV1XJ411X7Ud（该作业在p101，前面的必须看）
由于知识点较多，限时15天
B/S
网页的优点：
—不需要安装
—无需更新
—跨平台（最重要）
网页使用的语言：
—HTML、CSS（麻烦）、JavaScript（实打实的一种编程语言）（难）
历史
蒂姆·伯纳斯·李 万维网（大的概念）的发明人
1991年8月6日世界上第一个服务器和第一个网站在欧洲核子研究中心上线
浏览器负责将网页渲染成我们想要的样子
蒂姆·伯纳斯·李1994年万维网联盟（W3C）的出现是为了制定网页开发的标准
微软一开始想和W3C抗衡，IE6、7等不遵循W3C规范 IE9 和 W3C开始一致
W3C的标准：
结构：HTML-描述网页的结构
表现：CSS-控制页面中元素的样式（看见的都是表现）
行为：JavaScript-用于响应用户的操作
HTML（Hypertext Markup Language）
超文本标记语言
超文本是指超链接
纯文本能存储数据（只要是word就不是文本）
网页结构是由一个个标签组成的，标签又开始就有结尾
head 网页的头部，其内的内容不会出现在网页中，主要用来帮助浏览器或搜索引擎来解析网页
title 中的内容是显示在浏览器的标题栏，搜索引擎会再根据title中的内容来判断网页的主要内容
body里面写网页中的内容
h1、h2、h3、、、h9表示标题
p表示段落
<heml>
<head>
<title>哈哈，我在哪出现</title>
</head>
<body>
<h1>悯农（二首）</h1>
<p>粒粒皆辛苦</p>
</body>
</html>
<imp><input>等只有开始标签
两种写法<input> <input />
<imp> <imp />
自结束标签
<!-- --> HTML的注释，也可以注释标签，不能嵌套
<!--标签一般成对存在，单也有一些自结束标签-->
标签的属性：(标签就是元素，元素就是标签)
在标签中（开始标签或者自结束标签）还可以设置属性
属行是一个名值对（x==y）
属性用来设置标签中的内容如何显示
这是我的<font color = " red" size = '2'>第三个</font>网页
属性和标签名或其他属性用该是用空格隔开
属性值应根据稳文档中的规定来写
属性值用引号引起来
迭代
网页的版本：HTML5 、HTML4、HTML2.0
语法有一些细节不一样
文档声明（doctype）：
告诉浏览器对当前网页的版本
-html5的声明
写到第一行文件<!doctype html5> <!DOCTYPE HTML5> 大小写都一样
二进制内存：
计算机内存想像成一个有多个小格子的容器，每一个小格子可以存储一个0或一个1
这一个小格子在内存中被称为1位（bit）
8bit=1byte（字节）
1024byte=1kb（千字节）
十六进制：一般显示二进制数字时，都会转换成十六进制
1 2 3 4 5 6 7 8 9 a(10) b(11) c(12) d(13) e(14) f(15) 10 12…1a 1b 1c 1d 1e 1f 20
字符编码：
以0 1方式存储（所有数据）
编码：字符->二进制
解码: 二进制->字符
字符集（charset）
编码和解码所采用的的规则称为字符集
常见字符集：
ASCII(美国)、ISO88591(欧洲)、GB2312(中国)、GBK、UTF-8（万国码）
可以通过meta标签来设置网页中的字符集，避免乱码问题
<meta charset="utf-8">
meta用来设置网页的元数据
https://www.w3school.com.cn/
VScode
在网页中编写的多个空格默认情况下会自动被浏览器解析为一个空格
在HTML中有些时候，我们不能直接书写一些特殊符号
如果需要书写这些特殊字符，则需要使用实体（转义字符）
https://www.w3school.com.cn/html/html_entities.asp
实体的语法：
实体的名字：
 （在加一个英文分号）;
> 大于号
< 小于号
© 版权符号
meta主要用预设值网页中的一些元数据，元数据不是给用户看的
charset 指定网页的字符集
name 指定的数据得到名称
content 指定数据的内容
如下所示
元数据，表示网站的关键字，可以同时指定多个关键字，关键字之间使用”,“
为搜索引擎服务
description用于指定网站的描述，会显示在搜索引擎的搜索结果中
title标签的内容会作为搜索结果的超链接上的文字显示
<meta http-equiv="refresh" content="等待时间;url=地址">
将网页重定向到另一个网站
<meta http-equiv="refresh" content="3;url=http://baidu.com">
在网页中HTML专门用来网页的结构
所以在使用html标签时，应该关注的使标签的语义，而不是他的样式
标题标签：
h1~h6,h1最重要，h6最不重要，重要性递减
h1在网页中的重要性仅次于title，一班情况下一个页面中只会有一个h1
一班情况下的标题标签只会使用到h1~h6,h4~h6很少用
块元素（block element）:在网页中独占一行的元素
标题标签都是块元素
P标签：用来表示页面中的一个段落，p标签也是一个块元素
hgroup标签用来为标题分组，可以将一组相关的标题同时放到hgroup
行内元素（inline element)：在页面中不会独占一行的元素
em标签用于表示语音语调的加重
strong表示强调重要的内容！
这两个都是行内元素
blockquote表示一个长引用(块元素)
q表示一个短引用（行内元素）
br换行标签
块元素（block element）：
在网页中一般通过块元素对页面进行布局
行内元素（inline element）：
主要用来包裹文字
一般情况下，会在块元素中放行内元素
块元素中基本上什么都能放
p元素中不能放任何元素
浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现在出head和body意外的子元素
…………
布局标签（结构化语义标签）
header表示网页的头部
main表示网页的主体部分
一个网页中中有一个main
footer表示网页的底部
header和footer也可以表示某一部分的头部和脚部
nav表示网页中的导航
aside和主体相关的其他内容 主要在网页中表示侧边栏
article 表示一个独立的文章
section表示一个独立的区块，上边的标签都不能表示时使用
重点关注语义
样式 CSS
重点：
div 没有语义，就是用来表示一个区块，目前来讲div还是我们主要的布局元素
万能的<div>
span 行内元素，没有任何的语义，一般用于在网页中选中文字
列表（list）
在html中列表有一员工有三种
1、有序列表
2、无序列表 （基于不同的浏览器，有序和无序基本没有区别，无序相较多）
3、定义列表有序列表，使用ol标签创建
无序列表，使用ul标签来创建
使用li来表示列表项(li=list item)
（ul用的多）
定义列表，使用dl标签创建
使用dt来表示定义的内容
使用dd来表示对内容进行解释说明
可以一个dt对应多个dd
（用得不多，像多级菜单）
列表之间可以互相嵌套
超链接可以让我们从一个页面跳转到其他页面
或者是当前页面的其他位置
使用 a 标签来定义超链接
通过属性：
herf 指定跳转的目标路径
只可以是一个外部网站的地址
也可以写一个内部页面的地址
herf = "#" 回到顶部
回到底部（特定位置）+ ‘id’ 属性
herf = “#要回到位置的id”
超链接也是一个行内元素，在a标签中可以嵌套除他自身之外得到任何的元素
（禁止套娃）
访问过的颜色和没访问过的颜色不同
当我们需要跳转一个服务器内部的页面是，我们一般是要用相对路径
相对路径都会使用. 或..开头
./
../
./可以省略不写，如果不想写./也不写../则相当于写了./
./表示当前文件所在的目录
../表示当前文件所在目录的上一级目录
属性：
targrt属性：用来指定超链接打开的位置
可选值
_self 默认值，在当前网页中打开超链接
_blank 在一个新的要么中打开超链接
在开发中可以将 # 作为超链接的路径的占位符使用
也可使用javascript来作为href的属性，此时点击这个超链接什么也不会发生
可以直接将超链接的href属性设置为# ，这样点击超链接之后
页面不会发生跳转，而是转到当前页面顶部的位置
可以跳转到页面的指定位置，只需将href属性设置 # 目标元素id 的属性值
id属性（唯一不重复的）：
每一个标签都可以添加一个id属性
id属性就是元素的唯一标志，用一个页面中不能出现重复的id属性
图片标签用于向当前页面中引入一个外部图片
使用img标签来引入外部图片，img是一个自结束标签
img 这种元素属于替换元素（块元素和行内元素之间，具有两种元素的的特点）
属性：
src 属性 值得是外部图片得到路径（和超链接一样）
alt 属性 图片的描述，这个描述默认情况下不会显示，有些浏览器不图片无法加载时显示
搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所识别
width 图片的宽度（单位是像素）
height 图片的高度
高度和宽度中如果只修改了一个，则另一个会等比例缩放
base64（进行加密，例如迅雷）
将图片使用base64进行编码，可以直接将图片转换为字符通过自负的姓氏来引入图片
一般都是一些需要和网页一起加载的图片才使用base64（同步显示）
网页本身具有代码，在家网页的时候发送一次请求，加载图片的时候再进行请求
一般图片出来的时候具有时间差
注意：
一般情况在pc端，不建议修改图片的大小
图片的格式：
jpeg（jpg）
支持的颜色比较丰富，不支持透明效果，不支持动图
一般用来显示图片
gif
支持的颜色比较少，支持简单透明，支持透图
颜色单一的图片，动图
png
支持的颜色丰富，支持复杂透明，不支持动图
颜色丰富，复杂透明图片（专为网页而生）
base64
将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引用图片
一般都是一些需要一起加载的图片才会用base64
webp
谷歌新推出的专门用来表示网页中图片的一种格式
它具备其他图片格式的所有有点，而且文件还特别小
缺点：兼容性不好
效果一样 用小的
效果不一样，用效果好的
audio 标签用来向页面中引用一个外部的音频文件
音频文件引用时，默认情况下不允许用户自己控制播放和停止
属性：
controls 是否允许用户控制播放
autoplay 音频文件是否自动播放
如果设置了autoplay 则音乐在打开页面是会自动东播放
但是目前来讲大部分浏览器都不会自动对音乐进行自动播放
loop 音乐是否循环
主要是为了浏览器的兼容性
video 标签用来向网页中引入视频
和 audio标签使用方式 基本一样
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
