1. HTML与CSS
1.1 HTML
HTML是一种超文本标记语言，用于告诉浏览器如何构造页面，“超文本”指的是构造的页面可以包含图片、链接、音乐以及程序等非文字元素，HTML文件的后缀名有.html与.htm，大部分都是.html。
1.2 HTML特点
1.简易性：超文本标记语言版本升级采用超集方式，因此更加灵活方便。
2.可扩展性：超文本标记语言的广泛应用带来了加强功能、增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。
3.平台无关性：超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
4.通用性：Html是网络的通用语言，一种简单、通用的全置标记语言。它允许开发者制作文本与图片相结合的复杂页面，这些页面可以被网上任何人浏览（无论使用的是什么类型的电脑或浏览器）。
1.3 网页三要素
结构
HTML：网页框架构建，用于描述页面的结构
表现
CSS 用于控制页面中元素的样式，颜色，字体，背景
行为
JS 用于响应用户操作 动态+操作
2. 开发环境
2.1 开发工具推荐
-
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 - 可以在默认浏览器或应用程序中打开当前文件。
2.2 主流浏览器
Google Chrome（谷歌）、Firefox（火狐）、Opera、Safari、Microsoft Edge
使用谷歌和火狐就可以满足初学的开发人员进行兼容性测试
3. HTML的简单介绍
3.1文档结构
<!--
文档头信息 html5标准网页声明，声明当前的网页是按照HTML5标准编写的
表示页面采用浏览器本身的解析标准。
不加这一行会造成页面在不同的浏览器可能出现不同的显示效果。
编写网页时一定要将h5的文档声明写在网页的最上边
如果不写文档声明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式后，浏览器解析页面会导致页面无法正常显示，为了避免进入该模式，一定要写文档声明-->
<!DOCTYPE html>
<!--
”en”代表英语，”zh-CN”代表中文
html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中
只有两个子标签 head:浏览器设置 body：可视区展示 -->
<html lang="en">
<!-- head标签，标签中的内容不会在网页中直接显示，用来帮助浏览器解析页面 -->
<head>
<!--
meta标签用来设置网页的一些元数据，比如网页的字符集，关键字、简介
常见的字符编码有：gb2312、gbk、unicode、utf-8。
-->
<meta charset="UTF-8">
<!--
viewport 表示设备的屏幕
width属性控制设备的宽度
width=device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 表示网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 浏览器选项卡上的名字 -->
<title>Hello HTML</title>
</head>
<!--
body标签用来设置网页的主体内容，即网页中显示的内容在此标签中编写
-->
<body>
<!-- 在body里的内容都是显示在浏览器的视图区的 -->
<!--
编写代码的过程注意需要编写注释来对代码进行描述，这是为了帮助其他的开发人员阅读代码
-->
</body>
</html>
3.2 注释
快捷方式：ctrl+/
用于给其他开发人员表述代码结构
3.3 块级元素
3.3.1 块级元素的作用
搭建网页结构
3.3.2 块级元素的特点
- 独占一行
- 默认宽度为100%，高度由子元素或内容决定，可通过css指定其宽度
- 可以包含块级元素和行内元素
3.3.3 元素
html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address…
最常用的的是：div、p、h1~h6、ul->li、ol->li、
建议：最好不要将块级元素嵌套在行内元素中，否则块级元素会将行内元素顶到一行，会造成行内元素也独占一行的错觉
| 元素 | 作用 | 已有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 |
在不支持Html5的浏览器中，浏览器无法识别Html5新增标签，所以默认将这些标签设置为行内元素，为了兼容性，需要将这些元素设置为块级元素（使用display属性）
| H5新增的语义化标签 | 作用 | 意义 |
|---|---|---|
| header | 头部（不限定页面中该元素个数） | 具有引导和导航作用的结构元素，可以包含标题、搜索栏或logo等 |
| footer | 尾部（不限定页面中该元素个数） | 作为其上层父级内容区块或是一个根区块的脚注 |
| nav | 导航栏 | 用作页面导航的链接组，跳转到其他页面或当前页面的而其他部分 |
| article | 文档 | 可以独自被外部引用的内容，也可以嵌套使用，例如博客，文章等 |
| section | 区块 | 用来做结构划分 |
| aside | 附属信息 | 定义其所处内容之外的内容，例如对当前页面或主要内容相关的引用等 |
| address | 联系信息 | 包括文档作者或文档维护者名字，网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息等等 |
| figure& figcaption | 元素的组合 | 表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，多用于文档中插图的图像 |
| details | 标识该元素内部的子元素可以被展开,收缩显示的元素，拥有open和summary属性，open默认为false，表示里面子元素被收缩，summary为标题信息，默认为详情二字，可以更改 |
3.4 行内元素
3.4.1 行内元素的作用
在结构中填充网页内容
3.4.2 行内元素的特点
- 与其他行内元素共享一行
- 宽高由自身决定
- 不可以通过css指定其宽度
- 行内元素中相对块级元素，只能包含行内元素
3.4.3 元素
span、a、img、strong、b、i、em、sub、sup…
特殊的行内元素（置换元素）：img和input自带宽高，可以设置宽高
3.5 块级元素和行内元素的区别（高频面试题 80%）
- 块级元素独占一行，行内元素共享一行
- 块级元素可以通过css设置宽高，行内元素不可以（若想给行内元素设置宽高，通过CSS将行内元素的display属性设置为inline-block或者block）
- 块级元素元素可以包含行内元素和块级元素，行内元素只能包含行内元素
4. 相对路径和绝对路径
4.1 相对路径
.代表当前目录(当前文件所属的文件夹目录)
./可以省略
…代表上级目录(当前文件所属文件夹的父文件夹目录)
…/不可以省略
4.2 绝对路径
远程路径 http://ip:端口/项目/文件
本地路径 file://d://briup/2htmlcss/day02/1-box.html
例如：山西省太原市尖草坪区xxx号3栋201
5. 基础标签的使用
- a标签
跳转链接标签
<a href="https://img2.baidu.com/it/u=552848653,3304151944&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500"></a>
属性
href：设置跳转路径（相对路径、绝对路径 和URL）
target：决定跳转页面的打开位置
-self 在当前窗口中打开
-blank 在新窗口打开
注意点
- a标签可以让文字和图片被点击
- a标签必须有href属性
- a标签href属性指定URL地址时，必须在地址前面加上http://或者https://
- img标签
显示图片标签
<img src="" alt="由于网络原因，图片加载失败" width="150" title="可爱图片">
属性
src：设置一个图片的路径（绝对路径、相对路径，最好使用相对路径）
alt：当图片不能显示时，对图片的描述
width：设置图片的宽度
height：设置图片的高度
title：当鼠标悬停时，弹出的描述框中显示的内容
注意点
-
px 单位名称为像素，相对长度单位，像素px是相对于显示器屏幕分辨率而言的
-
如果不设置img标签的宽度和高度，那么图片就会按照默认的样式显示，如果设置了宽高，img就会按照设置的宽高来显示。
-
只需要设置图片的宽或高，自适应本身比例，若同时设置两个属性，则图片本身比例会被破坏，图片可能会失真
-
一般除了自适应的页面，不建议设置width和height
- p标签
段落元素标签
<p> p标签中的文字会独占一行，且段与段之间会有默认间距（16px的上下margin）</p>
注意点
p标签中的文字会独占一行，且段与段之间会有默认间距（16px的上下margin）
- h标签
标题标签
有六级标题标签，h1~h6，在显示效果上，h1最大，h6最小
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
注意点
- h1最重要，表示一个网页中的主要内容，h2~h6重要性依次降低
- 对于搜索引擎来说，h1的重要性仅仅次于title，搜索引擎检索完title会立即检索h1中的内容
- 一个页面最好只写一个h1标签
- 一般的页面中，我们只使用h1 h2 h3，其他的基本不用
- br标签
换行标签
<br>
注意点
-
br标签是一个自结束标签
-
br标签的语义是不另起一个段落换行, 而在企业开发中一般情况下需要换行都是因为需要另起一个段落, 所以在企业开发中很少使用br标签
-hr标签
分割线标签
<hr>
-base标签
统一当前页面中a标签中的页面的打开方式
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<base target="_blank">
</head>
<body>
<a href="https://www.baidu.com" target="_self">百度</a>
<a href="https://www.baidu.com">百度</a>
</body>
注意点
- 必须写在head标签中
- 优先a标签中设置的页面打开方式
-假链接
点击后不需要跳转的的链接称为假链接
<a href="#">回到顶部</a>
<a href="javascript:void">点我啊</a>
-锚点
通过锚点找到对应id，跳转到对应位置
<a href="#center">跳转到中部</a>
<!-- 通过锚点跳转到其他页面的相对应位置 -->
<a href="04-h1-h6.html#h666">跳转到其他页面</a>
<div>我是第1div</div>
<div>我是第2div</div>
<div>我是第3div</div>
<div>我是第4div</div>
<div>我是第5div</div>
<div>我是第6div</div>
<div>我是第7div</div>
<div>我是第8div</div>
<div>我是第9div</div>
<div>我是第10div</div>
<div>我是第11div</div>
<div>我是第12div</div>
<div>我是第13div</div>
<div id="center">我是中部</div>
<div>我是第14div</div>
<div>我是第15div</div>
<div>我是第16div</div>
<div>我是第17div</div>
<div>我是第18div</div>
<div>我是第19div</div>
<div>我是第20div</div>
<div>我是第21div</div>
<div>我是第22div</div>
<div>我是第23div</div>
<div>我是第24div</div>
<div>我是第25div</div>
-video标签（Html5新增标签）
播放视频
<video src=""></video>
<!--
不同的视频格式
若浏览器不支持第一种视频播放格式，会依次向下尝试播放，直到支持播放为止
-->
<video>
<source src="" type="video/webm"></source>
<source src="" type="video/mp4"></source>
<source src="" type="video/ogg"></source>
</video>
属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 加载进页面后自动播放视频 |
| controls | controls | 显示控件，比如播放按钮、控制条 |
| loop | loop | 视频播放完毕之后循环播放，一般用于做广告视频 |
| muted | muted | 静音播放视频 |
| poster | URL | 视频没有播放之前或者下载视频时显示的占位图片 |
| preload | preload | 视频在页面加载时进行加载，并准备好播放，若使用 “autoplay”，该属性忽略 |
| src | url | 需要播放的视频地址 |
| width | px | 设置视频播放器的宽度 |
| height | px | 设置视频播放器的高度 |
注意点
- 五大浏览器都不愿意支持别人的视频格式，因此没有任何一种视频格式是所有的浏览器都支持的
- 通过video标签播放视频有一个前提条件,，就是浏览器必须支持HTML5标签, 否则无法播放
- 老的浏览器是不支持HTML5标签的, 为了让这些浏览器能够使用video标签来播放视频，我们可以使用JS的框架（html5media）来实现
- 在不同浏览器中autoplay的效果不一样，例如在火狐中一加载进页面就会自动播放，但是在谷歌需要搭配muted属性才会自动播放
-audio标签（Html5新增标签）
播放音频
<audio src=""></audio>
<audio>
<source src="" type="">
</audio>
属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 音频在加载进页面后马上播放 |
| controls | controls | 显示控件，比如播放按钮，、控制条 |
| loop | loop | 音频播放完毕之后循环播放 |
| muted | muted | 静音播放音频 |
| preload | preload | 音频在页面加载时进行加载，并准备好播放，若使用 “autoplay”，该属性被忽略 |
| src | url | 音频的 URL地址 |
注意点
- audio标签的使用和video标签的使用基本一样，video中的width、height和poster属性不能使用
-字符实体标签
在Html中，有些字符是预留的，使用这些字符浏览器会误认为他们是标签，因此我们需要使用空格字符实体达到我们想要实现的效果，注意在实体名称后需要加上英文分号（;）
例如：在代码中，无论出现多个空格或者换行，浏览器都会将其解析为一个空格，若我们想要一定的空白位置可以使用空格字符实体达到我们想要实现的效果。
<p>此处为 空白</p> <!-- 实现 此处为 空白 -->
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 |   |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ’ | 撇号 | &apos (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | &euro | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | &trade | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
