HTML & CSS 基础语法总结-程序员宅基地

技术标签： html5 Java后端总结与心得 html

HTML & CSS 初学者必知必会

本文档适合前端初学者学习HTML与CSS时参考

还可以看看博主其他的总结：

MySQL超详细使用总结：传送地址：MySQL超详细使用总结
JavaScript小白必看：传送地址：JavaScript小白必看

HTML

一、网页的组成部分

内容：网页中可以看到的数据，使用HTML技术实现
表现：内容在页面上的展示形式，如布局、颜色等，使用CSS技术实现
行为：页面中元素与输入设备交互的响应，使用javascript 技术实现

二、HTML简介

名称：Hyper Text Markup Language (超文本标记语言)
简介：HTML 通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标签，可以告诉浏览器如何显示其中的内容

三、创建HTML文件

在这里插入图片描述

选择浏览器执行

注意：java文件需要先编译，再由java虚拟机跑起来，而HTML文件无需编译，直接由浏览器进行解析执行

四、HTML文件的书写规范

HTML中注释的写法：
HTML文件最基本的要素：

<!DOCTYPE html> 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
<body>

</body>
</html>

要素详解：
(1) <!DOCTYPE> 告诉浏览器当前HTML是用什么版本编写的，html标签表示HTML的开始
(2) 向搜索引擎表示该页面是html语言，并且语言为英文网站，其"lang"的意思就是“language”的意思，而“en”即表示english，如果需要的是中文页面，可将其改为
(3) 表示头部信息，一般包含三部分内容：title标签，css样式，js代码
(4) 表示当前页面使用UTF-8字符集
(5) Title 表示浏览器标签页的标题
(6) 表示头部信息结束
(7) 标签中的内容是整个html页面显示的主体内容
(8) 主体内容结束
(9) 表示整个HTML页面结束

五、HTML 标签介绍

标签的格式：<标签名>标签中的内容</标签名>
标签名不区分大小写
标签可以拥有自己的属性
(1) 基本属性：可以修改简单的样式效果
(2) 事件属性：可以设置事件响应后的代码
标签分为单标签和双标签

单标签中br/代表换行，hr/代表水平线
标签的语法(HTML代码有时标签不闭合也不报错)：
代码演示：基本的HTML要素的使用

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
</head>
<body bgcolor="#deb887"> <!-- bgcolor是页面的背景颜色属性 -->
    hello!这是我的第一个网页！
    <hr/>
    有一个按钮
    <br/>
    <button onclick="alert('提示！')">按钮</button>
    <!-- onclick表示点击事件，alert()是javaScript语言提供的一个警告框函数，
         它可以接收任意参数，参数就是警告框内出现的信息 -->
</body>
</html>

运行结果：

点击按钮之后出现含有“提示”的警告框

六、常用标签介绍：

1.font字体标签:

可以用来修改文本的字体、颜色、大小等，常用的属性：
(1) color属性：修改字体颜色
(2) face属性：修改字体
(3) size属性：修改字体大小

代码示例：在网页上显示：我是字体标签，并修改字体为宋体，颜色为红色

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>字体标签的测试</title>
</head>
<body>
    <font face="宋体" , color="red", size="8">我是字体标签</font>
</body>
</html>

运行结果：
在这里插入图片描述

2. 特殊字符：

