数据分析师所需的编程技能 : html篇

在从事数分工作的过程中，有些任务会遇到前端相关的知识，比如每日自动调度内含表格的日报、爬虫、Python的BI库（plotly.dash）等等。让我感受到一些基础的前端知识也是数分从业者所需的，所以，总结一些基础的html知识（非全部），以免遗忘，查漏补缺。

1、前端三大件html、css、js是什么？
1.1） HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
1.2） CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
1.3） JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

2、HTML基本结构
html是用来描述网页的一种语言，全称超文本标记语言(Hyper Text Markup Language)。

2.1)先来看看一个简单html例子：

[/code][code]

复制代码

[/code][code]

复制代码

Html例子

复制代码

[/code][code]

复制代码

Hello world

复制代码

html hello world

复制代码

[/code][code]

复制代码

[/code][b]它得到的网页长这样。[/b]
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-e35ee893188945eb291ae6d38c953179[/img]
我们可以看到html的网页内容都存放到各种“标签“中，[b]其实只要学会了各种标签的含义与应用，那么已经掌握了80%以上的html知识了。[/b]
[b]2.2 ) 来认识下什么是标签？[/b]
[list][*]标签由英文尖括号括起来，例如
[*]html中的标签一般是成对出现的，分开始标签和结束标签，结束标签多一个"/"。例如
[*]常见的标签、、等
[*]标签之间是可以嵌套的，但先后顺序必须保持一致，如
[/list][list][*][/list][code]你好

复制代码

Html标签不区分大小写，但建议小写为准。

2.3 ) html文件的固定结构
固定结构：

[/code][code]...

复制代码

...

复制代码

[/code][list][*]为根标签，所有网页标签都在里面
[*]标签定义文档头部，里面描述文档的属性和信息，绝大多数文档头部包含的数据不会真正作为内容显示给读者。
[*]网页是主要内容，标签中的内容会在浏览器显示出来。
[/list]
[b]3、认识标签[/b]
往上说了，只要弄懂了各标签的含义与用途就约等于弄懂html了，那还等啥，直入正题：认识标签！
[b]3.1 ) 标签：[/b]段落标签，把文章的段落放到此标签中。语法：
[list][*][/list][code]段落文本

复制代码

例子：

[/code][code]

复制代码

[/code][code]

复制代码

p标签

复制代码

[/code][code]

复制代码

你好，世界

复制代码

[/code][code]

复制代码

结果：

3.2 ) 标签：为文章添加标题，标签一共有6个，h1、h2、h3、h4、h5、h6分别为一至六级标签，主要就是标签大小，最大。
语法：

标题文本

复制代码

例子：

[/code][code] Dathon

复制代码

专注互凉网数据分析，进来就一起凉凉

复制代码

[/code][b]结果：[/b]
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-5084798c347d3be9da293389f7706bcc[/img]
[b]3.3）与：[/b]文字加粗与斜体标签。
[b]例子：[/b]
[list][*][*][*][/list][code]

复制代码

Dathon,hello

复制代码

[/code][b]结果：[/b]
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-d333975e4a1764bbc9e66e64c4ed654e[/img]
[b]3.4 ) ：[/b]标签为文字单独设置样式，一般与CSS样式结合使用。
[b]例子：[/b]
[list][*][*][*][*][*][*][*][*][*][*][*][/list][code]

复制代码

[/code][code]span{

复制代码

color:blue;

复制代码

}

复制代码

[/code][code]

复制代码

[/code][code]Dathon

复制代码

[/code][code]

复制代码

结果：

3.5）：作用就是换行，在html里回车、空格都是没用的，如果你需要对文本进行换行那么只能用标签。而且注意：它是一个空标签，即没有结束标签。
例子：

[/code][code]《静夜思》

复制代码

床前明月光,低头思故乡。

复制代码

[/code][b]结果：[/b]
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-c6eb5d14088a359a7f22c90734ba531a[/img]
[b]3.6 ) &nbsp：[/b]加空格
[b]例子:[/b]
[list][*][*][*][*][/list][code]

复制代码

Dathon

复制代码

空格：聽聽聽聽空格

复制代码

[/code][b]结果：[/b]
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-532cc04d6725545256eaac5b0517c7a0[/img]
[b]3.7 ) ul-li[/b]：无序列表标签。
[b]语法：[/b]
[list][*][*][*][*][*][/list][code]

复制代码

信息

复制代码

信息

复制代码

......

复制代码

[/code][b]例子：[/b]
[list][*][*][*][*][*][*][*][/list][code]

复制代码

[/code][code]D

复制代码

Da

复制代码

Dat

复制代码

[/code][code]

复制代码

结果：因为是无序的，所以它以黑色原点开头

3.8）ol-li：有序标签
语法：

[/code][code]信息

复制代码

信息

复制代码

......

复制代码

[/code][b]例子：[/b]
[list][*][*][*][*][*][*][*][/list][code]

复制代码

[/code][code]D

复制代码

Da

复制代码

Dat

复制代码

[/code][code]

复制代码

结果：有序列表就是在前面自动加序号

3.9 )：一些独立的逻辑部分划分出来，放在里，标签相当于一个容器。
语法：

...

复制代码

例子：

[/code][code]

复制代码

近期发文计划

复制代码

[/code][code]CSS篇

复制代码

邮件自动化

复制代码

CTR预估算法比赛源码

复制代码

[/code][code]

复制代码

[/code][code]近期工作安排

复制代码

[/code][code]work1

复制代码

work2

复制代码

work3

复制代码

[/code][code]

复制代码

[/code][b]结果：[/b]
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-49733638b37de40b0fc24a791f7f4a4b[/img]
[b]3.10）[/b]：表格标签，也是我们做日报需要用到的html知识，它主要由4个元素：tbody、tr、th、td。
[b][/b]：装载表格的主体。
[b][/b]：表格的一行，几对tr就有几行
[b][/b]:表格的一个单元格，一个行(tr)中包含多个单元格(td)
[b][/b]：表格头部的第一个单元格，就是列名
[b]例子：[/b]
[list][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]

复制代码

[/code][code]

复制代码

[/code][code]班级

复制代码

学生数

复制代码

平均成绩

复制代码

[/code][code]

复制代码

一班

复制代码

30

复制代码

89

复制代码

[/code][code]

复制代码

二班

复制代码

35

复制代码

85

复制代码

[/code][code]

复制代码

[/code][code]

复制代码

结果：这么做表示是没有网格线的，网格线需要用到CSS相关的知识。

3.11）：实现超链接，这在当前网页直接打开。
语法：

链接显示的文本

复制代码

例子：

[/code][code]百度

复制代码

[/code][b]结果：[/b]
[b]3.12）：[/b]实现新建浏览器窗口打开链接
[b]语法：[/b]target="_blank"
[list][*][/list][code]click here!

复制代码

3.13）：插入图片
语法：

[/code][b]例子：[/b]
[list][*][*][*][/list][code]

复制代码

[/code][code]

复制代码

OK，大致就挑选这些较常用的标签讲解，实际上还有蛮多html知识没讲到，比如表格交互，插入代码标签，引用标签等等。感兴趣的可以搜搜相关教程在巩固下。学完这些后，在浏览器右键查看源码，是不是发现会稍微清楚些。但还是有许多不懂，比如、之类的，其实这种是CSS的语法，将在下篇继续总结吧。