本系列笔记按照下方顺序记录~
- HTML常用标签
- HTML文本标签
- HTML语义标签
- HTML结构标签
- HTML列表标签
- HTML表格标签
- HTML表单标签
- HTML新增标签和API
- HTML正则表达式匹配标签
HTML文本标签
本篇介绍，HTML中的文本标签，就是用来显示文本的，并且能对文本做一些样式上的处理。
- b标签，表示粗体，能让标签内的文字展示为粗体。
<b>我是b标签内的文字，我会被展示成粗体</b>
- small标签，用于显示小号字体，例如版权信息、法律信息和免责信息等
<small>我是small标签内的文字，你看我是不是比较小</small>
- i标签，对应英文italic，会让文字斜体显示
<i>我是不是变斜了?</i>
- 上标，例如4的2次方
4的二次方4<sup>2</sup>
- 下标，例如双氧水化学式
H<sub>2</sub>O<sub>2</sub>
- span标签，用于行内文字样式
<span style="color:#FA0">皇上万岁万岁万万岁</span><span style="color:#F00">总卿家平身</span>
- font标签，用于给文本设置文字颜色和文字大小， 但在HTML5中不建议使用了，应该用CSS来实现
<font color="red" size="18">我是font中的文字</font>
解惑时间
上面的b标签和strong标签功能一致，i标签和em标签页一样功能一致，那么为什么要搞2套功能一模一样的标签呢？
其实b和i标签为物理元素，它是告诉浏览器，b标签内的文字要显示为粗体，i标签内的文字显示为斜体，就没有其他作用了。而strong、em标签是逻辑元素，它不但能起到加粗或斜体的作用，还起到了强调的作用，例如在语音阅读器中，读取时如果读到了strong标签就会重读，相对于搜索引擎、爬虫、SEO而言，则会更加重视。
完整代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML文本标签</title>
</head>
<body>
<!-- b标签，表示粗体，能让标签内的文字展示为粗体 -->
<b>我是b标签内的文字，我会被展示成粗体</b>
<br/>
<!-- strong标签，作用和b标签效果相同，都是展示位粗体，但是HTML5为strong标签增强了语义 -->
<strong>我是strong标签内的文字，我也会展示为粗体喔</strong>
<br>
<!-- small标签，用于显示小号字体，例如版权信息、法律信息和免责信息等 -->
<small>我是small标签内的文字，你看我是不是比较小</small>
<br>
<!-- i标签，对应英文italic，会让文字斜体显示 -->
<i>我是不是变斜了?</i>
<br>
<!-- em标签，对应英文为emphasize，和i标签一样，都会让文字以斜体显示，但在HTML5种em标签更加具有语义 -->
<em>我也变斜了！</em>
<br>
<!-- 下划线，对应英文underline -->
<u>我是u标签中的文字喔，我有下划线加持</u>
<br>
<!-- 上标，例如4的2次方 -->
4的二次方4<sup>2</sup>
<br>
<!-- 下标，例如双氧水化学式 -->
H<sub>2</sub>O<sub>2</sub>
<br>
<!-- span标签，用于行内文字样式 -->
<span style="color:#FA0">皇上万岁万岁万万岁</span><span style="color:#F00">总卿家平身</span>
<br>
<!-- font标签，用于给文本设置文字颜色和文字大小， 但在HTML5中不建议使用了，应该用CSS来实现-->
<font color="red" size="18">我是font中的文字</font>
<br>
</body>
</html>
正则表达式匹配html标签，获取标签内容
如何获取html中正文的内容
假设我们要获取下面html标签中的内容：
<p>桥边姑娘</p><p>你的芬芳</p><p>我把你放心上</p><p>不想让你流浪</p>
<p><span style="white-space: normal;">王者荣耀</span></p>
第一段是获取<p></p>标签内部的数据，第二个是获取<p><span></span></p>标签中的数据，其中span标签中有style属性值。
使用过正则表达式的同学肯定知道，上面两种情况其实都是一种情况，我们要获取的是尖括号括起来的一对标签中间的数据，起始标签形如<x>，结束标签形如</x>，这里的x表示的html标签。
定义正则表达式
此外，我们还需要考虑起始标签中包含style的数据，另外特殊的<br/>标签，对实际获取数据无意义，也需要过滤掉。
通过上面的分析，我们可以如下正则表达式：
<[a-zA-Z]+.*?>([\s\S]*?)</[a-zA-Z]*?>具体处理过程
数据预处理
在使用正则表达式处理之前，我们先对数据进行预处理，比如style和
标签：
/**
* 替换掉html标签里面的style内容
*
* @param content
* @return
*/
public static String replaceStyle(String content) {
if (content == null || content.length() == 0) {
return content;
}
String regEx = " style=\"(.*?)\"";
Pattern p = Pattern.compile(regEx);
Matcher m = p.matcher(content);
if (m.find()) {
content = m.replaceAll("");
}
return content;
}
/**
* 移除掉</br>标签
*
* @param src
* @return
*/
public static String removeBrTag(String src) {
if (src != null && !src.isEmpty()) {
src = src.replaceAll("<br/>", "");
}
return src;
}
针对标签嵌套的情况
针对多个标签嵌套的情况进行处理，比如 <p><span style="white-space: normal;">王者荣耀</span></p>，在经过预处理和正则匹配的后结果是 <span>王者荣耀，需要手工移除掉前面的起始标签，对应的方法如下：
/**
* 针对多个标签嵌套的情况进行处理
* 比如 <p><span style="white-space: normal;">王者荣耀</span></p>
* 预处理并且正则匹配完之后结果是 <span>王者荣耀
* 需要手工移除掉前面的起始标签
* @param content
* @return
*/
public static String replaceStartTag(String content) {
if (content == null || content.length() == 0) {
return content;
}
String regEx = "<[a-zA-Z]*?>([\\s\\S]*?)";
Pattern p = Pattern.compile(regEx);
Matcher m = p.matcher(content);
if (m.find()) {
content = m.replaceAll("");
}
return content;
}
具体匹配方法
/**
* 匹配html标签，例如"<p>xxx</p>"这种格式
*/
private static Pattern HTML_TAG_PATTERN = Pattern.compile("<[a-zA-Z]+.*?>([\\s\\S]*?)</[a-zA-Z]*?>");
/**
* 获取html中的数据
* @param htmlString
* @return
*/
public static List<String> getResultsFromHtml(String htmlString) {
List<String> results = new ArrayList<>();
// 数据预处理
htmlString = replaceStyle(removeBrTag(htmlString));
if (htmlString != null && htmlString.length() > 0) {
Matcher imageTagMatcher = HTML_TAG_PATTERN.matcher(htmlString);
// 针对多个并列的标签的情况
while (imageTagMatcher.find()) {
String result = "";
// group(1)对应正则表达式中的圆括号括起来的数据
result = imageTagMatcher.group(1).trim();
// 针对多个标签嵌套的情况进行处理
if (result != null && result.length() > 0) {
result = replaceStartTag(result);
}
results.add(result);
}
}
return results;
}
测试验证
测试方法如下：
public static void main(String[] args) {
String ss = "<p>桥边姑娘</p><p>你的芬芳</p><p>我把你放心上</p><p>不想让你流浪</p>";
List<String> results = getResultsFromHtml(ss);
System.out.println("results:" + results);
String ss1 = "<p><span style=\"white-space: normal;\">王者荣耀</span></p>";
List<String> results1 = getResultsFromHtml(ss1);
System.out.println("results1:" + results1);
}
output:
results:[桥边姑娘, 你的芬芳, 我把你放心上, 不想让你流浪]
results1:[王者荣耀]
HTML之文本标签学习，及正则表达式匹配html标签笔记，HTML之文本标签学习，及正则表达式匹配html标签笔记，HTML之文本标签学习，及正则表达式匹配html标签笔记 ，HTML之文本标签学习，及正则表达式匹配html标签笔记，HTML之文本标签学习，及正则表达式匹配html标签笔记