字符实体有三部分：一个和号 (&)，一个实体名称(或者 # 和一个实体编号)，以及一个分号
在这里插入图片描述
代码示例：把换行单标签以文本的形式输出在页面中，并演示空格的使用

<!DOCTYPE html>				    
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊字符的使用</title>
</head>
<body>							
    &lt;&nbsp;br&nbsp;&gt;
</body>
</html>

运行结果：
在这里插入图片描述
注意：如果未使用特殊字符则HTML对于连续的空白字符（如回车、制表等）只保留一个空格

3.标题标签:

标题标签是从h1到h6，h1最大，h6最小，其中的属性：
align属性是对齐属性，其值：
(1) left 左对齐(默认)
(2) center居中对齐
(3) right右对齐
注意：HTML会自动的在标题上下添加一个空行

代码示例：演示标题的不同等级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>						
<body>
    <h1 align="left">标题1</h1>
    <h2 align="right">标题2</h2>
    <h3 align="center">标题3</h3>
    <h4 >标题4</h4>
    <h5 >标题5</h5>
    <h6 >标题6</h6>
</body>
</html>

运行结果：
在这里插入图片描述

4.超链接：网页中点击之后可以跳转的内容

  a标签代表超链接，其中的属性：

href属性设置链接的地址
target属性可以定义被链接的内容在何处显示：
(1) _self 属性值表示链接在当前页面中打开(默认)
(2) _blank属性值表示链接在新页面中打开

代码示例：演示超链接的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接的测试</title>
</head>
<body>
    <a href="http://www.google.com">谷歌</a><br/>
    <a href="http://www.google.com", target="_self">谷歌_self</a><br/>
    <a href="http://www.google.com", target="_blank">谷歌_target</a><br/>
</body>
</html>

运行结果：
在这里插入图片描述
三个链接均可点击并呈现相应效果

5.列表标签

(1) ul标签是无序列表，ol标签是有序列表
type属性可以修改列表前面的符号
(2) li标签是列表项

代码示例：演示列表标签的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签的使用</title>
</head>
<body>
    <ol type="none">
        <li>周杰伦</li>
        <li>昆凌</li>
        <li>海瑟薇</li>
    </ol>						  
    <ul type="none">
        <li>周杰伦</li>
        <li>昆凌</li>
        <li>海瑟薇</li>
    </ul>
</body>
</html>

运行结果：
在这里插入图片描述

6. img标签(单标签)：可以在html页面上显示图片

(1) src属性可以设置图片的路径：
相对路径：
. 表示当前文件所在的目录
… 表示当前文件所在的上一级目录
/ 表示进入目录或打开文件
绝对路径：
http://ip:端口号/工程名/资源路径
(2) width属性可以设置图片的宽度
(3) height属性可以设置图片的高度
(4) border属性可以设置图片边框大小
(5) alt属性可以设置当指定路径找不到图片时，用来代替图片显示的文本内容

代码示例：演示img标签的使用
5.jpg在My Test文件夹下的photo文件夹下
19.jpg在My Test文件夹下
17.jpg在MyTest文件夹的上层目录下
即：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>照片代码演示</title>
</head>
<body>
    <img src="19.jpg" border="1" height="200" width="200"/>
    <img src="./photo/5.jpg" alt="图片找不到"/>
    <img src="../17.jpg" alt="图片找不到">
</body>
</html>

运行结果：在页面上成功加载出三张图片

7. 表格标签

table标签是表格标签
(1) border属性设置表格最外层边框的大小，如果不设置或值为0则无表格外层边框，亦无单元格边框，仅有数据，且按照表格方式排列
(2) width属性设置表格宽度
(3) height属性设置表格高度
(4) align属性设置表格相对于页面的对齐方式
(5) cellspacing属性设置单元格间距，设置为0单元格的边重叠，会加粗
(6) cellpadding属性设置单元格内容距离单元格边框的距离大小
tr标签是行标签，其中的内容都在一行
th标签是表头标签，其中的内容在单元格中(自动的加粗并居中)
td标签是单元格标签，其中的内容在单元格中，写几个td标签一行中就有几个单元格
align属性设置单元格文本对齐方式
b标签是加粗标签

代码示例：演示制作一个两行三列的表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签测试</title>
</head>
<body>
    <!-- 1.做一个带表头的两行三列的表格-->
    <table align="center" border="10" width="30" height="30" cellspacing="5">
        <tr>
            <th>1.1</th>
            <th>1.2</th>
            <th>1.3</th>
        </tr>					    
        <tr>
            <td><b>2.1</b></td>
            <td align="center">2.2</td>
            <td>2.3</td>
        </tr>
    </table>
</body>
</html>

运行结果：
在这里插入图片描述

8. 跨行跨列表格

单元格的 colspan属性设置跨几列
rowspan属性设置跨几行

代码示例：演示表格跨行跨列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨行跨列测试</title>
</head>
<body>
    <table border="1">
        <tr>
            <td colspan="2">1.1</td>
            <td>1.3</td>
        </tr>
        <tr>
            <td rowspan="2">2.1</td>
            <td>2.2</td>
            <td>2.3</td>			  
        </tr>
        <tr>
            <td>3.2</td>
            <td>3.3</td>
        </tr>
    </table>
</body>
</html>

运行结果：
在这里插入图片描述

9. iframe框架标签(内嵌窗口)

iframe标签可以在页面上开辟一个区域显示一个单独的页面
iframe和a标签组合使用的步骤：

在iframe标签中使用name属性自定义一个名称
将a标签中的target属性值设置为第1步iframe标签的name属性值

代码示例：演示iframe标签的使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe标签的使用</title>
</head>
<body>
    <iframe src="跨行跨列测试.html" width="200" height="70" name="go"></iframe>
    <br/>
    <ul>
        <li><a href="表格标签测试.html" target="go">切换至表格标签测试</a></li>
    </ul>
</body>
</html>

运行结果：
在这里插入图片描述
点击之后：

10. 表单标签

表单：HTML页面中用来让用户输入信息的所有元素集合，然后把这些信息发送给服务器
(1) form标签代表表单标签
1.action属性设置提交的服务器地址
2. method属性设置提交的方式：get(默认)或post

注意：
A. 表单提交时数据没有发给服务器的三种情况：
1.表单项没有name属性值
2.单选、复选(option标签)没有添加value属性
3.表单项不在提交的form标签中

B. get请求的特点：
1 浏览器地址栏中的地址是action的属性值[?请求参数(表单中的数据)]
2 请求参数的格式是：name=value&name=value，不同数据使用&连接
3 不安全，提交密码会出现在浏览器地址栏中
4.有数据长度的限制：表单值包含非ASCII字符或者超过100个字符，get方式不可再用，必须使用method=“post”

C. post请求的特点：
1.浏览器地址栏中只有action的属性值
2. 相对于get请求更安全
3. 理论上没有数据长度的限制

(2) input标签代表输入标签，用来读取用户的输入
①value属性：
在这里插入图片描述
②name属性：自定义input元素的名称，用于对提交到服务器后的表单数据进行标识
③type属性：

1.text属性值代表文本域：value属性设置默认内容
2. password属性值代表密码输入框(输入的内容以掩码形式显示)：
3. radio属性值代表单选框：checked=”checked”表示默认选中，自定义name
属性可对其进行分组，同名组内只可选中一个
4. checkbox属性值代表复选框：
checked=”checked”表示默认选中
5. reset属性值代表重置按钮：value属性可以修改按钮上的默认文本，
reset按钮可重置表单中的内容，恢复为默认值
6. submit属性值代表提交按钮：value属性可以修改按钮上的默认文本，
submit按钮可将表单数据提交到服务器
7. button属性值代表按钮：value属性可以修改按钮上的默认文本
8. file属性值代表文件上传域：可选择本地的文件上传到服务器
9. hidden属性值代表隐藏域：在页面无任何内容，这些内容不需要用户参与，提交的时候同时发给服务器

(3) select标签代表下拉列表框：
option标签是下拉列表框中的选项，selected="selected"设置默认选中

(4) textarea标签代表多行文本输入框(框中默认值是此标签中的内容)：
1.rows属性可以设置显示几行的高度
2. cols属性可以设置每行可以显示几个字符

代码示例：创建如图所示的表单
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单的测试</title>
</head>
<body>
    <form action="http://locolhost:3306" method="get">
        <input type="hidden" name="action" value="login"/>
        <h1 align="center">用户注册</h1>
        <table align="center" border="1">
            <!--之后单元格的内容都要放在td中，否则内容就不在表格中了-->
            <tr>
                <td>用户名称:</td>
                <td>
                    <input type="text" name="username" value="默认值"/>
                </td>
            </tr>
            <tr>
                <td>用户密码：</td>
                <td>
                    <input type="password" name="password" value="***"/>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex" value="boy"/>男
                    <input type="radio" name="sex" checked="checked" value="girl"/>女
                </td>
            </tr>
            <tr>
                <td>兴趣爱好：</td>
                                <td>
                    <input name="hobby" type="checkbox" checked="checked" value="Java"/>Java
                    <input name="hobby" type="checkbox" value="JavaScript"/>JavaScript
                    <input name="hobby" type="checkbox" value="C++"/>C++
                </td>
            </tr>
            <tr>
                <td>国籍：</td>
                <td>
                    <select>
                        <option value="none">--默认值是第一个option的内容--</option>
                        <option value="China">中国</option>
                        <option value="Japan">中华</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我评价：</td>
                <td>
                    <textarea rows="10" cols="20" name="Describe">默认值为空</textarea>
                </td>
            </tr>
            <tr>
                <td><input type="reset"/></td>
                <td>
                    <input type="submit"/>
                    <input type="file">
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

此表单点击提交之后浏览器地址栏的内容是：
http://locolhost:3306/?action=login&username=%E9%BB%98%E8%AE%A4%E5%80%BC&password=***&sex=girl&hobby=Java&Describe=%E9%BB%98%E8%AE%A4%E5%80%BC%E4%B8%BA%E7%A9%BA

七、其他标签

1.div标签：字符无论多少独占一行
2.span标签：其长度是封装数据的长度，即字符有多长标签就有多长
3.p标签：段落标签，默认会在字符的上下行各空出一行(如果有空行就不再多留空行)

代码示例：测试其他标签的使用

<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span><!--有一个空格的原因：与下一段字符有大量空白-->
<span>span标签2</span>				
<p>p标签1</p>
<p>p标签2</p>

运行结果：
在这里插入图片描述

CSS

一、CSS技术介绍

CSS用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

二、CSS语法规则

在这里插入图片描述

浏览器根据选择器决定受CSS样式影响的HTML元素(标签)
属性是需要更改的样式名，每个属性都有一个值。属性和值使用冒号分开，并被大括号包围
如果要定义多个属性的声明，需要使用分号将每个声明分开
一般每行只描述一个属性
CSS注释：/注释的内容/

三、CSS和HTML结合的方式

在标签的style属性上设置”属性：值”

代码示例：使用style属性修改标签的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--定义一个div标签，修改标签的样式为：边框1个像素，实线，红色-->
    <div style="border: 1px solid red">div</div>
</body>							
</html>

运行结果：
在这里插入图片描述
此种方式的缺点：
(1) 若标签过多，代码量巨大
(2) 无复用性可言
(3) 可读性较差

在head标签中使用style标签来定义各种自己需要的CSS样式：

代码示例：在head标签中使用style标签定义CSS样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义CSS样式-->
    <style type="text/css">
            /*分别定义div、span标签，修改二者样式为边框1个像素，实线，红色*/
        div{
    
             border: 1px solid red;
        }
        span{
    
           border: 1px solid red;
        }
    </style>
</head>
<body>
    <!--在head标签中定义了某种标签的样式，
    则使用此标签时标签中的内容自动使用所定义的样式-->
    <div>div</div>
    <span>span</span>				
</body>
</html>

运行结果：
在这里插入图片描述
此种方式的缺点：只能在同一页面内复用代码，需要到每个页面修改样式，维护起来不方便

把CSS样式写成一个单独的CSS文件，再通过link标签引入

(1) 创建CSS文件：
在这里插入图片描述
(2) 在HTML文件的head标签中使用：
<link rel = “stylesheet” type = “text/css” href = “创建的CSS文件路径”/>

代码示例：演示link标签的使用
①创建mycss.css文件

div{
    
    border: 1px solid red;
}
span{
    
    border: 1px solid #433cfa;
}

②在html文件中使用link标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="mycss.css"/>
</head>
<body>
    <div>div</div>

    <span>span</span>
</body>
</html>

运行结果：
在这里插入图片描述

四、CSS选择器

1.标签名选择器：相当于HTML和CSS结合的方式二
2. id选择器：可以通过id属性选择性的使用某个样式(id是唯一的，每个id值在一个页面中只能使用一次)，格式：
#id名称{
属性：值；
}

