C# 正则替换 HTML

则：

<(.[^>]*)> 删除所有的 <>

<!--.* 删除所有的注释内容

-->

全部代码：

一章职业规划和前景

职业方向规划定位：
web前端开发工程师
web网站架构师
自己创业
转岗管理或其他
web前端开发的前景展望：
未来IT行业企业需求最多的人才
结合最新的html5抢占移动端的市场
自己创业做老板
随着互联网的普及web开发成为企业的宠儿和核心
web职业发展目标：
第一、梳理知识架构
负责内容的HTML
负责外观的css（层叠样式表）
负责行为的js
ps切图
第二、分解目标（起步阶段、提升阶段、成型阶段）
起步阶段：
基本知识的掌握
常用工具的掌握
沟通技巧的掌握（围绕客户的需求）
良好的开发习惯（加注释、对齐方式）
提升阶段：
熟悉掌握HTML基本标签和属性
熟练掌握css的基本语法和使用
浏览器兼容和w3c标准的掌握
结合html+css+js开始系统项目的开发
成型阶段：
精通DIV+CCS布局
精通css样式表控制html标签
熟悉运用js制作动态网站的效果
能独立开发完成网站

第二章 html基本结构

认识HTML：
html不是一种编程语言，是一种标志语言
标记语言是由一套标识标签组成的
html使用标签来描述网页
html结构：

<html>
 <head></head>
 <body></body>
</html>

不成对出现的标签
<br> <hr> <meta> <img> <input..> <option..> <link>
HTML 基本标签的讲解：
<html> <head> <body>标签
<h1>—-<h6>仅仅用于标题文本，不要为了产生粗体文本使用它们
<p>标签段落标签
<strong><b>标签
都会让文字产生加粗效果
<strong>用于强调文本，强度更深，表示重要文本—>用于SEO优化
<b>只是视觉加粗效果—>单纯为了产生加粗
<em> <i>标签
em用于强调文本
i只是视觉斜体效果
<strong>比<em>强调更强
特殊符号：
—->空格
> —>大于号
&lt；—>小于号
&quot；—>引号
©–>版权号

第三章 html基本标签

HTMl基本标签：
span标签
对被用来组合文档中的行内元素
注意：span没有固定的格式表现，当对它应用样式时，才会产生视觉上的变化
<pre>标签
文字的格式按源码的排版来显示，我们称之为预处理格式
<a>标签—>他有一个必不可少的属性 href
target属性：
_self(在原来页面打开)
_blank（新窗口打开）
_top（打开时忽略所有的框架）
_parent（在父窗口中打开）
创建锚点和锚链接
锚点也是一种超链接，是页面内进行跳转的超链接
第一步：创建锚点 <a name="锚点名称"></a>
第二步：使用创建好的锚点名称 <a href="#锚点名称">内容</a>
marquee标签
可以创建一个内容滚动效果

<marquee direction="down" loop="4" onmouseover=this.stop() onmouseout=this.start()></marquee>

direction 表示滚动方向，取值有（left,right,up,down,默认left）
loop表示滚动循环的次数，默认为无限循环

onmouseover=this.stop() onmouseover=this.start() scrollamout="1"(滚动速度)

表示当鼠标移上区域的时候停止滚动，鼠标移开继续滚动

第四章 img图片标签与路径

图片标签与路径：
常见图片格式 jpg png gif
Gif （只支持全透明）
Jpeg /jpg
Png 半/全透明都支持
图片标签写法：
<img src="" alt="" width="" height="" />
图片四要素：
src="" 图片路径
alt="" 图片含义
width="" 图片宽度和图片大小保持一致
height="" 图片高度和图片大小保持一致
title=""
路径知识：
相对路径、绝对路径：
相对路径：(Relative Path) 相对于该文件的路径；
绝对路径：(Absolute Path) 从磁盘出发的路径；
<img src="" …… align="" /> align属性–设置图片与后面文字的位置关系
值–top、bottom、middle、absmiddle、left、right
在静态页面中：
/开头表示根目录；
./表示当前目录；（斜画线前面一个点）
../上级目录；（斜画线前面两个点）
直接用文件名不带/也表示同一目录
这些都是相对于当前文件的位置来说的，如果用绝对路径的话就是写全了。

