整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          C# 正則替換 HTML

          則:

          <script[^>]*?>.*?</script> 刪除所有js腳本

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

          <!--.* 刪除所有的注釋內容

          -->

          全部代碼:


          一章 職業規劃和前景


          • 職業方向規劃定位:
          • 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>
          
          1. 有序列表
          • 有序列表也是一列項目,只是列表項目使用的是數字進行標記。 有序列表始于 <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)

            不需要去記,簡單了解下

          標簽使用規范

          1. 標簽必須閉合

          2. 所有標簽名一律小寫

          3. 代碼縮進,使閱讀代碼更加易懂

          4. 特殊符號規范使用

          5. 命名規范,見名之意

          PS: 所有的標記符號都是半角英文

          編輯器

          眾說紛紜編輯器太多,最終只是一個工具,希望同學們能從萬千世界中找到適合自己的編輯器伙伴

          編輯器描述
          EditPlus手寫模式,適合初學手寫,無代碼提示(有IE調試視圖)
          Sublime 插件特別多,占用內存小,啟動速度快,打開大項目較慢,管理文件方式有些缺陷
          webstorm集成插件特別多,啟動較慢,占用內存大,開發和管理視圖都很方便
          Dreamweaver 適合初學,主要代碼提示和代碼插入功能強大,主要偏向于設計(有設計視圖)

          Sublime插件列表

          插件名描述詳情請戳
          emmet前端自動補全,提供快捷補全方式
          ColorPicker調色板,顏色選擇器
          SublimeTmplsublime模板,可以快速創建一個HTML模板
          view in browser用快捷方式打開瀏覽器進行調試HTML(需要配置參考后面網頁)
          LiveReload實時刷新HTML(編輯器里按下保存ctrl+s的時候,已經打開的HTMl會自動刷新)谷歌插件文件安裝方法需要配合谷歌LiveReload插件插件文件下載
          Color HighlighterCSS顏色代碼高亮及顏色預覽提示
          CSS3CSS3的代碼高亮提示還針對了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標記那要怎么做呢?這時候就需要特殊符號的表示來顯示

          符號描述
          空格&nbsp;
          小于&lt;
          大于&gt;
          引號&quot;
          版權&copy;
          ×叉&times;
          &&amp;

          加粗標簽

          符號描述
          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顏色
          size0-7
          face字體

          hr水平線

          與font相似,擁有color和size屬性

          hr標簽沒有結束標簽 按照早期的習慣也H5也遵循XHTML的解析 所以統一會加一個反斜杠表示結束這個標簽,不加也能夠正確顯示,但是養成一個良好的習慣確實重要,比如微信小程序就是沒有結束標簽必須要使用一個反斜杠結尾否則直接報錯、


          練習一、

          結合今天所學,寫一個簡單的網頁

          內容如下:

          • 寫一篇收獲或感受 / 寫一篇文章 ————> 為什么要自己寫,網上一大把哈哈,可以自己寫下,鍛煉下思維

          • 需要包括h、p、a、加粗

          • 題材不限,至少200字

          練習二、

          在習題一的文章底部,使用滾動標簽進行滾動方向為45°

          可以在頭部找到我,如有勘誤、錯別字、盡情見諒很用心的檢查了 碼了這么久


          主站蜘蛛池模板: 激情啪啪精品一区二区| 久久99国产精一区二区三区| 亚洲综合一区二区国产精品| 一区二区不卡视频在线观看| 国产精品伦一区二区三级视频| 久草新视频一区二区三区| 国产成人久久精品一区二区三区| 激情综合丝袜美女一区二区| 国产在线一区二区在线视频| 色老头在线一区二区三区| 福利一区福利二区| 国产精品一区三区| 少妇无码一区二区三区免费| 一区二区传媒有限公司| 一区二区三区高清视频在线观看| 欧洲精品无码一区二区三区在线播放| 少妇人妻偷人精品一区二区| 伦精品一区二区三区视频| 日本人的色道www免费一区| 亚洲图片一区二区| 精品一区二区三区免费| 国产成人高清精品一区二区三区| 日本高清天码一区在线播放| 在线播放国产一区二区三区 | 一区二区高清在线| 国产一区二区在线|播放| 亚洲Av永久无码精品一区二区| 一本大道东京热无码一区| 一区二区三区免费高清视频| 国产一区美女视频| 精品国产一区二区二三区在线观看| 亚洲高清一区二区三区| 精品爆乳一区二区三区无码av| 无码囯产精品一区二区免费 | 国产日韩AV免费无码一区二区 | 91精品一区二区三区在线观看| 亚洲一区免费观看| 91亚洲一区二区在线观看不卡| 一区二区三区人妻无码| 国产a∨精品一区二区三区不卡 | 日本成人一区二区三区|