代码示例：演示id选择器的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #id001{
    
            color: burlywood;
            border: 1px solid red;
        }
        #id002{
    
            color: aqua;
            border: 3px yellow;			
        }
    </style>
</head>
<body>							
    <div id="id001">div1</div>
    <div id="id002">div2</div>
    <!--再次使用id报错：<div id="id002">div3</div> -->
</body>
</html>

运行结果：
在这里插入图片描述
3. class选择器(类选择器)：可以通过class属性选择性的使用某个样式(class值在一个页面中可以使用多次)，格式：
.class名称{
属性：值；
}

代码示例：演示类选择器的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
           .class01{
    
            color: aqua;			 
            font-size: 30px;
        }
    </style>					
</head>
<body>
    <div class="class01">div1</div>
    <div class="class01">div2</div> <!--可重用-->
</body>
</html>

运行结果：
在这里插入图片描述
4. 组合选择器：可以让多个选择器共用同一个CSS样式
格式：
选择器1，选择器2…选择器n{
属性：值；
}

代码示例：演示组合选择器的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .class01,#id01{
    
            color: #433cfa;
            font-size: 20px;			 
        }
    </style>
</head>						    运行结果：
<body>
    <div class="class01">div1</div>
    <div id="id01">div2</div>
</body>
</html>

