2020 June 09 HTML与CSS

HTML第一篇：HTML简介、HTML元素

走进前端开发

网站与网页

网站和网页的关系？
1. 一个网站有n个网页组成（n>1）
什么是网页：
1. 上网浏览的页面
怎么浏览网页
1. 浏览器（PC电脑、移动设备）
2. 比如：IE、Google Chrome、360浏览器、UC浏览器等
网页的显示过程
1. 打开浏览器->输入网址->回车
  1. 浏览器就相当于客户端,输入要请求的URL
  2. 回车：就是发送网络请求，向服务器发送请求
  3. 服务器将网页（HTML+CSS+JS代码）数据返回给浏览器
  4. 浏览器拿到网页数据展示出来
  5. 因此，这就是为什么我们写的web代码要上传到服务器，然后通过浏览器打开的原因
2. 服务器：
  1. 一台配置比较高的、24小时不断的电脑
  2. 实时为客户提供服务（比如查找数据）
  3. 总：为客户的提供各种数据服务的机器
  4. 数据：网页、图片、音频、视频、文本等。
缓存技术
1. 现象：在浏览网页过程中，再次显示同一张图片会比首次显示快很多
2. 原因：浏览器显示图片过程中使用了缓存（cache）技术
3. 好处：
  1. 减少网络请求次数
  2. 节省用户流量
  3. 加快网页响应速度
  4. 提升用户体验
常用快捷键：
1. F5: 刷新
2. F12: 检查代码
网页从无到显示的过程：
1. 前端工程师开发网站项目
2. 将网站项目上传部署到服务器
3. 用户通过浏览器、客户端访问网址，就可以查看网页
网页的组成
1. HTML：网页的内容结构
2. CSS：网页的视觉体验
3. JavaScript：网页的交互处理

浏览器内核

浏览器最核心的部分是渲染引擎（Rendering Engine），一般也称为浏览器内核
1. 渲染引擎：将HTML、CSS、JS代码渲染成画面展示给用户。
2. 负责解析网页语法，并渲染（显示）网页。
3. 不同的浏览器内核有不同的解析、渲染规则，所以同一网页在不同内核的浏览器中的渲染效果也可能不同
常见的浏览器内核：
1. Trident：IE、360安全浏览器、360极速浏览器、搜狗高速浏览器、百度浏览器、UC浏览器
2. Gecko： Mozilia Firefox
3. Presto->Blink: Opera(之前是Presto内核，后来换成Blink内核)
4. Webkit：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
5. Webkit->Blink:Google Chrome
建议：
1. 前端工程师需要特别关注的浏览器有：
  1. Google Chrome、Mozilia Firefox（火狐）、Opera（欧朋）、Safari、IE
2. 建议使用Google Chrome浏览器为默认浏览器，功能强大、快速稳定
  1. 作为前端开发工程师，不建议使用360、qq、搜狗等此类浏览器
3. 众多浏览器中，让开发者发毛次数最多的浏览器是IE浏览器
  1. 因为它最独特
  2. 不过从IE8.0版本开始逐渐正常起来
如何查找一个HTML元素、CSS属性支撑哪些浏览器以及该浏览器的版本？
1. Can I use 查询

浏览器调试技巧总结

如何快速进入代码检查？
1. 在当前网页点击F12，进入代码检查
如何快速定位一个网页上的某个元素，在代码检查中的位置？
1. 进入代码检查，切换进Elements模块
2. 点击左上角的方块箭头，然后在网页中点击你想找的元素，下面“代码检查”会自动定位。
3. 在“代码检查”中右击可以将该元素删除
如何在网页中快速筛查当前页面哪些地方用了某种特殊HTML元素？
1. 进入代码检查，切换进Elements模块
2. 右边小窗口，选择Styles（点击左边Elements中的任意一个元素，右边Styles显示该元素设置的所有css属性），点击小窗口右上角的“+”
3. 比如：筛查当前网页的所有div元素，则添加一个div特有样式：

HTML简介

HTML 文件
1. HTML文件的扩展名是.htm/.html
  1. 因历史遗留问题，Win95、Win98系统的文件拓展名不能超过3字符，所以使用.htm
