月15日，第三届中国互联网安全领袖峰会（Cyber Security Summit 2017，简称“CSS2017”）在北京国家会议中心正式拉开帷幕。作为CSS安全峰会的主办方，腾讯携手500多家顶尖企业以及“世界头号传奇黑客”Kevin Mitnick、卡巴斯基实验室安全专家Vladimir Dashchenko、腾讯安全玄武实验室负责人“TK教主”于旸等众多全球顶尖安全专家共话安全。

据了解，本届峰会是由腾讯公司、中国电子技术标准化研究院等企事业单位共同创办，得到国家网信办、工信部、公安部等国家部门大力支持和指导，是全球规模最大的互联网产业安全交流盛会。大会期间，各界领袖围绕“安全新秩序，连接新机遇”主题，共同探讨全球网络安全最新发展趋势，分享时下前沿安全技术与研究成果，为中国互联网安全产业格局和发展机遇进行全面解读把脉，为产业的“数字经济”转型献策。

（“新秩序下的安全之道”圆桌嘉宾合影）

数字经济时代，如何在实现自身发展的同时维护好网络安全，成为传统行业和互联网行业面临的共同挑战。在上午的圆桌论坛环节，腾讯副总裁丁珂、Visa副董事长兼首席风险官 Ellen Richey （艾睿琪）、中国联通信息化部总经理孙世臻、国家电网公司信息通信部主任王继业、中国信息安全测评中心总工程师王军五位嘉宾汇聚一堂，聚焦新环境下互联网安全面临的挑战与机遇，深入探讨传统行业与互联网行业在新秩序下的安全之道。

网络安全步入新秩序，行业合作成为共识

6月1日《网络安全法》的落地实施，意味着数字经济将步入有法可依的新秩序阶段，企业需要更好贯彻《网络安全法》。与会嘉宾一致认为，新秩序下的互联网企业面临巨大挑战，同时也迎来了前所未有的机遇。

丁珂指出，新秩序下，网络安全、信息安全领域主要面临三个方面的挑战和威胁。第一，用户的隐私保护正式提上议程，打击个人信息泄露犯罪有法可依；第二，企业责任更加明确，每个企业都有明确的责任来保护用户的财产和隐私安全；第三，在有法可依和制度保障上，《网络安全法》会为行业合作提供指导性意义，随着全行业对网络安全的重视程度提高，对网络安全的投入力度加大，将催生更大空间的网络安全市场和更多合作可能。

（Visa 副董事长兼首席风险官Ellen Richey在圆桌上发言）

金融行业作为网络安全威胁最集中的领域之一，面临数据大规模泄露、资金被盗、业务中断等各种频发的安全挑战。Visa 副董事长兼首席风险官Ellen Richey（艾睿琪）表示，如今支付保护的边界发生了变化，已经从过去保护用户的支付行为延伸到保护数据，并将与交易数据关联的个人信息全部纳入保护范围。同时，Visa与各厂商跨领域合作，以提高技术与设备的安全性，为移动金融保驾护航。比如，通过IBM Watson提供的云解决方案，可以确保技术的安全性，避免潜在的网络攻击。

随着技术的演进，这两年针对电信基础运营商的网络攻击正在变化和升级，尤其在黑色产业链利益的驱使下，利用网络漏洞或信息泄漏的攻击数量在不断上升。中国联通信息化部总经理孙世臻表示，联通在应对这些攻击时除了做好跟踪预警、完善防护手段、建立比较完善的应急处理机制和体系之外，也积极与腾讯等互联网安全企业紧密合作，借助业内最新的安全成果，不断的丰富和完善自身的防护手段和防护能力。

新秩序下的安全之道：坚持人才培养、安全防护体系构建和开放合作

面对新秩序下的新挑战，丁珂表示腾讯将在人才培养、整体安全防护体系构建和大数据、核心技术开放共享三个层面继续发力。作为CSS安全领袖峰会的发起方，腾讯一直在持续推进和建立开放、协作的安全生态新体系，不断强化自身安全研发能力及创新能力，向全行业输出更强的技术实力，在推动建立全产业链协作的安全体系上不断努力。

（腾讯副总裁丁珂在圆桌论坛上发言）

为了帮助用户应对日渐复杂的网络风险，腾讯安全长期以来致力于积累安全领域领先的技术实力和丰富经验，打造了腾讯安全联合实验室、腾讯安全云库、腾讯手机管家、腾讯电脑管家、腾讯WiFi管家、腾讯守护者计划在内的最强安全矩阵，对电信网络诈骗、木马病毒攻击等安全威胁实现了全方位、多场景防御和遏制。2016年7月，腾讯成立了腾讯安全联合实验室，并推出鹰眼、麒麟系统，腾讯联合公安、银行、运营商等各方推出共同打造的“守护者计划”。

