day01
什么是HTML 和CSS？
HTML的全称 Hyper Text Markup Language(超文本标记语言)
它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接、甚至音乐、视频、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记要显示的页面中的各个部分。网页文件本身就是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写错误的标记将不指出其错误，且不停解释其执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与htm作为HTML文件的后缀名（扩展名）
HTML的版本历程
1、HTML1.0：在1993年6月作为互联网工程工作小组（IETF）工作草案发布
2、HTML2.0：1995年11月作为RFC1866发布，于2000年6月发布之后被宣布已经过时
3、HTML3.2：1997年1月14日，W3C推荐标准。
4、HTML4.0：1997年12月18日，W3C推荐标准。
5、HTML4.01：（微小改进）1999年12月24日，W3C推荐标准。
6、HTML5：2014年10月，HTML5是公认的下一代web语言，极大地提升了web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。IE8以前的版本不支持。
HTML特点：
1、简易性
2、可扩展性
3、平台无关性
4、通用性
CSS（Cascading style Sheets）层叠样式表
是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。
HTML和CSS之间的关系
1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等
2.CSS样式是表现。就像是网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片边框等。所有这些用来改变内容外观的东西称之为表现。
结构、表现、行为
结构：HTML，用于描述页面的结构
表现：CSS 用于控制页面中元素/标签的样式，、
行为：JavaScript JS用于响应用户操作
开发工具
这里我们用的是vscode
VScode 特点：丰富的插件支持，可进行git管理
展示HTML文件使用到的浏览器推荐使用Google Chrome（谷歌浏览器），FireFox（火狐浏览器）等等主流浏览器
VSCode插件
打开VSCode新建文件.html的文件
HTML：5自动生成基本的HTML5结构
<!DOCTYPE html>
文档头信息，HTML5标准网页声明，不加这一行，就表示页面采用浏览器本身的解析标准，这样会造成页面在不同的浏览器（IE 火狐等）可能出现不同的显示效果。
<html lang="en">
<html>是根标签，一个页面中只能有一个根标签，页面中所有的内容都应该写在html根标签中。
属性lang是单词language的缩写，意为语言，“en”代表英语，“zh-CN”代表中文
<html>标签只有两个子标签 head：浏览器设置 body：可视区展示
head标签，该标签的内容不会在网页中直接显示，它用来帮助浏览器解析页面的
meta标签，用来设置网页的一些元数据，比如网页的字符集，关键字，简介
meta是一个自结束标签
<meta charset="utf-8">
utf-8为字符编码，字符编码，浏览器会根据字符编码进行解析
常见的字符编码有：gb2312/gbk/unicode/utf-8
<meta name="viewport" content="width=device-width,initial-scala=1.0">
viewport设备的屏幕
width=device-width width属性控制设备的宽度。假设你的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为device-width可以确保它能正确呈现在不同设备上。
initial-scale=1.0确保网页加载时，以1：1的比例呈现，不会有任何的缩放。
<body>标签显示文档内部区域
标签分为单标签和双标签或者说是单元素和双元素
属性
绝大多数标签使用到的属性：id title style class
id:唯一标识一个标签
class：标识一类元素/标签
style:内联样式 书写CSS样式
title：鼠标悬浮到标签时作提示说明
字符实体
空格：
无论在标签内部上写了多少个空格，浏览器只会解析成一个，若想在网页中出现多个空格，则需要字符实体去完成 想要多少个空格就在标签内部写多少个
左箭头<:< 右箭头>: >
如果直接在标签内部写< >会被浏览器解析成一个标签，所以如果需要在网页中出现左右箭头，则也需要字符实体去完成
块级元素
块级元素的特点：
1.独占一行，不与其他元素共享一行
2。宽度默认100%
3.高度默认由内容撑起
4.根据CSS设置样式
行内元素
行内元素的特点;
1.宽高度由内容自身决定
2.行内元素与其他元素共享一行
3.无法根据CSS设置宽高
4.行内元素不建议嵌套块级元素
img标签
相对路径：在当前文件夹中寻找文件地址
绝对路径：在电脑磁盘中寻找文件地址
除此之外，还可以在src中填写在线地址，加载网络图片，优点是不占用文件空间，缺点是在没有网络的情况下无法加载图片。
img标签可以设置宽高
alt：图片加载失败的文字说明
音视频
video标签
属性：
1.src指向视频地址
2.controls 控制进度条
3.autoplay自动播放
4.musted静音播放
5.loop循环播放
6.poster视频封面
audio音频标签
属性与视频标签同理（懒.....）
超链接标签a标签
a标签控制页面与页面之间的跳转
属性：
href链接到其他页面
target控制跳转方式 _blank在新窗口打开 _self在当前窗口打开
可以使用img标签 以图片的形式打开链接
a标签还可以作为锚点 #+id
<a href="#">回到顶部</a>
<a href="#center">回到中间</a>
<a href="../XXXX.html#XXX>跳转到其他页面某个标签</a>
列表标签
1.无序列表（unordered list)
2.有序列表(ordered list)
3.定义列表(definition list)
无序列表
ul
块级元素 配合li标签使用
<ul>
<li></li>
</ul>
li (list item)
无序列表样式：
disc 实心圆 默认值
circle 空心圆
square 实心方块
无序列表应用场景
1.新闻列表
2.商品列表
3.导航条
有序列表
ol
块级元素
<ol type="i">
<li></li>
</ol>
有序列表的作用：
给一堆数据添加列表语义，并且这一堆数据中所有的数据都有先后顺序
其他用法跟ul差不多，也就是应用场景/注意点都和ul差不多
有序列表样式
1：默认值。数字有序列表（1，2，3，4）
a: 按字母顺序排列的有序列表，小写（a,b,c,d)
A:按字母顺序排列的有序列表，大写（A，B，C，D）
i:罗马数字 ，小写（i,ii,iii,iv)
I:罗马数字，大写（I，II，III，IV）
定义列表
dl
<dl>
<dt>XXXXX</dt>
<dd>XXXX</dd>
</dl>
应用场景：
网站尾部的相关信息
图文混排
2124
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