五、查阅CSS手册

其余的用法差不多，这么多样式也记不住，需要查阅手册，手册文件可以私聊我获取
在这里插入图片描述

本文链接：https://blog.csdn.net/weixin_49343190/article/details/107314236

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

稀疏编码的数学基础与理论分析-程序员宅基地

文章浏览阅读290次，点赞8次，收藏10次。1.背景介绍稀疏编码是一种用于处理稀疏数据的编码技术，其主要应用于信息传输、存储和处理等领域。稀疏数据是指数据中大部分元素为零或近似于零的数据，例如文本、图像、音频、视频等。稀疏编码的核心思想是将稀疏数据表示为非零元素和它们对应的位置信息，从而减少存储空间和计算复杂度。稀疏编码的研究起源于1990年代，随着大数据时代的到来，稀疏编码技术的应用范围和影响力不断扩大。目前，稀疏编码已经成为计算...

EasyGBS国标流媒体服务器GB28181国标方案安装使用文档-程序员宅基地

文章浏览阅读217次。EasyGBS - GB28181 国标方案安装使用文档下载安装包下载，正式使用需商业授权, 功能一致在线演示在线API架构图EasySIPCMSSIP 中心信令服务, 单节点, 自带一个 Redis Server, 随 EasySIPCMS 自启动, 不需要手动运行EasySIPSMSSIP 流媒体服务, 根..._easygbs-windows-2.6.0-23042316使用文档