对腾讯而言，安全不仅是腾讯公司的核心战略，更是践行社会责任的重要体现，腾讯一直坚持开放、合作、共享的理念，不断向国内外输出安全实力。2016年腾讯安全联合实验室发现谷歌、微软、苹果、Adobe等国际厂商共计269个漏洞，位居国内第一。此外，腾讯多次与苹果公司合作，为iOS系统提供骚扰诈骗电话拦截和垃圾短信识别服务，为Safari浏览器提供内置的腾讯安全云库能力，实现欺诈网址识别。

在安全人才培养方面，腾讯安全探索信息安全人才培养新机制，利用自身优势打造网络安全人才培养闭环，为国内安全行业持续“造血”。腾讯安全发起并举办了腾讯信息安全争霸赛(TCTF)，由腾讯安全联合实验室7大掌门人和国内数十位资深网络安全老师组成的明星导师团，为通过比赛选拔的学生进行指导，并将优秀选手输送到国际赛场，以赛代练，促进实战人才的培养，建立了信息安全专业人才培养的闭环。

提高安全意识、坚持开放协作，构建健康的安全新生态

伴随着互联网更深层次的融合与开放，不同领域的企业跨界合作机会增多、程度加深，安全产业与其它行业交互相融，逐渐建立起联动的生态战略化体系。而面对新秩序下的机遇与挑战，更需要政府、各行业、企业建立连接协同合作机制，同时也需要更多有担当有能力的企业发挥表率作用。以腾讯、Visa、中国联通、国家电网、中国信息安全测评中心为代表的企业和政府，将持续推进和建立开放、协作的安全生态新体系，CSS安全领袖峰会作为重要的国际安全交流平台，也将持续推动国际网络安全合作机制的落地。

在圆桌论坛结束之际，主持人、财经传媒集团首席战略官段永朝总结称，在当前的安全形势下，普通消费者要时刻保持警惕性，提高安全意识，同时还要有提升公共安全和他人安全的精神；对企业而言，要把客户数据的安全当成资产一样来保护；此外，监管机构、政府机构需要扮演一个先导作用，搭建更好的平台促进网络安全新生态的构建。

据了解，CSS2017所带来的精彩内容远不止这些，除了8月15日上午的圆桌论坛之外，大会还将围绕金融安全、大数据及云安全、人工智能与安全伦理、安全法治治理、基础设施安全、智能硬件与物联网安全、网络空间威胁态势感知、网络安全标准化等多维度议题展开，与业界领袖共同探讨全新环境和形势下网络安全的新秩序构建、安全连接数字经济的新发展机遇。

济南依泉而建、伴泉而生、因泉而名，素有“天下泉城”的美誉。泉水不仅在蜿蜒流淌中诉说着济南千年历史文化底蕴，于山水间彰显着江南的灵动秀美，更默默润泽着济南这片土地和依泉而居的淳朴百姓。

4月10日，系列英文纪录片《遇见泉城》首集《水润泉城》正式上线。视频中，来自智利的山东师范大学留学生傅雷（Freddy Fredes）作为出镜导游，带领观众探寻泉水的形成与发展，全方位领略济南青石老街古巷悠悠，清澈灵动泉水潺潺，开启一场别具特色的视听旅程。

（https://www.chinadaily.com.cn/a/202204/19/WS625e85dfa310fd2b29e57e7d.html）

该集纪录片由中共济南市委宣传部和济南市人民政府办公室指导拍摄，聚焦人们赏泉、咏泉，品泉，爱泉，在泉水边游玩嬉戏、泡茶饮酒等市井生活景象，生动描绘济南因水而生、因泉而兴的独特城市风貌和生态优势，真实、立体、全面展现人与自然和谐共生的壮美图景。

影片用纪实手法真实、立体、全面展现济南泉水清澈、灵动、美丽的丰富样态，历史文脉与现代文明交相辉映的泉城风貌，以及济南保泉护泉的有力措施。用影像传播生态文明之美，传递生态文明理念和人文关怀，唤醒公众生态环保意识。

济南泉水风格多样，为影片增加了别样“风味”。影片中可以看到泉水从九如山一路蜿蜒而下，流经繁华街区，经由小清河完成汇入大海的使命。从山涧到闹市，泉水姿态万千，婉约与豪放风格并举，有淙淙流淌的山涧清泉，有气势磅礴的趵突泉，有如猛虎呼啸的黑虎泉，有水声淅沥的月牙泉……各路清泉以自己独有的方式心照不宣的汇聚着，参与人们的日常，美化人们的周边，融入人们的生活，滋润人们的心田。