2. 一般我们也可以称html文件为网页文件
什么是HTML
1. HTML是用来描述网页的内容和结构，由浏览器负责解析HTML转换成具体的图文界面。
2. 比如浏览器会将左边的HTML代码转换成右边的网页界面
3. HTML的全程是：Hyper Text Markup Launguage，超文本标记语言
为什么叫做超文本标记语言？
1. 标记语言（Markup Launguage）：
  1. 由无数个标记（标签、tag）组成(标记:<…>)
  2. 由标签和内容组成的称为元素
  3. 一般的说法：head元素、<head>标签、img元素、<img>标签
2. 超文本（Hyper Text）：
  1. 页面可以包含图片、链接、甚至音乐、视频等非文字元素
  2. 即：用文本表达出超出文本表达的内容。

常用元素

HTML提供了大量的元素，每一个元素都有特定的用途，保证了网页的丰富多样性

 区块：div
 区分：span
 文本：p、h1-h6、em、dt、dd
 表格：table、tbody、thead、tr、td、th、tfoot、caption
 表单：form、input、label、textarea、select
 链接：a
 图片：img
 文档：html、head、title、body、meta
 列表：ul、ol、li、diside、footer、nav
 其他：br、hr、iframe
 结构：header、section、a、strong、pre、adress、q、blockquote、cite、code

书写格式
1. 标签对：（比如：html、head、title、body、div、ul等）
  1. 写法：<元素名>具体内容</元素名>
2. 单标签：（比如： img、meta、br、input）
  1. 写法：<元素名> 或者 <元素名/>
  2. 建议统一采用<元素名> 写法即可，不需要再加后面的斜杠/
3. 每一种元素的书写格式是固定的，不能颠倒书写形式,下面都是错误写法
```
 <div/> 
 <img></img>
```
元素嵌套元素
1. 一个元素里面可以嵌套其他元素
```
 <div>
     <span></span>
     <br>
 </div> 
```
2. div是span的父元素，span是div的子元素
3. br与span是兄弟元素，同一个父元素的元素称为兄弟元素
4. 元素嵌套的意义是什么？
  1. 把多个功能相似的、临近的元素包装成一个整体来使用，方便对他们进行归类、统一操作
  2. 就是封装，把某一块封装成一个整体的思想
元素的属性
1. 每一个元素都可以拥有自己的属性，属性可以增强元素的功能
  1. 书写形式： <起始标签属性1=“属性值” 属性2....>
2. 举例：
```
 <meta charset="UTF-8">
 <div class="xxx" style="background: red">xxxxxxx</div>
```
3. 属性名都是小写，而且是无序的，谁先谁后不影响
4. 属性值可以是双引号、单引号括住，也可以省略引号，建议统一使用双引号
5. 有些属性是公共的，每一个元素都可以设置
  1. 比如：class、id、title、lang属性
6. 有些属性是元素特有的，不是每一个元素都可以设置
  1. 比如mata元素的charset属性
注释：
1. 用来解释某段代码的具体含义：
  1. 格式：
HTML的发展史
1. 1993 HTML第一版：只是一些草案，每个浏览器都可以有自己特定的标准
2. 1995 HTML 2.0: 网景（Netscape）和微软（Microsoft）上演浏览器大战，因为浏览器标准不一致，web开发者深受其害。
3. 1997 HTML 3.2 HTML 4.0 : W3C（World Wide Web Consortium）组织，开始制定发布HTML标准
  1. 全世界所有浏览器都必须统一遵守W3C标准
4. 1999 HTML 4.01 : 从HTML 4.01开始，HTML标准趋于稳定
5. 2000 XHTML 1.0: XHTML是语法更为严格的HTML规范，是严格版的HTML 4.01
6. 2014 HTML 5.0: HTML5 是一个全新的HTML标准，优势极其明显
  1. H5能更好的支持移动端，性能更好，用户体验更好
  2. 增强了对游戏、多媒体等领域的支撑
  3. 代码更加规范简洁
  4. 兼容旧版本，也废弃一些旧特性
HTML5 官方文档
1. 官方文档才是最权威的资料
  1. https://www.w3.org
