本文介绍了HTML和CSS的基础知识，包括HTML的历史版本、特点以及HTML与CSS的关系。讲解了HTML的搭建环境，如Sublime、VSCode等编辑器的使用，并提到了Chrome和Firefox等浏览器的兼容性测试。此外，文章还详细阐述了HTML的语法，如注释、元素、属性，以及常用的基础标签如h、p、a、img等，并介绍了CSS在网页样式设计中的作用。
1.HTML与CSS
1.1什么是HTML？什么是CSS？
HTML是HyperText Markup Language(超文本标记语言)
它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为HTML文件的后缀名（扩展名）
CSS (Cascading Style Sheets) 层叠样式表
是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。
1.1.1 HTML的历史版本发展
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。
③HTML 3.2：1997年1月14日，W3C推荐标准。
④HTML 4.0：1997年12月18日，W3C推荐标准。
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。
⑥HTML 5：2014年10月，HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。
1.1.2 HTML特点
超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：
1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
2.可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。
3.平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
4.通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
1.2HTML和CSS之间的联系
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
HTML就像是一个人，而CSS就像是衣服和化妆品，用来装饰HTML
1.3网页三要素
HTML、CSS、JS
结构 表现 行为
网页框架搭建，用于描述页面的结构
用于表现网页元素的样式、颜色、字体、背景
用于响应用户操作，动态+事件
2.搭建HTML
2.1搭建开发环境
编译工具：
记事本：特点：无代码提示、无代码高亮显示、用户界面不友好；
Sublime（推荐）：特点：运行速度快、代码提示、高亮显示、插件拓展、html 插件emmet、sublime text3 安装emmet插件；
VSCode（推荐）：特点：丰富的插件支持、可进行git管理；
Idea：特点：集成开发工具、类似DW,node,npm…运行速度较慢；
Html是在浏览器上解析执行的，每种浏览器对相同的Html代码解析可能产生不同的结果，所以我们需要安装多种主流的浏览器进行兼容性测试；
浏览器：
Google Chrome（谷歌）、Firefox（火狐）、Opera、Safari、Microsoft Edge。（推荐使用前两个，不推荐使用IE，因为兼容性不好）
VSCode插件推荐
HTML CSS Support - Html提示Css自动补全
HTML Preview - 提供预览HTML文档的功能
HTML Snippets - 完整的HTML标签，包括HTML5片段
Live Server - 启动一个开发本地服务器，为静态和动态页面提供实时重载功能
open in browser - 可以在默认浏览器或应用程序中打开当前文件。
2.2 Hello HTML
打开VSCode，新建后缀名为.html的文件，输入"!"或"html:5"生成基本的html5结构.
文档结构
<!-- 文档头信息 -->
<!-- html5标准网页声明 -->
<!-- 不加这一行，就表示页面采用浏览器本身的解析标准，这样会造成页面在不同的浏览器（IE、火狐等）可能出现不同的显示效果。 -->
<!DOCTYPE html>
<!-- 语言，”en”代表英语，”zh-CN”代表中文 -->
<!-- 只有两个子标签 head:浏览器设置 body：可视区展示 -->
<html lang="en">
<head>
<!--
字符编码，浏览器会根据字符编码进行解析
常见的字符编码有：gb2312、gbk、unicode、utf-8。
-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 浏览器选项卡上的名字 -->
<title>Hello HTML</title>
</head>
<!--
body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写
-->
<body>
<!-- 在body里的内容都是显示在浏览器的视图区的 -->
</body>
</html>
2.3语法
2.3.1注释
注释 Ctrl+/
<!-- 导航栏 --> <!--/ 导航栏 -->
2.3.2元素
单标签元素就是只有一个标签
<meta /> 、<img />、<br/>
双标签元素，就是有开始标签和结束标签的标签元素
<div></div>
<p></p>
标签也可以进行嵌套使用，就是可以将一个标签写入到另外一个标签内。建议镜面嵌套。
镜面嵌套：
<p>段落<strong>加强</strong>标签</p>
交叉嵌套 （是非法的）
<p>非法<strong>交叉</p>嵌套</strong>
2.3.4属性
HTML标签都拥有自己的属性，属性应该出现在元素的开始标签内部，属性名和属性值通过"="分割，属性与属性之间通过空格分割，属性名不区分大小写，属性值区分大小写并且属性值可以使用双引号引起来。
核心属性：绝大多数标签都具有的属性。title、id、class、style。
title="" 鼠标悬停后的提示文字
id="" 身份证 唯一标识符
class="" 类
style="" 行内样式 优先级是样式里面最高的
2.3.5其他
空白
在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白
实体
在HTML中，某些字符是预留的。例如：不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities)，实体以&符开始，以;结尾。以下是常见的实体
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 |   |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ’ | 撇号 | &apos (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | &euro | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | &trade | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
注：最经常使用空格、小于、大于，还要企业开发经常使用版权、注册商标、商标。
空格
小于< <
大于> >
2.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.块级元素可以包含行内与块级。
| 元素 | 作用 | 已有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> |
案例：
<body>
<!-- 块级元素的使用 -->
<div style="border: 1px solid red; height: 100px; width: 200px;">我是一个块级元素</div>
<!-- div标签搭建页面结构 -->
<!-- 头部区域 -->
<div class="header"></div>
<!-- 内容区域 -->
<div class="content"></div>
<!-- 底部区域 -->
<div class="footer"></div>
<!-- h5新增的语义化标签 搭建页面结构 -->
<!-- 头部区域 -->
<header></header>
<!-- 内容区域 -->
<!-- 底部区域 -->
<footer></footer>
</body>
2.5行内元素
元素：span、a、img、strong、b、i、em、sub、sup…
作用：在结构中填充网页内容
特点：
1.与其他元素共享一行。
2.宽高自身决定。
3.行内相对来说只能包含行内。
注：img、imput（置换元素）特殊行内，可以直接设置宽高。
案例：
<body>
<!-- 行内元素的基本使用 -->
<span style="border: 1px solid red; height: 200px; width: 1000px;">我是一个行内元素span1</span>
<div style="border: 1px solid red;">我是一个div</div>
<span style="border: 1px solid red;">我是一个行内元素span2</span>
</body>
块级与行内区别
1.块级独占一行，行内共享一行。
2.块级可以直接设置宽高，而行内不行。（通过css的display属性可以给行内元素设置宽高，display属性取值为inline-block/block，这样可以给行内元素设置宽高）
例 span{
display：block/inline-block；
height：；
width：；
}
3.块级元素可以包含行内与块级，而行内只能包含行内。
3.基础标签的使用
3.1 h标签
h标签为标题标签，在HTML中，共有六级标题标签h1-h6。h1最大，h6最小。
h1表示一个网页中的主要内容，重要性依次降低。h1的重要性仅仅次于title，搜索引擎检索完title会立即查看h1中的内容。
h1标签非常重要，它会影响到页面在搜索引擎中的排名，一个页面最好只写一个h1标签。
注：一般的页面中，我们只使用h1 h2 h3，其他的基本不用。
<h1>这是一个h1标签</h1>
3.2 p标签 br标签 hr标签
p标签为段落标签，用于表示内容中的一个自然段，一般使用p标签来表示一个段落，并且p标签中的文字会独占一行，每一段与每一段之间会有一个间距。
p标签中的文字，会独占一行，并且段与段之间会有一个间距,有16px的上下margin（外边距）。
br标签表示换行标签。br标签是一个自结束标签 br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签。
hr标签可以在网页中生成一个分割线。
自结束标签
空格
< <
> >
“ "
& &
‘ '
<!-- 段落标签 br是换行 hr是分割线 -->
<p>
段落标签，段落"标签"用于表示内容中的一个自然段,<br><hr>
使用p标签来表示一个段落,
p标签中的文字，会独占一行，并且段与段之间会有一个间距
</p>
3.3 img 标签
img标签 告诉浏览器要显示一张图片
格式为：
<img src="" alt="">
src:设置一个图片的路径（绝对路径和相对路径，最好使用相对路径）
alt:可以用来设置在图片不能显示的时，对图片的描述
img标签的其他属性
width:设置图片的宽度
height:设置图片的高度
title：用于告诉浏览器，鼠标悬停的时候，需要弹出的描述框中显示什么内容。
<img src="图片的url或本地路径地址" alt="" width="100px" height="100px" title="">
注：
1.px 单位名称为像素，相对长度单位，像素px是相对于显示器屏幕分辨率而言的。像素的使用性特别广。
2.如果不设置img标签的宽度和高度，那么图片就会按照默认的样式显示，如果设置了宽高，img就
会按照设置的宽高来显示。
3.有时设置img的宽高会使图片失真，这时只需要设置宽度或者高度中的一个，另外一个会等比例调整。
4.一般除了自适应的页面，不建议设置width和height。
5.和h标签以及p标签不同的是，img标签不会独占一行。
3.3 a标签
a标签的作用 用于控制页面与页面之间跳转的
a标签中还有一个叫做target的属性，这个属性专门用于控制如何跳转
self:用于当前的选项卡中进行跳转，也就是不新建页面跳转，默认就是_self
_blank:用于在新的选项卡中进行跳转，也就是新建页面跳转
a标签也有一个title属性，效果和img标签的title类似
<a href="指定需要跳转的目标界面">需要展现给用户查看的内容</a>
<a href="https://www.baidu.com" target="_blank" title="百度">百度一下</a>
注：
1.a标签不仅可以让文字点击，也可以让图片被点击
2.一个a标签必须有一个href属性，否则a标签不知道要跳转到什么地方
3.如果通过a标签href属性指定一个URL地址，那么必须在地址前面加上http://或者https://
除了URL地址，还可以指定一个本地地址
3.4 mailto链接
mailto链接是一种html链接，能够设置你电脑中邮件的默认发送信息。但是需要你电脑中安装默认的E-mail软件，类似Microsoft Outlook等等。加入您已经安装了Microsoft Outlook，那么直接点击mailto链接就可以获得默认设置的邮件信息。
<a href="mailto:name@email.com">Email</a>
| 参数 | 描述 |
|---|---|
| mailto:name@email.com | 电子邮件收件人地址 |
| cc=name@email.com | 抄送地址 |
| bcc=name@email.com | 密件抄送地址 |
| subject=subject text | e-mail的题目 |
| body=body text | e-mail的内容 |
| ? | 和浏览器地址操作一样，第一个参数符合是？ |
| & | 其他参数符号是& |
3.5装饰性标签
3.5.1 em标签
意为强调，突出文章重点
3.5.2 strong标签
意为强调，内容更为有用
3.5.3 b标签
加粗
<body>
<em>我是em标签</em>
<strong>我是strong</strong>
<b>我是b标签</b>
</body>
3.6 div和span标签
div是一个无语义的标签，就是一个纯粹的块元素，并且不会为它里边的元素设置任何的默认样式，div元素主要用来进行页面基本结构的搭建
span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式
<body>
<!-- div无意义的块级元素，搭建网站架构 -->
<!-- 头部 -->
<div class="header"></div>
<!-- 内容 -->
<div class="content"></div>
<!-- 底部 -->
<div class="footer"></div>
<!-- span无意义的行内元素 -->
<div>我是一个
<span style="color: aquamarine;">块级元素</span>
</div>
</body>
3.7 video标签和audio标签
3.7.1 video
video作用：播放视频
webm 网页中专用的视频格式
<video src=""></video>
video标签的属性
src:告诉video标签需要播放的视频地址
autoplay:用于告诉video标签是否需要自动播放视频
controls:用于告诉video标签是否需要控制条
poster:用于告诉video标签视频没有播放之前显示的占位图片
loop:一般用于做广告视频，用于告诉video标签视频播放完毕之后是否需要循环播放
muted:静音
width/height: 和img标签中的一模一样
格式：
<video>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
第二种格式存在的意义:
由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的
这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式
video标签的第二种格式存在的意义就是为了解决浏览器适配问题
video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放
注意：
当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放
在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现
<video autoplay="autoplay" controls="controls">
<source src="images/sb1.webm" type="video/webm"></source>
<source src="images/sb1.mp4" type="video/mp4"></source>
<source src="images/sb1.ogg" type="video/ogg"></source>
</video>
3.7.2 audio
作用：播放音频
格式：
<audio src=""></audio>
<audio>
<source src="" type="">
</audio>
注意：
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster
S的框架叫做html5media来实现
<video autoplay="autoplay" controls="controls">
<source src="images/sb1.webm" type="video/webm"></source>
<source src="images/sb1.mp4" type="video/mp4"></source>
<source src="images/sb1.ogg" type="video/ogg"></source>
</video>
3.7.2 audio
作用：播放音频
格式：
<audio src=""></audio>
<audio>
<source src="" type="">
</audio>
注意：
audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
只不过有3个属性不能用, height/width/poster
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