来中国已经有三年时间的傅雷，曾去过北京、上海、苏州、青岛，他认为济南因泉水而显得更加平和安静。今年夏天，傅雷将从山东师范大学硕士毕业回到他的家乡。“我认为济南是我的第二故乡。我已经在这里生活了将近四年。回到家乡后，我会怀念上学的路上就能在街边看到泉水和河流的情景，真的会怀念这种美好。”傅雷这样说道。

泉，是济南的根与魂，是济南走向世界的特色元素和靓丽名片。当前，济南正积极推进“泉·城文化景观”申遗工作，让世界人民了解济南的泉之美、城之美、人之美。

（中国日报山东记者站）

本篇文章开始成哥将带大家一起学习一下前端的基础知识，我们先讲解前端的基础HTML与CSS，这个讲完我们将讲解VUE前端框架，最后我们再讲讲Ant Design的VUE前端框架，从而形成前端一个系列的教程，下面就开始我们今天的内容吧！

01 HTML简介

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。

HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。

使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件"翻译"成可以识别的信息，即现在所见到的网页。HTML 不需要编译，可以直接由浏览器执行，非常方便开发时调试。

02 HTML实例

我们现在创建一个典型的HTML结构具体如下：

1. <!DOCTYPE html>  
2. <html lang="ch">  
3. <head>  
4.     <meta charset="UTF-8">  
5.     <title>HTML实例</title>  
6. </head>  
7. <body>  
8.   <h1>我是标题</h1>  
9.   <p>我是段落。</p>  
10. </body>  
11. </html> 

如上页面中各个标签代表的意思如下：

1）<!DOCTYPE html>是文档声明头，它告诉游览器当前处理的内容是HTML页面

2）html是 HTML 页面的根元素，用于标识HTML内容的开始与结束

3） head是HTML页面的头，包含了文档的一些属性。其中meta是元数据这边charset="UTF-8"标识当前页面编码格式为UTF-8，title为文档的标题

4）body是HTML主体也是游览器在显示页面时的内容。h1是body内容中定义的标题，p是body内容中定义的段落

我们现在通过游览器打开编写的HTML内容，具体内容如下

在HTML中的内容可以通过以下格式进行内容注释具体如下：

03 HTML标签、元素、属性、实体编码与事件

（1）HTML标签

HTML 标签是 HTML 语言中最基本的单位，HTML 标签是 HTML（标准通用标记语言下的一个应用）最重要的组成部分。HTML标签具有如下特点：

1）标签一般是成对出现的 如:<div></div>;也有空标签 如:<br />

2）标签由<>包括,分为开始标签(开放标签)和结束标签(闭合标签)

3）标签不区分大小写,根据W3C(万维网联盟)推荐,统一使用小写字母

标签的示列如下：

标签按照<>的对数可以分为如下两类分别为双标签与单标签，下面我们具体来了解一下这两类标签。

1）双标签

双标签指由开始和结束两个标记符组成的标记。其基本语法格式如下：

1. <标记名></标记名>

常见的双标签有如下几种：

1. <html></html>  
2. <head></head>  
3. <title></title>  
4. <body></body>  
5. <h1></h1>  
6. <p></p>  
7.   
8. <!-- 块级元素 -->  
9. <div></div>  
10. <span></span>  
11.   
12. <!-- 超链接元素 -->  
13. <a></a>  
14.   
15. <!-- 列表元素 -->  
16. <ul></ul>  

2）单标签

单标签是指用一个标记符号即可完整地描述某个功能的标记。其基本语法格式如下：

1. <标记名/>

常见的单标签有如下几种：

1. <!-- 换行标签 -->  
2. <br />  
3.   
4. <!-- 分隔线标签 -->  
5. <hr />  
6.   
7. <!-- 图片标签 -->  
8. <img />  

（2）HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码，如<p>段落</p>。元素可以进行嵌套具体如下：

1. <div>  
2.   <h1>我是标题</h1>  
3.     
4.   <div>  
5.     <p>元素嵌套示列</p>  
6.   </div>  
7.   
8. </div>  

（3）HTML属性

属性为 HTML 元素提供附加信息，可分为全局属性（即所有元素均可使用的属性，如id,class等）和元素属性（部分元素可使用的属性，例如<a href="http://www.baidu.com">搜索</a>），属性通常由属性名="属性值"构成,存在于开始标签中，示列如下:

（4）HTML实体编码

对于部分不易通过键盘输入的或和HTML冲突的部分符合,引入对应的"实体编码"，如< <> >空格 。

（5）HTML事件

通过某个动作,执行某个操作/JS脚本的能力。如点击按钮,改变颜色，事件可以分为多类比多鼠标点击、鼠标聚焦等，下面我看看看一个事件编写示列：

04 HTML常用标签示列

（1）h标签