2. 国内教程
  1. https://www.w3school.com.cn/
  2. https://www.runoob.com/

HTML元素

HTML的基本元素

查看每一个网页的代码，可以发现，每一个网页都包含下面部分：

 <!DOCTYPE html>
 <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>Document</title>
     </head>
        
     <body>
     </body>
 </html>

文档声明

<!DOCTYPE html>
1. HTML文档声明，告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档
2. 必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题
3. HTML5的文档声明比HTML4.01、XHTML 1.0简洁很多

html元素

html元素是HTML文档的根元素，一个文档只能有一个，其他所有元素都是他的后代元素
W3C标准建议为html元素增加一个lang属性，作用是
1. 帮助语音合成工具确定要使用的发音
2. 帮助翻译工具确定要使用的翻译规则
  1. lang="en" 告诉浏览器：这个HTML文档的语言是英文，所以chrome浏览器的右上角翻译提示，翻译中文
  2. lang="zh" 表示这个HTML文档的语言是中文

head元素

head元素里面的内容是一些元数据（描述数据的数据）
1. 一般用于描述网页的各种信息，比如字符编码、网页标题、网页图标
title元素
1. 网页的标题
meta元素
1. 可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，不设置或者设置错误会导致乱码
2. 一般使用UTF-8编码，涵盖了世界上几乎所有的文字
3. 在HTML5之前，meta标签的写法也是比较复杂的
```
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
```
以下列出的元素大多数情况下都是在head元素的内部使用
```
 meta
 title
 style
 link
 base
 script
 noscript
```

body元素

body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构

h、p、strong元素

h元素
1. 表示网页的标题
2. h1~h6共规定了6个等级的标题
p元素
1. 表示文章中的一个段落（paragraph）
strong元素
1. 用于强调某些文本，粗体的显示效果

举例使用：

 <body>
     <h1>国庆节</h1>
     <p>国庆节是由一个国家制定的用来纪念国家本身的<strong>法定假日</strong> </p>
     <p>虽然绝大部分国家都有类似的纪念日，但是由于复杂的政治关系，部分国家的这一节日不能够称为国庆日</p>
     <p>而中国古代把皇帝即位、诞辰称为“国庆”。</p>
 </body>

h元素和SEO
1. h元素有助于网站的SEO(Search Engine Optimization)优化，可以促进关键词排名
2. 建议在网页中最多只有1个h1元素
3. 乱用h元素不仅不会给网站带来好的权重，同时也有可能被搜索引擎认为作弊，被排除掉
4. SEO就是当你搜索一个关键字的时候，谁的网站排在前面

pre元素

在默认情况下，HTML代码中的大多数空格都会被浏览器压缩，比如一段连续的空格会被压缩成1个空格
如果想要完全保留HTML代码中的空格、换行，可以使用pre元素

举例：

 <!-- p：多个空格、换行会压缩成一个空格 -->
 <p>
     哈哈哈哈哈        呵呵呵呵
     mmmm
 </p>
 <!-- pre： 代码中的空格、换行会保留 -->
 <pre>
 哈哈哈哈哈        呵呵呵呵
 mmmm
 </pre>

效果

字符实体（Character Entity）

HTML中有一些字符是预留出来做特殊用途的，比如：>、<，不能直接使用
要想在网页中正确的显示这些预留字符，必须使用字符实体，书写格式一般有2种
1. &entity_name; //即：&字符实体名称;
2. $#entity_number; //&#字符实体编号;
字符实体名称与编号都是固定的，如下图

代码示例：

 <!-- < 实体名称为lt，>实体名称为：gt -->
 &lt;div&gt;
 <!--  < 实体编号为60，>实体编号为：62 -->
 &#60;div&#62;
 <!-- 鼠标放到“div元素”时显示： 这是一块"特殊"的内容，非常'精彩' -->
 <div title="这是一块&quot;特殊&quot;的内容，非常'精彩'">div元素</div>

最终结果展示为：<div> <div>

比较常用的有：

 空格：&nbsp;
 大于号：&gt;
 小于号：&lt;
 &：&amp;

code、br元素

code元素
1. 用户显示程序代码
br元素
1. 单标签，表示强制换行