第五章三种列表的讲解

三种列表的知识讲解：
<ul>无序列表
无序列表是一个没有顺序项目的列表，此列表项默认粗体圆点进行标识

<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

有序列表

有序列表也是一列项目，只是列表项目使用的是数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li>标签。

<ol>
 <li>内容一</li>
 <li>内容二</li>
 <li>内容三</li>
</ol>

列表符号
无序列表-列表符号:
type="circle" 空心圆 type=“disc” 实心圆默认值 type="square" 方块符
有序列表-列表符号
type="A" A B C D
type="a" a b c d
type="1" 1 2 3 4 默认值type=”I” I II III type=”i” i ii iii
列表嵌套
无序列表-嵌套

<ul>
 <li>柚子
 <ul>
 <li>沙田柚</li>
 <li>蜜柚</li>
 </ul>
 </li>
 <li>荔枝</li>
 <li>苹果</li></ul>

有序列表-嵌套

<ol>
 <li>茶
 <ul>
 <li>红茶</li>
 <li>绿茶</li>
 </ul>
 </li>
 <li>果汁</li>
 <li>牛奶</li></ol>

定义列表
定义列表不仅仅是一列项目，而是项目及其注释的组合。定义列表以 <dl> 标签开始。每个定义列表项以 <dt>开始。每个自定义列表项的定义以 <dd> 开始。

<dl> 
 <dt>pc网页制作</dt> 
 <dd>学习DIV+CSS JS JQ 项目实战</dd> 
 <dt>手机网页制作</dt> 
 <dd>手机网页制作实战</dd>
</dl>

dd是对dt的解释
< dl>< /dl>用来创建一个普通的列表,
< dt>< /dt>用来创建列表中的上层项目，
< dd>< /dd>用来创建列表中最下层项目，
< dt>< /dt>和< dd>< /dd>都必须放在< dl>< /dl>标志对之间。

<dl>
 <dt>中国城市</dt>
 <dd>北京 </dd>
 <dd>上海 </dd>
 <dd>广州 </dd>
 <dt>美国城市</dt>
 <dd>华盛顿 </dd>
 <dd>芝加哥 </dd>
 <dd>纽约 </dd>
</dl>

dl是definition list的缩写
dt是definition title的缩写
dd是definition description的缩写
list-style属性具有三个属性分量：
list-style-position ：设置列表项图标的位置，位于文本内或者文本外
list-style-type：设置列表项图标的类型
list-style-image：使用图像设置列表项图标

第六章表单元素(上)

表单标签:
<form>表单标签
<form>表单是一个包含表单元素的区域，包括起来的都是表单的内容

<form>
 <input type="text"/>
</form>

HTML标签 - Action和确认按钮：
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

<form action="html.do" method="get"> 
 username: <input type="text" name="user" /> 
 <input type="submit" value="提 交" />
</form>

HTML标签 - 隐藏域隐藏标签：
隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器

<form> 
 <input type="hidden" name="hid" value="value">
</form>

<input>标签的掌握
常用type类型：
<input type="" name="" value="" />
type="text" 单行文本输入框
type="password" 密码（maxlength=""）
type="radio" 单项选择（checked="checked"）
type="checkbox" 多项选择
type="button" 按钮
type="submit" 提交 type="image"图片提交
type="file" 上传文件
type="reset"重置
type="hidden" 隐藏
关于表单中的设置默认值：

<input type="text" name="" value="今天心情不错" />
<input type="radio" name="" value="" checked="checked">
<input type="checkbox" name="" value="" checked="checked">