h 标签有六种分别为h1、h2、h3、h4、h5、h6，这六个分别对应六种样式的标题，我们现在来编写这六种h标签，演示代码如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <h1>H1标题</h1>  
9.   <h2>H2标题</h2>  
10.   <h3>H3标题</h3>  
11.   <h4>H4标题</h4>  
12.   <h5>H5标题</h5>  
13.   <h6>H6标题</h6>  
14. </body>  
15. </html>  

我们来运行该HTML文件，来看看这六种h标签有什么样式差异，从示列中可以发现h1标签字体最大然后依次减小。

（2）p标签

p 标签是文本标签，现在我们来编写一段含有p标签的html文本，然后运行了看看p标签的样式具体操作如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <h4>标题一</h4>  
10.   <p>我是段落1</p>  
11.   
12.   <h4>标题二</h4>  
13.   <p>我是段落2</p>  
14.   
15. </body>  
16. </html>  

（3）a标签

a标签是超链接标签，点击a标签可以跳转到其设置的网站，具体示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <div>  
9.     <a href="http://www.baidu.com">点我跳转到百度页面</a>  
10.   </div>  
11.   
12.   <div>  
13.     <a href="http://www.qq.com">点我跳转到腾讯页面</a>  
14.   </div>  
15.   
16. </body>  
17. </html>  

（4）div标签

div标签是一个块级元素，它可用于组合其他 HTML 元素的容器。可以把div看成一个盒子，我们可以为这个盒子设置各种各样属性（如高度、宽度、颜色等），下面我们编写一个div标签并设置其长为300px，宽度为200px，同时给其一个背景颜色，具体如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>  
10.   
11. </body>  
12. </html>  

（5）列表标签

列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）

1）有序列表ul

有序列表的顺序是有序的，默认情况下会以数字来排列，但也可以通过设置其type属性以大写字母、小写字母、大写罗马数字、小写罗马数字来排列，我们现在来写一个示列，具体如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <!--  有序列表，以默认方式数字排列 -->  
10.   <p>有序列表默认方式数字排列</p>  
11.   <ol>  
12.     <li>列表1</li>  
13.     <li>列表2</li>  
14.     <li>列表3</li>  
15.   </ol>  
16.   
17.   <!--  有序列表，以大写字母排列 -->  
18.   <p>有序列表大写字母排列</p>  
19.   <ol type="A">  
20.     <li>列表1</li>  
21.     <li>列表2</li>  
22.     <li>列表3</li>  
23.   </ol>  
24.   
25. </body>  
26. </html>  

2）无序列表ol

无序列表的顺序是无序的，不会按照某个值来排序，无序列表中每个列表前默认都有一个实心圆，也可以通过type属性来设置成空心圆或者小方块，无序列表示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>无序列表默认type样式</p>  
10.   <ul>  
11.     <li>列表1</li>  
12.     <li>列表2</li>  
13.     <li>列表3</li>  
14.   </ul>  
15.   
16.   <p>无序列表方块样式</p>  
17.   <ul type="square">  
18.     <li>列表1</li>  
19.     <li>列表2</li>  
20.     <li>列表3</li>  
21.   </ul>  
22.   
23. </body>  
24. </html>  

3）自定义列表dl

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始，其列表内容是以<dd> 开始，自定义列表前面没有任何标识，其具体示例如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>自定义列表</p>  
10.   <dl>  
11.     <dt>东岳</dt>  
12.     <dd>泰山</dd>  
13.   
14.     <dt>南岳</dt>  
15.     <dd>衡山</dd>  
16.   
17.     <dt>西岳</dt>  
18.     <dd>华山</dd>  
19.   
20.     <dt>北岳</dt>  
21.     <dd>恒山</dd>  
22.   
23.     <dt>中岳</dt>  
24.     <dd>嵩山</dd>  
25.   </dl>  
26.   
27. </body>  
28. </html>  

（6）其它标签

1）换行标签<br/>

在HTML中如果想给内容进行换行可以使用换行标签，具体示列如下：

2）分割线标签<hr/>

<hr/> 标签用于在 HTML创建一条分割线，具体示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基础教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <p>我是张三</p>  
10.   <!-- 分割线标签 -->  
11.   <hr/>  
12.   <p>我是李四</p>  
13. </body>  
14. </html>  

05 总结

至此我们《HTML基础教程上篇》就讲完了，下篇内容主要讲解HTML样式、HTML表单、Tabel等，敬请期待。最后如果喜欢本篇文章不要忘了点赞、关注与转发哦！

-END-

@IT管理局专注计算机领域技术、大学生活、学习方法、求职招聘、职业规划、职场感悟等类型的原创内容。期待与你相遇，和你一同成长。

文章推荐：

• 一文秒懂Web框架基础之WSGI协议
• IT工程师都需要掌握的容器技术之扫盲篇