1.HTML与CSS
1.1.什么是HTML？什么是CSS？
HTML是HyperText Markup Language(超文本标记语言)不是编程语言
它不是一种编程语言，而是一种标记语言，用于通知浏览器如何结构你的页面。它能够由一系列HTML元素组合成web开发人员想要的简略或者简单的页面。“超文本”就是指页面内能够蕴含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种标准，一种规范，它通过标记符号来标记要显示的网页中的各个局部。网页文件自身是一种文本文件，通过在文本文件中增加标记符，能够通知浏览器如何显示其中的内容（如：文字如何解决，画面如何安顿，图片如何显示等）。浏览器按程序浏览网页文件，而后依据标记符解释和显示其标记的内容，对书写出错的标记将不指出其谬误，且不进行其解释执行过程，编制者只能通过显示成果来剖析出错起因和出错部位。能够应用.html与.htm作为HTML文件的后缀名（扩展名）
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及以前的版本不反对。
HTML特点
超文本标记语言文档制作不是很简单，但功能强大，反对不同数据格式的文件镶入，这也是万维网 （WWW）流行的起因之一，其次要特点如下：
1.繁难性：超文本标记语言版本升级采纳超集形式，从而更加灵便不便。
2.可扩展性：超文本标记语言的广泛应用带来了增强性能，减少标识符等要求，超文本标记语言采取子类 元素的形式，为零碎扩大带来保障。
3.平台无关性：尽管集体计算机大行其道，但应用MAC等其余机器的大有人在，超文本标记语言能够应用 在宽泛的平台上，这也是万维网（WWW）流行的另一个起因。
4.通用性：另外，HTML是网络的通用语言，一种简略、通用的全置标记语言。它容许网页制作人建设文本与图片相结合的简单页面，这些页面能够被网上任何其他人浏览到，无论应用的是什么类型的电脑或浏览器。
CSS (Cascading Style Sheets) 层叠样式表
是一个用于润饰文档（能够是标记语言HTML，也能够是XML或者SVN）的语言，能够将文档以更优雅的模式出现给用户
1.2.HTML和CSS之间的关系？
- HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，能够蕴含文字、图片、视频等。
CSS款式是体现。就像网页的外衣。比方，题目字体、色彩变动，或为题目退出背景图片、边框等。所有这些用来扭转内容外观的货色称之为体现。
HTML就像是一个人，而CSS就像是衣服和化妆品，用来装璜HTML
1.3.构造，体现，行为？
构造
HTML用于形容页面的构造
体现
CSS用于管制页面中元素的款式
行为
JavaScript用于响应用户操作
2.初识HTML
2.1.开发环境搭建
可用于编写HTML的编译工具有很多
- 记事本：特点：无代码提醒、无代码高亮显示、用户界面不敌对；
- Sublime（举荐）：特点：运行速度快、代码提醒、高亮显示、插件拓展、html 插件emmet、sublime text3 装置emmet插件；
- VSCode（举荐）：特点：丰盛的插件反对、可进行git治理；
- Idea：特点：集成开发工具、相似DW,node,npm...运行速度较慢；
Html是在浏览器上解析执行的，每种浏览器对雷同的Html代码解析可能产生不同的后果，所以咱们须要装置多种支流的浏览器进行兼容性测试；
支流浏览器：Google Chrome（谷歌）、Firefox（火狐）、Opera、Safari、Microsoft Edge。
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、火狐等）可能呈现不同的显示成果。 --><!-- h5的文档申明，申明以后的网页是依照HTML5规范编写的编写网页时肯定要将h5的文档申明写在网页的最上边。 如果不写文档申明，则会导致有些浏览器会进入一个怪异模式，进入怪异模式当前，浏览器解析页面会导致页面无奈失常显示，所以为了防止进入该模式，肯定要写文档申明--><!DOCTYPE html><!-- 属性lang是单词language的缩写，意思是语言，”en”代表英语，”zh-CN”代表中文 --><!-- html根标签，一个页面中有且只有一个根标签，网页中的所有内容都应该写在html根标签中--><!-- 只有两个子标签 head:浏览器设置 body：可视区展现 --><html lang="en"><!-- head标签，该标签中的内容，不会在网页中间接显示，它用来帮忙浏览器解析页面的 --><head> <!-- meta标签用来设置网页的一些元数据，比方网页的字符集，关键字、简介 meta是一个自完结标签，编写一个自完结标签时，能够在开始标签中增加 一个/ --> <!-- 字符编码，浏览器会依据字符编码进行解析 常见的字符编码有：gb2312、gbk、unicode、utf-8。 --> <meta charset="UTF-8"> <!-- 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>Hello HTML</title></head><!-- body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写--><body> <!-- 在body里的内容都是显示在浏览器的视图区的 --> <!-- 在这个构造中，能够来编写HTML的正文正文中的内容，不会在页面中显示，然而能够在源码中查看咱们能够通 过编写正文来对代码进行形容，从而帮忙其余的开发人员工作,肯定要养成良好的编写正文的习惯，然而正文一 定要简单明了 --></body></html>HTML文档（ HTML document）
DOCTYPE
在Html十分年老的时候（1991、2年左右），doctype是用来作为一组规定的链接，HTML页面必须遵循这些规定能力被认为是好的HTML，这些规定会用来检测网页是不是存在问题。然而，这些年没有人真正的关怀doctype，他们只是一个历史产物必须蕴含在页面中。严格的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">宽松的文档类型
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">H5文档类型（ HTML document）阐明该文档为Html5文档
<!DOCTYPE html>HTML的根元素，用来蕴含HTML文档的所有元素，所有的html标签应该位于html标签外部
<html>示意html的头部，head外部标签次要用于设置或者导入内部文件，个别不间接显示在浏览器视口中，罕用的子标签为 meta 、title、link、script，别离示意元信息设定、文档题目、css、js
编码：
utf-8 万国码
GBK 国标码
Big5 繁体字 （环球新闻导报社）
解码：浏览器
<head>用来申明以后文档的编码方式为utf-8
<meta charset="utf-8">用来申明以后文档的题目，题目将会呈现在浏览器的选项卡中
<title>示意html的体部，其外部次要放网页内容，其内容会显示到浏览器视口中，所有想要显示在浏览器中的元素都被蕴含在该元素中。
<body>html4文档构造：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <style type="text/css"></style> <script type="text/javascript"></script> <title>Document</title></head><body></body></html>2.3.语法
2.3.1.正文
html中只有一种正文，即 <!--正文内容-->
记录编程思路，解释阐明业务性能
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：形容信息
<div title="div1">div1</div>id：惟一标识
<div id="div1">div1</div>class：标识一类元素
<div class="box1">box1</div>style 款式
<div style="color: red;">我是一个div</div>2.3.3.其余
空白
在文档中无论呈现多少个空白或者换行，浏览器都解析为一个空白
实体
在HTML中，某些字符是预留的。例如：不能应用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果心愿正确地显示预留字符，咱们必须在 HTML 源代码中应用字符实体（character entities)，实体以&符开始，以;结尾。以下是常见的实体
| 显示后果 | 形容 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 |   | ||
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | &apos (IE不反对) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| 欧元（euro） | &euro | ||
| § | 大节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | &trade | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
2.4.块级元素
作用：搭建网页构造
特点：
- 独占一行空间
- 默认宽度为100%
- 高度由子元素或内容决定
- 能够通过css指定其宽度
元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...
倡议：不要将块级元素嵌套在行内元素中。
| 元素 | 作用 | 已有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> |
2.4.行内元素
作用：在构造中填充网页内容
特点：
- 与其余行内元素共享一行空间
- 宽高由本身决定
- 因为不用来搭建网页构造，所以也无需通过css指定其宽度
- 行内元素中不能够嵌套块元素
元素：span、a、img、strong、b、i、em、sub、sup...
3.根底标签的应用
- h标签
h标签 题目标签
在HTML中，一共有六级题目标签
h1~h6
在显示成果上，h1最大，h6最小，然而文字的大小咱们并不关怀
6级题目中，h1的最总要，示意一个网页中的次要内容，h2~h6重要性顺次升高，对于搜索引擎来说，
h1的重要性仅仅次于title，搜索引擎检索完title会立刻查看h1中的内容
h1标签十分重要，它会影响到页面在搜索引擎中的排名，一个页面最好只写一个h1标签
个别的页面中，咱们只应用h1 h2 h3，其余的根本不必
<h1>这是一个h1标签</h1>- p标签
段落标签，段落标签用于示意内容中的一个自然段
应用p标签来示意一个段落
p标签中的文字，会独占一行，并且段与段之间会有一个间距
<p> 段落标签，段落"标签"用于示意内容中的一个自然段,<br><hr> 应用p标签来示意一个段落, p标签中的文字，会独占一行，并且段与段之间会有一个间距</p>- br标签
br标签 示意换行标签 br标签是一个自完结标签 br标签的语义是不另起一个段落换行, 而在企业开发中个别状况下须要换行都是因为须要另起一个段落, 所以在企业开发中很少应用br标签
-hr标签
hr标签 能够在页面中生成一个分割线
- 字符实体
空格 < < > > “ " & & ‘ '- img标签
img标签 通知浏览器要显示一张图片
img标签的格局 <img class="lazy" referrerpolicy="no-referrer" data-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标签不会独占一行
- a标签
a标签的作用 用于管制页面与页面之间跳转的
a标签的格局
<a href="指定须要跳转的指标界面">须要展示给用户查看的内容</a><a href="https://www.baidu.com" target="_blank" title="百度">百度一下</a>a标签中还有一个叫做target的属性，这个属性专门用于管制如何跳转
self:用于以后的选项卡中进行跳转，也就是不新建页面跳转，默认就是_self_blank:用于在新的选项卡中进行跳转，也就是新建页面跳转a标签也有一个title属性，成果和img标签的title相似
留神点:
1.a标签不仅能够让文字点击，也能够让图片被点击
2.一个a标签必须有一个href属性，否则a标签不晓得要跳转到什么中央
3.如果通过a标签href属性指定一个URL地址，那么必须在地址后面加上http://或者https://
除了URL地址，还能够指定一个本地地址
- 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的内容 |
| ? | 和浏览器地址操作一样，第一个参数合乎是？ |
| & | 其余参数符号是& |
- base标签
base标签就是专门用来对立指定以后页面中所有的a标签须要如何关上
留神点 1.base标签必须要写在head标签之间 2.如果既在base中指定了target又在a标签中指定了target，那么浏览器会依照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>-假链接
什么是假链接？
就是点击之后不须要跳转的链接咱们称之为假链接
在企业开发初期，其余的界面都没有实现，所以不晓得跳转到什么中央，这个时候先用假链接来代替，我的项目实现后再换成真链接
假链接的格局
1.# 间接回到页面的顶部2.javascript: 不会主动回到页面的顶部<a href="#">回到顶部</a><a href="javascript:">点我啊</a>- 锚点
1.要想通过a标签跳转到指定的地位, 那么必须通知a标签一个举世无双的身份证号码, 这样a标签能力在以后界面中找到须要跳转到的指标地位
2.如何和HTML中的标签绑定一个举世无双的身份证号码呢?
在HTML中, 每一个标签都有一个名称叫做id的属性, 这个属性就是用来给标签指定一个举世无双的身份证号码的
3.所以要想实现通过a标签跳转到指定的地位分为两步
3.1给指标地位的标签增加一个id属性, 而后指定一个举世无双的值
3.2通知a标签你须要跳转到的指标标签对应的举世无双的身份证号码是多少
格局:
<a href="#center">跳转</a><br><br><br><br><br><br><br><br><p id="center">我是中部</p><br><br><br><br><br><br><br><br>留神点:
1.通过咱们的a标签跳转到指定的地位, 是没有适度动画的, 是间接一下子就跳转到了指定地位2.a标签除了能够跳转到以后界面的指定地位以外, 还能够在跳转到其它界面的时候间接跳转到其它界面的指定地位格局://a.html<a href="b.html#bottom" target="_blank">跳转</a>//b.html<p id="bottom">找到我</p>- em
意为强调，突出文章重点
- strong
意为强调，内容更为有用
- b
加粗
- i
斜体
- u
下划线
- div
div是一个无语义的标签，就是一个纯正的块元素，并且不会为它里边的元素设置任何的默认款式，div元素次要用来进行页面根本构造的搭建
<div class="header"></div><div class="content"></div><div class="footer"></div>- span
span没有任何的语义，span标签专门用来选中文字，而后为文字来设置款式
- video(H5新增)
作用：播放视频
webm 网页中专用的视频格式
格局:<video src=""></video>video标签的属性
src:通知video标签须要播放的视频地址
autoplay:用于通知video标签是否须要自动播放视频
controls:用于通知video标签是否须要管制条
poster:用于通知video标签视频没有播放之前显示的占位图片
loop:个别用于做广告视频，用于通知video标签视频播放结束之后是否须要循环播放
muted:静音
width/height: 和img标签中的截然不同
video的第二种格局
1.格局:
<video> <source src="" type=""></source> <source src="" type=""></source></video>2.第二种格局存在的意义:
因为视频数据十分十分的重要, 所以五大浏览器厂商都不违心反对他人的视频格式, 所以导致了没有一种视频格式是所有浏览器都反对的这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格局video标签的第二种格局存在的意义就是为了解决浏览器适配问题video 元素反对三种视频格式, 咱们能够把这三种格局都通过source标签指定给video标签, 那么当前当浏览器播放视频时它就会从这三种中抉择一种本人反对的格局来播放3.留神点:
3.1以后通过video标签的第二种格局尽管可能指定所有浏览器都反对的视频格式, 然而想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须反对HTML5标签, 否则同样无奈播放3.2在过来的一些浏览器是不反对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>- audio(H5新增)
作用: 播放音频
格局:
<audio src=""></audio><audio> <source src="" type=""></audio>留神点:
audio标签的应用和video标签的应用根本一样, video中可能应用的属性在audio标签中大部分都可能应用, 并且性能都一样只不过有3个属性不能用, height/width/posterHTML5新增语义化标签
除语义外，与div雷同。新的标签带来的是网页布局的扭转及晋升对搜索引擎的敌对。
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; }
然而上述办法有局限性，比方在IE8以及更早版本，是无奈对未知元素进行款式的润饰，因而须要：图
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元素，浏览器会提供默认文字(详细信息)以供 单击。