<select name="" >
 <option value=""></option>
 <option value="" selected="selected"></option>
<select>

textarea没有默认值
<label>标签的使用
<label></label>
label 元素不会向用户呈现任何特殊效果。
不过，它为鼠标用户改进了可用性。
如果您在 label 元素内点击文本，就会触发此控件。
就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的for 属性应当与相关元素的 id属性相同。
例子：（重要—注册表单–用户体验–必做）

<p>单向选择</p>
<label for="male">男：</label><input type="radio" name="sex" id="male"/>
<label for="nv">女：</label><input type="radio" name="sex"checked="check"/>

第七章表单和表格(下)

表单和表格标签：
<textarea>文本域标签
<textarea>标签：
<textarea></textarea>是文本域标签，可以在其中插入一段文字内容，它有两个常用属性rows和cols
注意：
rows表示这个文本域有多少行
cols表示这个文本域有多少列
除了这两个属性它还有readonly（只读，文本域的内容无法改变，相当于协议）和title（鼠标放上提示）
<select>标签的掌握
注：当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name属性

<form> 
 <select name="" id="">
 <option value="1">1月</option> 
 <option value="2">2月</option> 
</select>
</form>

常用到的属性：disabled=“disabled” name="sel" size="2"
<table>表格标签
<table>表格标签：<table>是表格标签，可以用它定义一个表格。

<table border="1">
 <tr>
 <td>姓名</td>
 <td>性别</td>
 </tr>
</table>

注意：<table>的border属性不能少
<tr> <td>标签的使用
<tr>行标签：
<tr>可以定义表格中的一行，一个<tr></tr>表示一行。

<table border="1">
<tr>
 <td>姓名</td>
 <td>性别</td>
</tr>
<tr>
 <td>姓名</td>
 <td>性别</td>
</tr>
</table>

<td>单元格标签:
<td>可以定义表格中的一个单元格，<td></td>表示一个单元格。

<table border="1">
<tr>
<td >姓名</td>
<td>性别</td>
<td>爱好</td>
</tr>
</table>

border-collapse 属性设置是否将表格边框折叠为单一边框：
border-collapse:collapse;
colspan左右合并
rowspan上下合并

第一部分总结：

非可视化标签：head meta style scrpit...
可视化标签：img div span a ul li…
只有可视化标签，才能用css改变它
单标签：meta link base img input br hr
双标签：html head body div a p span ..ul li ol dl ….
常用可视化标签
div
一般用它来布局
a 超链接标签
href*属性：设置跳转的网页地址
target属性：设置跳转的目标
结论：凡事页面可以点击跳转或者表单提交的文字，都用a标签
img
src*属性用来设置图片的url数据
alt提供给搜索引擎搜索的
width
height
结论：显示图片
ul li
列表
结论：只要将来设计页面中有固定样式的列表，就用ul和li
table caption tr td (th)
慢慢已经被淘汰了被ul li代替
如果是合并竖排的就是合并行（rowspan）
如果是合并横排的就是合并列（colspan）

HTML部分导图总结

HTML5标签集合

学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料，一起学习，一起成长！

TML

本文，有很多很棘手的问题，例如使用sublime 编辑器可能安装插件的时候会使用不了view in browser我公司的电脑可以安装、结果家里的电脑就报编码错误、需要改sublime插件源代码解码成utf8就可以了、还有一直连不上packagecontrol的网页，可以群（526929231）使劲砸我得到解决~ sublime编辑器对于前端来说确实很好用！很好用！很好用！ SublimeText、Webstorm推荐这两个编辑器

HTML起源

刚开始设计HTML语言是为了將文字图像关联在一起，用另一台发送或接收

HTML(HyperTextMark-up Language)超文本标记语言

HTML 不是一种编程语言，而是一中标记语言(mark-up language),标记语言是一套标记标签(mark-up tag)

HTML标签

