学习HTML之前必须了解的基础

帖子包含非法词组，不能发布

一、网络基础部分
1.1浏览器与服务器
浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。浏览器在访问页面时通过浏览器的内核解析页面。浏览器的内核大致有这么几种：IE的trident内核，Firefox的gecko内核，Safari的webkit内核，Opera以前的presto内核、现在改用Goolge Chrome的blink内核，以及Chrome的Blink内核。
服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。
1.2浏览器与服务器的交互
当我们在浏览器的地址栏上面输入内容之后，浏览器会发送请求（Request）到服务器，服务器接收并处理以后，将讲求的页面读取出来返回到浏览器，浏览器接收到响应（Response）回来的内容以后，浏览器的内核将内容渲染成一个完整的页面，并且显示出来。
1.3http协议
http协议：请求报文，响应报文，URL.
URL包括：协议://服务器的ip地址:端口号/请求的页面文件。
1.4一次完整的HTTP事务的过程
基本流程：域名解析→ 发起TCP的3次握手→ 建立TCP连接后发起http请求→服务器端响应http请求，浏览器得到html代码→浏览器解析html代码，并请求html代码中的资源→浏览器对页面进行渲染呈现给用户。
1.5SEO
SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过对网站内部调整优化及站外优化，使网站满足搜索引擎收录排名需求，在搜索引擎中提高关键词排名，从而把精准用户带到网站，获得免费流量，产生直接销售或品牌推广。友好的html页面有利于SEO，
二、HTML部分
1.1定义 Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。
1.2作用：通过标签给页面加上语义。
1.3固定结构：






2.1标签
html的学习主要是学会怎样用标签定义页面的语义、搭建页面结构。html标签分为三种：行内的（一行可以放多个，宽高由内容决定）、块级的（独占一行，默认宽度一整行，高度由内容决定）、没有语义的。
行内元素：a、b、span、img、input、strong、select、label、em、button、textarea。
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote。
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img。
2.2路径
绝对路径：带有盘符的路径。
相对路径;一个文件相对另一个文件的路径。
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。
2.3比较实用的标签
（1）！DOCTYPE；
如果页面不设置声明文档，浏览器会默认开启怪异模式（quirks mode）—— 一些网页浏览器为了维持对较旧的网页设计的向后兼容性，使用有别于严格遵循万维网联盟（W3C）与互联网工程任务组（IETF）标准而设计的“标准模式”，导致页面无法正常显示。
（2）meta标签
.Description：可以描述页面，可以用来使百度程序（网络爬虫）来收录关键信息，以此提高页面的排名。
如：



.Keywords：关键词，可以用来提高页。面的关健词的比重（前升排名的一种方式。）
如：

.字符集（编码格式）：
如：

（3）列表标签
无序列表：定义一组没有排量顺序的数据。

有序列表：定义一组有顺序的数据。

自定义列表：

（4）表格标签：早期用来页面布局










（5）表单：收集信息
form>
...
  input 元素/select元素
...

其中input包括：
文本框
密码框
单选框
复选框
按钮
提交按钮
重置按钮
select元素：下拉列表
实例
 

Volvo
Saab
Fiat
Audi

（6）img标签：引入图片

（7）a标签(Anchor)：锚
作用：可以在一个页面跳转到另一个页面。
代码：

注意：在a标签之内必须要写上文字，如果没有，那么这个标签在页面上找不到。
a标签的其它用法：
① 可以不跳转（跳转到当前页面）href=”#”
②可以跳转到另外的页面。
③可以在当前页面进行定位。
A.设置a标签的href属性为“#id名”，
B.在页面的指定位置加入一个目标标签（可以是任意标签）
C.必须给这个标签设置一个id名：

这是目标

④在跳转的页面进行定位。
⑤可以进行下载。（强烈不推荐使用）
（8）没有语义的标签div/span

特点：默认占一整行，并且一行里面只能显示一个。（块级元素）

特点：大小由内容来决定，并且一行里面可以显示多个。（行内元素）
三 总结
html即超文本标记语言，用来给页面的内容添加语义，用来确定html页面的结构。所以写html代码时，页面结构必须清晰，语义必须规范。标签语义化，每个html标签都有属于自己的语义，有使用标签时候要一定要了解每个标签的语义，合理使用。在合适的地方使用合适的标签。这样一来将来网络爬虫进入页面之后可以很方便的得到页面的重要信息，对搜索引擎的友好更有利于提升网页排名；l页面是直接面对用户，良好的页面能提升用户体验；对于我们本身来说，也利于代码的可读、维护、提高开发效率。