一、HTML和CSS总体概述
1、HTML（HyperText Markup Language）超文本标记语言
它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为HTML文件的后缀名（扩展名）
2、CSS (Cascading Style Sheets) 层叠样式表
是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户
3、HTML和CSS的关系
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
HTML就像是一个人，而CSS就像是衣服和化妆品，用来装饰HTML
4、结构 表现 行为
结构——HTML（用于描述页面结构）
表现——CSS（用于控制页面元素样式）
行为——JavaScript （用于响应用户操作）
二、初识HTML
1、开发环境搭建
HTML编译工具
记事本：特点：无代码提示、无代码高亮显示、用户界面不友好；
Sublime（推荐）：特点：运行速度快、代码提示、高亮显示、插件拓展、html 插件emmet、sublime text3 安装emmet插件；
VSCode（推荐）：特点：丰富的插件支持、可进行git管理；
VSCode插件推荐：
HTML CSS Support - Html提示Css自动补全
HTML Preview - 提供预览HTML文档的功能
HTML Snippets - 完整的HTML标签，包括HTML5片段
Live Server - 启动一个开发本地服务器，为静态和动态页面提供实时重载功能
open in browser - 可以在默认浏览器或应用程序中打开当前文件。
Idea：特点：集成开发工具、类似DW,node,npm…运行速度较慢；
浏览器推荐
Html是在浏览器上解析执行的，每种浏览器对相同的Html代码解析可能产生不同的结果，所以我们需要安装多种主流的浏览器进行兼容性测试。
目前主流的浏览器：Google Chrome（谷歌）、Firefox（火狐）、Opera、Safari、Microsoft Edge
2、HTML文档结构解释
打开VSCode，新建后缀名为.html的文件，输入"!"或"html:5"生成基本的html5结构
<!-- 文档头声明 -->
<!-- html5标准网页声明 -->
<!DOCTYPE html>
<!-- 语言选择：en代表英语，zh-CN代表中文 -->
<!-- 根标签 html，一个文档只允许有一个 -->
<html lang="en">
<!-- head标签中的内容不会显示在网页中，它用来帮助浏览器解析页面 -->
<!-- head中常用的标签：meta(元信息设定)、title(文档标题)、link(css)、script(js) -->
<!-- meta标签是一个自结束标签，它用来设置网页的一些元数据，比如网页的字符集、关键字keyWords、简介 -->
<head>
<!-- 字符编码，浏览器根据字符编码进行解析 -->
<!-- 常见字符编码有：gb2312 gbk(国标码) unicode UTF-8(万国码) Big5(繁体字(环球新闻导报社))-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- viewport 设备的屏幕
width=device-width width属性控制设备的宽度，设置成device-width可以确保它能呈现在不同设备上
initial-scale=1.0 确保网页加载时，以1:1的比例呈现，不会有任何的缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 浏览器选项卡上的名字 -->
<title>Document</title>
</head>
<body>
<!-- body标签内的内容都会显示在网页中 -->
</body>
</html>
3、语法
注释
快捷键：选中之后，按 ctrl + /
元素
单标签元素
只有一个标签
<meta /> 、<img />、<br/>、<hr/> 等
双标签元素
有开始标签和结束标签
<div></div>
<p></p>
一个html元素（或者说双标签元素）由开始标签、结束标签以及元素内容组成
此外，标签可以嵌套使用：
镜面嵌套：（推荐）（并且建议用块级元素嵌套行内元素）
<div>
<p></p>
</div>
交叉嵌套（不会报错，但是是非法的）
<div><p></div></p>
属性
1、属性写在标签的内部
2、属性名和属性值使用 = 隔开
3、多对属性之间使用空格隔开
4、属性值加 ‘’ 或者 “”
5、绝大多数标签都具有的属性：id，title，style，class
<div style="background-color: pink; border:1px solid red">我是cssDiv</div>
<div id="only" class="twb">我是唯一的div</div>
其他
空白语法：多个空格和换行符，只会解析成一个空格，我们可以使用 ；
有些字符会和标签产生冲突，这时我们可以使用字符实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 |   |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ’ | 撇号 | &apos (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | &euro | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | &trade | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
4、块级元素
块级元素有：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address…
块级元素的特点：
1、独占一行空间
2、默认宽度为100%
3、高度由子元素或内容决定
4、可以通过css指定其宽度
建议：不要将块级元素嵌套在行内元素中
| 元素 | 作用 | 已有CSS效果 |
|---|---|---|
| div | 无意义的块元素 | |
| h1~h3 | 标题标题 | margin font-size font-weight |
| p | 段落 | margin |
| ul,li | 无序列表 | margin padding list-style |
| ol,li | 有序列表 | margin padding list-style |
| dl,dt,dd | 定义列表 | dl - margin dd - margin |
| html | ||
| body | margin | |
| header | H5新增的语义化标签<br>(样式与div类似) | <div class="header"></div> |
| footer | <div class="footer"></div> | |
| nav | <div class="nav"></div> | |
| article | <div class="article"></div> | |
| section | <div class="section"></div> | |
| aside | <div class="aside"></div> | |
| address | <div class="address"></div> |
5、行内元素
行内元素有：span、a、img、strong（加粗）、b（加粗）、i（斜体）、em（斜体）、sub（下标）、sup（上标）…
行内元素的特点：
1、宽高由自身决定
2、与其他元素共享一行
3、无法根据css设置宽高
4、行内元素不建议嵌套块级元素
img标签：
<!-- 相对路径：./(可以省略)当前目录 ../上一级目录 -->
<!-- img 特有的属性：width、height，不建议宽高一起设置，只设置其中一个就可以了 -->
<!-- alt 图片加载失败时的文字说明
title 鼠标悬停在图片上时显示的文字 -->
<img width="300px" src="" alt="图片加载失败时的文字说明" title="我是一张图片">
a标签：
<!-- a标签控制页面和页面之间的跳转 -->
<!-- href链接到其他页面 -->
<!-- target控制跳转方式 _blank在新窗口打开链接 _self在当前窗口打开链接 默认在当前窗口打开链接 -->
<a href="https://www.baidu.com" target="_self">百度</a>
<!-- 可以使用图片打开链接 -->
<a href="https://www.baidu.com"><img src="" alt=""></a>
<!-- base 标签写在head里面 指定a标签的打开方式
当base标签和a标签都写了target属性时，会参照a标签设置的来执行（就近原则）
-->
<base target="_blank">
锚点：
1、希望回到头部 设置href为#
2、希望回到其他部分 通过id设置其他部分 href=#id
3、跨页面锚点（href=./xxx.html#id）
<div>我是一个div</div>
<div>我是一个div</div>
<div id="center">中间div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<a href="#">回到顶部</a>
<a href="#center">回到中间div</a>
<a href="./xxxx.html#three">跳转到xxxx页面的id为three的标签</a>
mailto链接：mailto链接是一种html链接，能够设置你电脑中邮件的默认发送信息。但是需要你电脑中安装默认的E-mail软件，类似Microsoft Outlook等等。加入您已经安装了Microsoft Outlook，那么直接点击mailto链接就可以获得默认设置的邮件信息。
<!-- mailto链接 打开电脑自带的邮件 -->
<a href="mailto:111111111@qq.com">发送邮件</a>
6、H5新增标签
音视频标签
video标签
视频标签
<!-- 格式一： -->
<video src=""></video>
<!-- 格式二：当浏览器播放视频时它就会从source中选择一种自己支持的格式来播放 -->
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
它的一些属性：
src : 视频地址
autoplay : 自动播放
controls :视频控制条
poster : 视频封面
loop : 循环
muted : 静音
width/height : 和img标签中的一模一样
audio标签
音频标签
<audio src=""></audio>
<audio>
<source src="" type="">
</audio>
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster
语义标签
header
<header>是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。
nav
<nav>是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。
article
<article>代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任和独立的内容。
section
<section>作为Html文档独立的功能。
aside
<aside>元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。
footer
<footer>元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。
address
<address>元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。
在不支持Html5的浏览器中，由于浏览器无法识别Html5新增标签，所以默认将这些标签设置为行内元素（display:inline）,为了兼容性，需要：
section, article, aside, footer, header, nav, hgroup { display:block; }
figure& figcaption
figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。
多用于用作文档中插图的图像。
details
details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供的详细数据表格。
open属性
当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false时，其内部的子元素应该被收缩起来不显示。默认值为false
summary子元素
summary元素从属于details，用鼠标单击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供单击。
<!-- open="true" 内容默认展开 -->
<details open="true">
<summary>爱好</summary>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</details>
<figure>
<figcaption>这是图片</figcaption>
<img src="" alt="">
</figure>
3763
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