标签是由尖括号 < > 把关键词括起来，标签通常是成对出现的

Web浏览器

读取 HTML 文档，使用标签来解析页面的内容，以网页的形式现实，浏览器不会现实HTML标签

现在市场上主流五大浏览器

每种浏览器都有自己的内核(引擎)（解析网页的一个程序，io以什么方式去渲染它都要通过引擎去执行）

目前主流的浏览器分为五种

Chrome谷歌浏览器（Webkit内核，V8 js引擎）
Firefox火狐浏览器（Gecko内核）
Internet Explorer IE浏览器（ Trident内核）
Opera 欧朋浏览器（Presto内核）主要市场：移动端
Safari 苹果浏览器（Webkit内核，但JS引擎为Nitro）
不需要去记，简单了解下

标签使用规范

标签必须闭合
所有标签名一律小写
代码缩进，使阅读代码更加易懂
特殊符号规范使用
命名规范，见名之意

PS: 所有的标记符号都是半角英文

编辑器

众说纷纭编辑器太多，最终只是一个工具，希望同学们能从万千世界中找到适合自己的编辑器伙伴

编辑器	描述
EditPlus	手写模式，适合初学手写，无代码提示(有IE调试视图)
Sublime	插件特别多，占用内存小，启动速度快，打开大项目较慢，管理文件方式有些缺陷
webstorm	集成插件特别多，启动较慢，占用内存大，开发和管理视图都很方便
Dreamweaver	适合初学，主要代码提示和代码插入功能强大，主要偏向于设计(有设计视图)

Sublime插件列表

插件名	描述	详情请戳
emmet	前端自动补全，提供快捷补全方式
ColorPicker	调色板，颜色选择器
SublimeTmpl	sublime模板，可以快速创建一个HTML模板
view in browser	用快捷方式打开浏览器进行调试HTML(需要配置参考后面网页)
LiveReload	实时刷新HTML(编辑器里按下保存ctrl+s的时候，已经打开的HTMl会自动刷新)	谷歌插件文件安装方法需要配合谷歌LiveReload插件插件文件下载
Color Highlighter	CSS颜色代码高亮及颜色预览提示
CSS3	CSS3的代码高亮提示	还针对了CSS3的选择器及锚类选择器`:hover :first-child :first-child ...`的高亮
JavaScript Completions	原生js 代码提示
Sublime-Better-Completion	可自选开启代码提示，支持jQ、js、bootstrap、php、sql ...	仓库地址此插件只能通过Github克隆下载安装安装方法

注：Github 网页中下面是有详细的使用方法 packagecontrol.io官网里面search 可以进行搜索插件名字来找到具体使用方法，还有什么不懂或者安装出现编码错误以及安装不上的可以拍打我~

模板的配置

配置	描述
!DOCTYPE html	不是标签，主要用于文档类型的声明
charset="utf-8"	声明字符编码集
http-equiv="Content-Type"	把Content属性关联到HTTP头部(协议头)

HTML模板

简单了解，并不需要熟练掌握

HTML树状结构

Dom节点树

HTML网页扩展名

.html .htm这两种是比较常见的
在早期系统中文件名是有8+3组成三个扩展名所以不支持四个字母的扩展采用.htm
现在通常使用.html作为扩展名

标签的学习

接下来所有的标签元素学习都在body标签里面去敲打实现、

H标签

为了突出标题，字体大小和加粗发生相应的改变

<h1>我是大主题</h1>
<h2>我是大主题</h2>
<h3>我是大主题</h3>
<h4>我是大主题</h4>
<h5>我是大主题</h5>
<h6>我是大主题</h6>

