大数据爬虫前奏之Html和Css学习
Html十分钟入门
在整个大数据技术分层中，数据来源之一就是爬虫。而想要爬取更多数据，对Web的学习必不可少。
Web知识主要分三大类，Html和Css、JavaScript、框架。
今天主要讲关于Html的知识
1.Html是什么？
HTML全名是超文本标记语言，Hyper Text Markup Language。它是一门语言，用于文本，其中标记是它的基础。后续大家就可以看到Html主要是各类标记元素嵌套来展示数据。
本身它也有自己的格式，后缀以.hml .htm结束的就是html页面，大家打开浏览器，ctl+s，保存的就是打开网页的html文件。
2.Html怎么用？
<html>
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
body>
html>
2.1排版标签
- 注释
显而易见，注释标签,作为一门编程语言，注释是一定需要的。虽然这门语言只是用来标记，并且展示信息的，但注释功能也必不可少。
- p标签
paragraph，英文单词段落的意思。这里的p就是指的段落，浏览器解析时会自动在段落前后加空格
<p>
段落内容或者其他标签元素，注意html中的元素是可以并列展示或者多层嵌套的。具体参见xml，一样的用法。或者说大家可以想象成俄罗斯套娃，可以无限套，不过可读性和性能起见，一般都会控制嵌套层数。
p>
- br标签
line break就是换行的意思，这里br取break的前2个字母。我们排版时，肯定会需要换行，这个时候就可以用上这个标签
<br/>
- hr标签
Horizontal divider水平分割线，这里取hr，水平单词缩写意思。同样的，我们要做排版，水平分割线也是必不可少的。
<hr/>
ps:
- html最早是发明用于电脑，所以单位默认是像素px。
- 这里大家可以联系到winidows操作系统为什么应对超高清如4k屏幕时，UI适配并不好的原因，但MacOS在不同屏幕上表现都很优异。
- 如果做过前端app开发，大家知道为了解决手机像素在开发时的便捷性，使用了无关像素点这个概念，也就是在像素这个实际单位上做了一层抽象，这样可以很方便应对普通屏幕，高清屏幕，视网膜屏幕，超高清屏幕等等。
2.2块标签
- div标签
用于在文档中设定一个区块，类似一个大的容器一样，里面可以放各种具体展示信息的标签元素。这样一来如果要做大块大块的布局，则直接调整不同div之间的布局就可以做到。
<div>
div>
- span标签
这个可以在一行之内设定一个块区域
<span>
span>
- font标签
顾名思义，这个就是设置字体相关信息，如大小，颜色，字体类型等信息的标签元素，可以嵌套其他的，但一般都是嵌套文字信息
<font>
font>
- 标题
最多有6级标题，大家如果联想到mark down语法，没错，mark down就是脱胎于html标记语言的，不过做了更多简化，但千丝万缕，斩之不断。
<h1>
一级标题，最大
h1>
<h2>
二级标题
h2>
<h3>
三级标题
h3>
<h4>
四级标题
h4>
<h5>
五级标题
h5>
<h6>
六级标题，最小
h6>
2.3列表标签
- ul
无序列表，常见type就是无序列表前面的图形，有square、disc、circle - ol
有序列表，就是每一个子行都有一个自动添加的数字 - li
列表中的每一行
<ul>
<li>第一行li>
<li>第二行li>
<li>第三行li>
ul>
<ol>
<li>第一行li>
<li>第二行li>
<li>第三行li>
ol>
2.4图片标签
经常说的图文并茂，作为描述文本为主的标记性语言，图片肯定不可或缺。
<img src="本地或者网络路径" style="width:100px; height:100px;"/>
ps：
最新的浏览器等已经不再支持直接读取硬盘中的图片文件路径，所以需要测试，要把图片资源拷贝到自己的web项目中进行访问
2.5链接标签
a,就是表示一个连接，属性设置就是href，可以看错是hyper reference link
<a href="//www.baidu.com/">
简单教程
a>
2.6表格标签
表格，table
<table border="1">
<caption>表格标题caption>
<th>表头1th>
<th>表头2th>
<tr>
<td>row 1, cell 1td>
<td>row 1, cell 2td>
tr>
<tr>
<td>row 2, cell 1td>
<td>row 2, cell 2td>
tr>
table>
2.7表单标签
表单，form
<form>
圣墟: <input type="text" name="不详"><br>
我的师兄太稳健了: <input type="text" name="稳教">
form>
ps:
- 表单中可以内嵌,并且设置input的类型为text、password、radio、checkbox、button、hidden、file、submit、reset、image等来丰富表单form的内容。
- 整体表单可以看做是一个html网页跟用户交互的一个工具箱，里面可以放各种交互的标签元素。
2.8select和option标签
select就是一个下拉自定义的表格，option则是每个自定义选项的元素。
<select>
<option value="神船笔记本">神舟option>
<option value="蓝天模具笔记本">蓝天自定义option>
<option value="败家之眼笔记本">华硕option>
<option value="外星人贵笔记本">戴尔option>
select>
3.Html有什么优点和不足
html优点，简洁明了，使用标记来展示出不同文本类型和数据。对比如word、ppt、excel等格式要轻量很多很多，也利于网络传输和解析读取。最早期的互联网的硬件和网络都能很好承载。
html不足，从自身体验来看，还是显得有些臃肿，出现错误定位对比编译性的编程语言也比较麻烦。如果一个复杂网页，html文件一般会显得相对庞大.
具体可以看一下京东首页的html文件，进入浏览器之后，ctrl + s，保存的就是html页面文件，大家可以看一下层级是非常深的，额比较复杂。所以淘宝，京东都已经开发出无人化的html页面生成技术来提升维护效率。
京东首页
4.Html的设计思路和出发点
本质其实就是使用标记来区分各种类型的展示元素，并且允许嵌套，这样就可以带来非常丰富的样式变种。至于每个元素则使用不同的属性如style等来修饰，整体非常轻量级，利于使用浏览器引擎解析和渲染。
从整体来看，当时设计时，可能并没有设想到随着现实业务发展，html网页会变得比互联网初期时复杂那么多，这样也使得浏览器的引擎必须持续迭代来保证渲染性能和体验。