目录
1.什么是HTML和CSS
HTML是HyperText Markup Language(超文本标记语言)
HTML不是编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。
HTML的特点：1.简易性 2.可扩展性 3.平台无关性 4.通用性
CSS是Cascading Style Sheets (层叠样式表)
2.HTML与CSS的关系
如果将html比作人偶，那么css就是衣服，将html打扮得漂亮起来
HTML就是网页内容的载体，网页的内容就是网页制作者放在网页上给用户浏览的信息，例如：文字、图片、视频等
CSS样式就是外在，就如同网页的衣服。例如：标题字体、颜色等。
3.编写工具和浏览器
推荐使用Vscode
Html是在浏览器上解析执行的，每种浏览器对相同的Html代码解析可能产生不同的结果，所以我们需要安装多种主流的浏览器进行兼容性测试；
主流浏览器：Google Chrome（谷歌）、Firefox（火狐）、Opera、Safari、Microsoft Edge。
4.认识HTML的基本结构
在Vscode中，可以通过！或者html:5+Tab生成基本的html5结构
<!-- 文档头说明 -->
<!DOCTYPE html>
<!-- 根标签 一个文档只允许有一个
HTML的根元素，用来包含HTML文档的所有元素，所有的html标签应该位于html标签内部
-->
<html lang="en">
<head>
<!-- head标签在网页中是不显示的 -->
<!-- 自结束标签meta 元数据 -->
<!-- 表示当前文档的编译方式为utf-8 utf-8万国码 GBK国标码 Big5繁体字 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello_html</title>
<!-- 选项卡标题title -->
</head>
<!-- <body>表示html的体部，其内部主要放网页内容，其内容会显示到浏览器视口中，所有想要显示在浏览器中的元素都被包含在该元素中。-->
<body>
</body>
</html>5.语法
(1)注释方法
html中只有一种注释，即 <!--注释内容-->
(2)元素
单元素标签
单元素标签，仅有一个标签 ，例如：
<img src="" alt=""/>
<br/>
<hr/>
<meta/>双元素标签，例如：
<div></div>
<p></p>标签可以嵌套另一个标签，一个标签里面有另一个标签
推荐使用镜面嵌套，例如：
<div>
<div>
</div>
</div>不推荐使用交叉嵌套，例如：
<p>
<strong>
</p>
</strong>(3)属性
属性写在开始标签的内部
属性名和属性值使用=隔开
多对属性之间使用空格隔开
属性值加""或者'''
绝大多数标签都具有属性: id title style class
<!-- id 唯一标识一个元素 -->
<div id="only" class="two">我是唯一的div</div>
<!-- class 表示一类元素 -->
<div class="two">我是类元素</div>
<!-- style属性 内联样式 书写css样式 -->
<div style="background-color: red;">我是cssdiv</div>
<!-- title属性 提示说明 鼠标悬浮到标签上的提示说明 -->
<div title="我是一个块级元素">我是块级元素</div>(4)空白语法
在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白，所以需要字符实体来表示
<div>空白 语法</div>
<!--  是空格的字符实体-->| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 |   |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | &apos (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | &euro | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | &trade | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
6.块级元素
块级元素的特点：
1.独占一行
2.宽度默认100%
3.高度由内容撑起
4.可以通过css设置宽高
块级元素有：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...
注意点：不要再行内元素中嵌套块级元素
<div>我是一个块级元素div</div>
<div style="border: 1px solid blue; width: 100px; height: 100px;">根据CSS设置过宽高的块级元素div</div>
<div style="font-size: 30px; border: 1px solid red">我是一个块级元素div</div>
<!-- font-size设置字体的大小
border设置边框 边框厚度为1px solid为实线 实现颜色为red
-->
<!-- 块级元素特点：
1.独占一行
2.宽度默认100%
3.高度默认由内容撑起
4.根据CSS设置宽高
-->网页显示为
7.行内元素
行内元素的特点：
1.与其他行内元素共享一行
2.宽高由自身决定
3.行内元素不建议嵌套块级元素
4.行内元素无法通过css设置宽高
行内元素有：span、a、img、strong、b、i、em、sub、sup...
<span style="border: 1px solid red;">我是一个行内元素</span>
<span style="border: 1px solid red; width: 100px; height: 100px;">我是一个行内元素</span>
<span style="border: 1px solid red;">我是一个行内元素</span>
<span style="border: 1px solid red;">我是一个行内元素</span>
网页显示为
8.基础标签
<!-- 都是块级元素 -->
<h1>我是一级标题</h1>
<!-- 强制换行标签 -->
<br>
<h2>我是二级标题</h2>
<!-- hr是分割线 -->
<hr>
<h3 id="three">我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>
<!-- 段落标签 块级元素 -->
<p>
段落标签，段落"标签"用于表示内容中的一个自然段,<br><hr>
使用p标签来表示一个段落,
p标签中的文字，会独占一行，并且段与段之间会有一个间距
</p> 网页显示为
img标签
<!-- 相对路径：相对于当前文件所处位置的路径 ../上一级文件夹 -->
<!-- 绝对路径：C盘、D盘 F:\work\文档\HTML与CSS-->
<!-- img特有特性 alt width height 可以设置宽和高 不建议宽高一起设置
alt为图片加载失败时显示说明 title为鼠标悬浮在图片上时显示的标题
src为图片路径 可以使用绝对路径或者相对路径
-->
<img src="./day03_images/src=http___dingyue.ws.126.net_iIAsSR2Se8ww6dhFNlOPD0dWPSY8cANo9KLaLOuXbhsNF1589577404137compressflag.jpeg&refer=http___dingyue.ws.126.jpeg" alt="图片加载失败的文字说明" width="300px" title="小镇">
<span>我是行内元素</span>图片加载失败时网页显示为
正常加载且鼠标悬浮在图片上时显示的标题时网页显示为
a标签
href为a标签指定需要跳转的目标界面
<!-- a标签控制页面和页面之间的跳转
href连接到其他页面
target控制跳转方式：
_blank：在新窗口打开链接
_self：在当前窗口打开链接
-->
<a href="http://baidu.dh9393.com/?2006">百度一下</a>
<!-- 可以使用图片打开a标签的链接 -->
<a href="https://baike.baidu.com/item/%E8%94%A1%E5%BE%90%E5%9D%A4/8511458?fr=aladdin">
<img src="./day03_images/src=http___dingyue.ws.126.net_iIAsSR2Se8ww6dhFNlOPD0dWPSY8cANo9KLaLOuXbhsNF1589577404137compressflag.jpeg&refer=http___dingyue.ws.126.jpeg" alt="" width="200px">
</a>
<a href="#nihao">回到底部</a>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<!--锚点-->
<div id="center">中间</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<div id="nihao">我是一个div</div>
<!-- 3.锚点
1.希望回到头部 设置href为#
2.希望回到其他部分 通过id设置其他部分 href=#id
3.跨页面锚点
-->
<a href="#">回到顶部</a>
<a href="#center">回到中间</a>
<a href="./5-基础标签使用.html#three">跳转到5页面h3</a>
第一次点击是点击百度一下，第二次点击是点击图片，第三次点击时回到底部，第四次点击是回到顶部，第五次点击是回到底部，第六次点击是回到中间，第七次点击是跳转到5页面h3
音视频标签
<!-- 视频标签 video
src 指向视频的链接地址
controls 显示控制进度条
autoplay 网页加载完就自动播放
muted 视频一开始就静音播放
loop 循环播放
poster 视频封面
-->
<video src="./day03_images/1.mp4" controls muted autoplays
loop poster="./day03_images/src=http___inews.gtimg.com_newsapp_match_0_12043800710_0.jpg&refer=http___inews.gtimg.jpeg">
</video>
<!-- 音频标签 audio标签
同视频标签
-->
<audio src="./day03_images/1.mp3" controls autoplay loop></audio>
h5新增
<!-- details
open="true" 下拉框铺开
-->
<!-- 加了summary则第一个summary作为标题 -->
<details open>
<summary>足球</summary>
<summary>篮球</summary>
<summary>排球</summary>
<summary>排球</summary>
<summary>排球</summary>
<summary>排球</summary>
</details>
<!-- 没有summary则显示详细信息作为标题 -->
<details open>
<div>足球</div>
<div>足球</div>
<div>足球</div>
</details>
<figure>
<!-- 标题 -->
<figcaption>这是图片</figcaption>
<img src="./day03_images/src=http___dingyue.ws.126.net_iIAsSR2Se8ww6dhFNlOPD0dWPSY8cANo9KLaLOuXbhsNF1589577404137compressflag.jpeg&refer=http___dingyue.ws.126.jpeg" width="200px" alt="">
</figure>
扫一扫
840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