<!doctype html><!-- 让浏览器使用html5的标准解析 -->
<html>
 <head>
 <!-- 设置字符编码集让浏览器使用utf8解析当前网页 -->
 <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
 <meta name="keywords" content="SEO搜索引擎，关键词，多个请用逗号分开" />
 <meta name="description" content="网页描述，八十字内" />
 <title>浏览器标签页上的网页标题</title>
 </head>
 <body> <!-- 所有的标签学习都在这body里面去敲，上面head元素里面的内容做个了解就可以了 -->
 
 <h1>我是大标题</h1>
 <h2>我是主题2</h2>
 <h3>我是主题3</h3>
 <h4>我是主题4</h4>
 <h5>我是主题5</h5>
 <h6>我是主题6</h6>
 
 </body>
</html>

可以发现h标签从h1到h6会随着数值越小字越小，并且都是会加粗和各占一行的状态（前后的元素都会被换行）

h1标签一般一个页面里面只会写一次，为了让搜索引擎爬取到 (写一次利于SEO搜索引擎优化)

p段落标签

<p>
 冬着一身素衣，缓缓而来，季节没有了往日的姹紫嫣红，却用简单的线条，勾勒出一幅洁白的画，纯洁通透，轻盈自然。
</p>

特殊符号

刚我们了解到了浏览器是识别尖括号的，如果要在页面中显示html标记那要怎么做呢？这时候就需要特殊符号的表示来显示

符号	描述
空格
小于	<
大于	>
引号	"
版权	©
×叉	×
&	&

加粗标签

符号	描述
B标签	物理加粗，页面呈现加粗状态.
Strong标签	不仅能加粗，还利于搜索引擎优化

<b>物理加粗，页面呈现加粗状态.</b>

<strong>不仅能加粗，还利于搜索引擎优化，就是类似于百度、谷歌这种搜索引擎爬取你的网页的时候会查找这个标签里面的内容来优化显示网页的排名</strong>

可以根据word文档上面发现 b是加粗 u是下划线 i是倾斜同样适用于标签
<i>我是倾斜</i> <u>我加了下划线</u>

A标签

链接一个页面,点击则会跳转这个链接页面
使用锚点滚动到设定的位置

<a href=""></a> a标签中的href控制点击的时候跳转到哪里如果没写表示刷新当前页面


<a href="#"></a> 跳转到当前页面(回归到页面顶部)


<a href="javascript： void(0);"></a> 死链接，不会跳转，一般用于js特效


<a href="#name">锚点到一个标签上所对应的ID名字，点击则跳到那个标签位置</a>


<a href="http://baidu.com">跳转到百度</a> 跳转到百度 需要注意的是 http 协议不能少

点击#flag的a标签的时候会跳到到上面h2标签

只有拥有name属性的
a标签
才能锚点,还有一种方式是通过ID标识唯一元素，也可以跳转(不仅仅是a标签)

补充标签

描述	标签
滚动标签	marquee
字体标签	font
定义水平线	hr

滚动标签

marquee

属性	描述
direction	滚动方向
behivior	行为

behivior

值	描述
alternate	交替滚动
scroll	滚动
slide	滑落

Font标签

属性	描述
color	颜色
size	0-7
face	字体

hr水平线

与font相似，拥有color和size属性

hr标签没有结束标签按照早期的习惯也H5也遵循XHTML的解析所以统一会加一个反斜杠表示结束这个标签，不加也能够正确显示，但是养成一个良好的习惯确实重要，比如微信小程序就是没有结束标签必须要使用一个反斜杠结尾否则直接报错、

练习一、

结合今天所学，写一个简单的网页

内容如下：

写一篇收获或感受 / 写一篇文章 ————> 为什么要自己写，网上一大把哈哈，可以自己写下，锻炼下思维
需要包括h、p、a、加粗
题材不限，至少200字

练习二、

在习题一的文章底部，使用滚动标签进行滚动方向为45°

可以在头部找到我，如有勘误、错别字、尽情见谅很用心的检查了码了这么久

在线咨询

上一篇：html多页面实现背景音乐的连续播放，简单处理笔记
下一篇：vite+vue3实现网页版编辑器，带高亮以及代码提

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商