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 >跳轉到百度</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小時內與您取得聯系。

整合營銷服務商