【Web】记录巅峰极客2023 BabyURL题目复现——Jackson原生链_原生jackson 反序列化链子-程序员宅基地

文章浏览阅读1.2k次，点赞27次，收藏7次。2023巅峰极客 BabyURL之前AliyunCTF Bypassit I这题考查了这样一条链子：其实就是Jackson的原生反序列化利用今天复现的这题也是大同小异，一起来整一下。_原生jackson 反序列化链子

一文搞懂SpringCloud，详解干货，做好笔记_spring cloud-程序员宅基地

文章浏览阅读734次，点赞9次，收藏7次。微服务架构简单的说就是将单体应用进一步拆分，拆分成更小的服务，每个服务都是一个可以独立运行的项目。这么多小服务，如何管理他们？(服务治理注册中心[服务注册发现剔除])这么多小服务，他们之间如何通讯？这么多小服务，客户端怎么访问他们？(网关)这么多小服务，一旦出现问题了，应该如何自处理？(容错)这么多小服务，一旦出现问题了，应该如何排错?(链路追踪)对于上面的问题，是任何一个微服务设计者都不能绕过去的，因此大部分的微服务产品都针对每一个问题提供了相应的组件来解决它们。_spring cloud

Js实现图片点击切换与轮播-程序员宅基地

文章浏览阅读5.9k次，点赞6次，收藏20次。Js实现图片点击切换与轮播图片点击切换<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/ja..._点击图片进行轮播图切换

tensorflow-gpu版本安装教程（过程详细）_tensorflow gpu版本安装-程序员宅基地

文章浏览阅读10w+次，点赞245次，收藏1.5k次。在开始安装前，如果你的电脑装过tensorflow，请先把他们卸载干净，包括依赖的包（tensorflow-estimator、tensorboard、tensorflow、keras-applications、keras-preprocessing），不然后续安装了tensorflow-gpu可能会出现找不到cuda的问题。cuda、cudnn。..._tensorflow gpu版本安装

随便推点

物联网时代权限滥用漏洞的攻击及防御-程序员宅基地

文章浏览阅读243次。0x00 简介权限滥用漏洞一般归类于逻辑问题，是指服务端功能开放过多或权限限制不严格，导致攻击者可以通过直接或间接调用的方式达到攻击效果。随着物联网时代的到来，这种漏洞已经屡见不鲜，各种漏洞组合利用也是千奇百怪、五花八门，这里总结漏洞是为了更好地应对和预防，如有不妥之处还请业内人士多多指教。0x01 背景2014年4月，在比特币飞涨的时代某网站曾经..._使用物联网漏洞的使用者

Visual Odometry and Depth Calculation--Epipolar Geometry--Direct Method--PnP_normalized plane coordinates-程序员宅基地

文章浏览阅读786次。A. Epipolar geometry and triangulationThe epipolar geometry mainly adopts the feature point method, such as SIFT, SURF and ORB, etc. to obtain the feature points corresponding to two frames of images. As shown in Figure 1, let the first image be and th_normalized plane coordinates

开放信息抽取(OIE)系统（三）-- 第二代开放信息抽取系统(人工规则, rule-based, 先抽取关系)_语义角色增强的关系抽取-程序员宅基地

文章浏览阅读708次，点赞2次，收藏3次。开放信息抽取(OIE)系统（三）-- 第二代开放信息抽取系统(人工规则, rule-based, 先关系再实体)一.第二代开放信息抽取系统背景第一代开放信息抽取系统(Open Information Extraction， OIE， learning-based, 自学习, 先抽取实体)通常抽取大量冗余信息，为了消除这些冗余信息，诞生了第二代开放信息抽取系统。二.第二代开放信息抽取系统历史第二代开放信息抽取系统着眼于解决第一代系统的三大问题: 大量非信息性提取（即省略关键信息的提取）、_语义角色增强的关系抽取