他的回复:
华为云ID：SavageGrowth # WEB简史 ## Web的诞生 **Internet** 中文正式译名为因特网，又叫做国际互联网，是由所有使用公共语言相互通信的计算机连接而组成的全球网络 **web的历史** **起源**：20世纪60年代磨，正好处于冷战时期，当时美国军方为了自己的计算机网络在受到攻击时，即使部分网络被摧毁，其余部分仍能够保持通信练习，便由美国国防部的高级研究计划局（ARPA）建设了一个军用网，叫做“阿帕网”。阿帕网于1969年正式启动柜，当时仅仅连接了4台计算机，供科学家们进行计算机联网实验用。这个就是因特网的前身 **web的发展：**Internet的发展引起了商家的极大兴趣。1992年美国IBM、MCI、MERIF三家公司联合组建了一个高级网络服务公司(ANS)，建立了一个新的网络，叫做ANSnet，从而使Internet开始走向商业化 ## Web浏览器 浏览器是一个显示网站服务器或者档案系统内HTML文件，并让用户与这些文件互动的软件 浏览器的内核 浏览器内核负责对网页语法进行解释，浏览器内核也就是浏览器所采用的渲染引擎 渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息 #### 主流浏览器的评判标准 1. 在市场上有一定的市场份额 2. 有自己独立开发的浏览器内核 #### 主流浏览器及其内核 和 对应的浏览器厂商 | **主流浏览器** | **浏览器厂商** | **浏览器内核** | | :------------: | :------------: | :--------------------------------: | | IE浏览器 | 微软公司 | Trident内核 | | Chrome浏览器 | Google公司 | 先采用Webkit内核 后来换成Blink内核 | | Safari浏览器 | 苹果公司 | Webkit内核 | | Opera浏览器 | Opera公司 | Presto内核 | | Firefox浏览器 | Mozilla公司 | Gecko内核 | webkit内核是谷歌公司和苹果公司共同研发的，所以safari浏览器的内核是webkit 而blink内核是谷歌在webkit的基础上升级的内核，所以chrome使用的是blink内核 ## Web服务器 服务器（我们也称之为主机）是提供计算机服务器的设备，它也是一台计算机。在网络环境下，根据服务器提供的服务类型不同，服务器又分为文件服务器、数据库服务器、应用程序服务器、Web服务器 Web服务器一般指网站服务器，是指驻留于因特网某种类型计算机的程序，只要是提供网上信息浏览服务。Web服务器可以解析HTTP协议，当Web服务器接收到http请求时，会返回一个HTPP响应，这样客户端（浏览器）就可以从服务器上获取网页内容，包括HTML CSS JS 音频 视频 等资源 ## Web开发 web开发主要分为前端开发和后端开发两个部分 前端：侧重于页面的展示 和 与用户的交互 后端：侧重于数据的处理与服务的访问 #### 前端开发三大件 HTML：构成网页的结构和内容 CSS： 决定网页的样式 JavaScript：用于定义网页上的交互，控制网页的行为 # HTML ## HTML的概念 HTML叫做超文本标记语言（HyperText Markup Language),是用来构建网页的一种标记语言 超文本：不仅可以显示文字，还可以显示 图片 链接 音频 视频 等各种类型 标记：是用一些标记符号(也就是一些符号）来定义一些语法规则的，对超文本进行标记的 语言： 是计算机语言 计算机语言是与计算机沟通的桥梁，更具体的说是与浏览器沟通的语言 ## HTML的发展历史 1993年由互联网工程工作小组（IETF )发布工作草案 1995年发布HTML2.0版本 1997年1月14日由W3C发布HTML3.2版本 1997年12月18日由W3C发布HTM L4.◦版本 1999年由W3C发布HTML4.01版本 2000年由W3C发布XHTML1.0版本，它是一种更严格的HTML代码 2014年W3C发布的最新版本HTML5，增加了新的特性，给用户带来了更丰富的交互体验 ### XHTML出现的原因 一开始的HTML规范不是很严格，怎么写都可以，就造成了代码的混乱，而且给浏览器厂商造成了很大的麻烦 代码写的很随意，解析起来就很麻烦，所以后来W3C 制定了XHTML的规范，目的就是严格规范HTML的书写标准 虽然后来发布的HTML5 这个标准要求的就没有XHTML那么严格，但是平时写HTML需要按照最严格的标准去书写 ### XHTML与HTML的不同点 XHTML是可扩展超文本标记语言，是一种更严格、更纯净的HTML语言 X的意思就是可扩展的意思 1. XHTML元素必须被正确的嵌套 2. XHTML元素必须被关闭 3. 标签名必须用小写字母 4. XHTM文档必须拥有根元素:html元素 ### HTML的语义化标签 HTML5中新增了很多语义化标签，不同的HTML标签代表了不同的网页内容 **语义化的特点** - 语义化HTML会使HTML结构变的清晰，有利于代码维护 - 有利于搜索引擎抓取 - 语义化使代码具有可读性 - 语义化会使HTML代码变得更简洁，提高页面加载速度 - 语义化有助于屏幕阅读器等设备的识别 ## HTML文档的基本结构 ### **声明 HTML 文档的文档类型** 在HTML文档的顶部，你需要告诉浏览器你的网页用的 HTML 是哪个版本 HTML 是一个不停进化的语言，大部分浏览器都支持 HTML 的最新标准，也就是 支持HTML5 但是一些陈旧的网页可能使用的是 HTML 的旧版本 所以你需要通过`` 来告诉浏览器你使用的HTML文档是哪个版本的 DOCTYPE 是 document type的简写 文档类型的意思 ```html ``` **一些注意点** 1. 声明 不是 HTML 标签 它只是一个声明 2. 声明必须是 HTML 文档的第一行，位于 标签之前 3. 声明对大小写不敏感,所以你写成小写的 也没有关系 ### 文档的根标签：html标签 接下来，所有的 HTML 代码都必须位于html标签中,html就相当于一个根元素 其中``位于``的后面，``位于网页的结尾。 ### 文档的标题和正文的标签 head body html的结构主要分为两大部分：`head、body` 关于网页的描述都应该放入head标签，网页的内容都应该放入body标签。 比如`link标签、meta标签、title标签`和`style标签`都应该放入head标签。 这是网页结构的一个例子： ```htmlDocument``` ## 标记标签 HTML标签和元素的概念 HTML叫做超文本标记语言,是用来构建网页的一种标记语言 为超文本进行标记的，超文本有 图片 链接 音频 视频 等各种类型 这里就是给华为手机发布会这个文本使用div元素进行标记 ```html华为手机发布会``` **标记标签**也就是我们常说的HTML标签 **元素**:包括HTML标签和标签里面的内容 元素里面的内容 叫做元素内容 ## 标题元素 为了使 网页更具有语义化，我们经常会在页面中用到标题标签 HTML提供了6个等级的网页标题 即`~`的重要性最高 而``的重要性最低 一个HTML文档之中，一般只有一个``标签 **请确保将标签元素只用于网站的标题** 不要仅仅是为了产生粗体或大号的文本而使用标题 搜索引擎会使用网页中的标题,也就是h1元素的内容，为您的网页的结构和内容编制索引 一般用户搜索网页内容的时候，搜索引擎会把用户搜索的内容 与网站的标题进行匹配，从而展示你的网站，所以用标题来呈现文档结构是很重要的 我们应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推 h元素有助于网站的SEO优化，可以促进关键词排名 但是乱用h元素不仅不会给网站带来好的权重，同时有可能会被搜索引擎认为作弊，最后导致k站 ## 段落元素 ``是paragraph的缩写，用于定义一个段落，浏览器会自动在其前后创建一些空白 ``中的文字行数取决于浏览器窗口的高度 ``中的连续空格最终都将解析成一个空格,如果想在段落总添加空格，需要用到 ； ## 结构标签 ### div元素 div元素，也叫division（层）元素，用来划分区域，包围大块内容，但是不具有语义化 div适合作为最通用的页面容器，所以div元素也是 HTML 中出现频率最高的元素。 div是块级元素 ### span元素 span元素是内联标签（也可以说是行内元素） 用在一行文本中，用来修饰文字 ## 链接标签 **链接** 链接是HTML页面非常重要的一环，如果没有链接，每一个HTML页面将会孤独的存在，与其他页面将不会有联系 ### **链接标签a元素** ``标签是anchor的缩写，用于定义网页链接 **链接属性** src属性表示链接的地址，相当于是送货地址，可以是相对路径或者绝对路径 相对路径：以 ./ ../开头的路径 绝对路径： `C:User\...` 从磁盘开始的路径 或者是远程的服务器（图片，网页等）地址 target属性表示点击链接后的打开方式，默认是是 '_self'，表示在当前窗口打开新链接，除此之外，还可以设置成 '_blank' 表示在新的窗口中打开 ```html 文本或图片 ``` **a标签关于样式上的特点** a标签点击过一次之后，就会变颜色，这种好处就是看新闻的时候，点过的新闻链接颜色是和没点过的链接颜色是一样的，这样就知道哪些新闻没看过 **实现所有的a元素的跳转方式为**：在新窗口中打开 但是只有京东的链接在当前的窗口中打开 需要借助`base标签` ```htmlDocument华为 百度 淘宝 京东``` **固定链接** 有时你想为网站添加一个锚点，但后端还没有给你要链接的地址，以使用固定链接# 作为占位符，等后面确定了链接地址，替换就可以了 ```html ``` **空链接** ```html 空链接1 空链接2 ``` 因为空链接的地址不是真正的链接地址，所以点击之后 a元素内容的颜色无变化 空链接的主要作用：通常作为按钮标签来使用，但是现在h5的button元素 已经可以代替空链接了 **a元素可以利用锚点实现网页内部跳转** 锚点同样也可以用来在网页内不同区域的跳转。 设置锚点的href属性值为井号#加上想跳转区域对应的id属性值，这样就可以创建一个内部跳转。 id是用来描述网页元素的一个属性，它的值在整个页面中唯一。 下面是用来创建内部锚点的例子： ```html Contacts p{1}*1000Contacts``` 当用户点击了Contacts链接，页面就会滑动到网页的**Contacts**区域 **a元素可以下载文件** 如果href里面的地址是一个文件或者压缩包，点击这个a元素，会下载这个文件 ### 链接元素base元素 base元素：用于设置页面中所有链接的基准url 和 target属性 base标签一般插入到head标签中使用 关于设置target属性上面已经有例子了 设置所有链接基准的url路径 用下面的案例来理解： 比如页面1地址: `http://www.wangye.com/page1` 页面2地址: `http://www.wangye.com/one/page2` 页面3地址： `http://www.wangye.com/two/page3` 页面4地址： `http://www.wangye.com/three/page4` 我们需要用a链接一个个引入过去会很麻烦 每次都要重复写：`http://www.wangye.com` ```html 页面1 页面2 页面3 页面4 ``` 但是通过base来设置 就很方便,直接设置基准url路径，能实现和上面一样的效果，以后写a标签 它的基准url就是`http://www.wangye.com` ```htmlDocument页面1 页面2 页面3 页面4``` ## 图片元素 img元素用于定义一张图片，属于单标签结构 它有多个属性 **scr：**表示图片的地址，是img元素的必须属性 **alt：** 表示当图片无法正常加载显示时，代替的文本，一般这个文本是描述当前图片的文本 图片的地址可以使用相对路径 也可以 使用绝对路径 alt属性不要省略，目的是为了更好的兼容无图浏览器，图片会提示alt属性内的文字 **title：**设置鼠标放到图片上是，显示的文字 **width height：**在img标签是，还可以通过增加heigth属性和width属性来设置图片的高度和宽度 宽度和高度只要设置一个属性就可以了 还有一个属性会等比例缩放 这样图片就不会失真了 **img元素的注意点** 1. img标签的属性之间部分先后顺序，标签名与属性、属性与属性之间均以空格分开 2. 属性采取键值对的格式 即key = 'value'的格式 属性='属性值' **重点要掌握的** - img标签哪个属性是必须要写的 - img标签中 alt属性和 title属性的区别是什么 ## 列表元素 ### **无序列表** HTML 有一个特定的元素用于创建无序列表unordered lists（缩写 ul）。 无序列表以``开始，中间包含一个或多个``元素，最后以``结尾 ```html面包牛奶鸡蛋``` 可以在ul标签上使用type属性定义图标符号的样式 属性值为： disc 显示点 这个也是无序列表的默认图标符号 属性值为：square 显示方块 属性值为：circle 显示圆 属性值为：none 没有图标符号 ### **有序列表** HTML 有一个特定的元素用于创建有序列表ordered lists（缩写 ol） 有序列表以``开始，中间包含一个或多个``元素，最后以``结尾。 ```html面包牛奶鸡蛋``` 有序列表的前缀通常为数字或字母,默认是数字 ### 自定义列表 使用``标签定义自定义列表,内部可以有多个列表项，每个列表项用``定义标题，用``定义列表项 自定义列表比有序无序列表多了一个功能，能给列表定义标题 ```html江苏南京市南通市福建厦门福州```
