資訊專欄INFORMATION COLUMN
摘要：它倆都提到了超文本。什么是超文本我理解的超文本就是區別于文本，普通文本就是純文字。說完了超文本，那標記語言是什么意思標記就是，給文本打上標簽，代表是什么東西。
目錄
TOC
文檔聲明，這個表示文檔類型是html5文檔
其它的都是固定標簽，這個是叫根標簽,lang表名元素內容的語言。值是符合標準的語言代碼。這里是中國大陸 中文。其最大作用是告訴發生閱讀器的發聲方式，搜索引擎告訴用戶使用哪種語言編寫文檔等。
頭部元素的容器。
頭部內容,里面的標簽是可選用的。
<meta>
<script>
<style>
<link>
</head>
<body>
頁面主體內容，里面的標簽是可以選用的。但是其它就是固定標簽。
<h1>
<p>
<a>
<img>
...
</body>
</html>
<!-- 這是注釋 --> 只有這種注釋方式。注釋中可以直接使用回車換行。</code></pre>
<h5 id="注釋">注釋</h5>
<blockquote>
<p><!-- 這里面的就是注釋 --></p>
</blockquote>
<ol>
<li>HTML注釋不支持嵌套。</li>
<li>HTML注釋不能寫在HTML標簽中。？？？</li>
<li>通常好的注釋方式是，要注釋某段，一般在這段的前面和后面加上注釋；也就是用一個注釋對包裹著需要注釋的代碼段。如下：</li>
</ol>
<pre><code><!-- xx部分 開始 -->
這里放你xx部分的HTML代碼
<!-- xx部分 結束 --></code></pre>
<h4 id="什么是標簽">什么是標簽？</h4>
<ol>
<li>使用尖括號包裹著，且標簽有成對或者單標簽。成對標簽是兩個標簽構成，一個開始標簽一個叫結束標簽，他們之間可以有內容（text,other標簽）；單標簽只有標簽和屬性，單標簽自己結束。</li>
<li>其實看一個html文檔，就是標簽和文本，其它都媒體類型都是標簽包含著，都看作為標簽。</li>
<li>標簽用來表示HTML文檔的結構的。</li>
<li>標簽是可以嵌套的。</li>
<li><p>html標簽不區分大小寫。</p>
<h5 id="標簽分類">標簽分類</h5>
標簽按照有無標識文本：</li>
<li>有文本的，即有開始標簽和結束標簽，它們之間就是文本內容。</li>
<li><p>無文本的，<tag name/> ，這種標簽是不需要具體標識文本內容的。主要使用它們的屬性內容。</p></li>
</ol>
<p>標簽（元素）按照類型分：這個類型影響約束標簽的一些屬性。</p>
<ol>
<li>塊標簽:block 獨占一行 可設置高度，寬度，行高，頂部，底部邊距，默認瀏覽器寬度。</li>
<li>行內標簽:inline 在一行中，不可設置高度，寬度，底部，底部邊距；可以設置行高line-height.</li>
<li>行內塊狀標簽:inline-block 在一行中，可設置高度，寬度，頂部，底部邊距，行高。</li>
</ol>
<p>標簽按照head中和body中：<br />
pass</p>
<blockquote>
<p>標簽可嵌套，但是不是任意標簽都可以隨意嵌套。<br />
無大小寫區別</p>
</blockquote>
<h5 id="什么是標簽屬性">什么是標簽屬性？</h5>
<p>說了標簽有tag名字，有的標簽有包圍著text內容，有的單標簽就沒有text包含。除了前兩，還有一個就是標簽有屬性，就是標簽tag會有什么屬性，可以存K-V鍵值對數據結構，來表示標簽的屬性信息。<br />
那總結下標簽有tag，attrs，text 三要素。<br />
自己理解的標簽屬性：<br />
1.首先，屬性能夠使得標簽信息更多，讓標簽能個有更多的功能。<br />
2.其次，不同的標簽可能有屬于自己的屬性，但是屬性k其實是一個分類，標簽針對同一類屬性使用相同的k，不同的v還可以將v作為k，其還能有content對應的值。如meta標簽的，http-equiv屬性都是http有關的，而其v又作為一個k，對應后面的content值。所以我所屬性擴展出更多屬性，就是通過這樣做出來的。第一個屬性是分類，k的v和后面的content的值才構成了一個k-v的結構。</p>
<p>content和href ，type的特殊共同作用。</p>
<h5 id="適用于大多數html標簽的屬性">適用于大多數HTML標簽的屬性</h5>
<table>
<thead>
<tr class="header">
<th style="text-align: left;">屬性</th>
<th style="text-align: left;">描述</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;">class</td>
<td style="text-align: left;">為html元素定義一個或多個類名classname，類名從樣式文件引用</td>
</tr>
<tr class="even">
<td style="text-align: left;">id</td>
<td style="text-align: left;">定義元素標簽的唯一id</td>
</tr>
<tr class="odd">
<td style="text-align: left;">sytle</td>
<td style="text-align: left;">行內樣式,css樣式放在行內</td>
</tr>
<tr class="even">
<td style="text-align: left;">title</td>
<td style="text-align: left;">描述元素標簽的額外信息(作為工具條使用)</td>
</tr>
</tbody>
</table>
<h4 id="常用標簽">常用標簽</h4>
<table>
<thead>
<tr class="header">
<th style="text-align: center;">標簽名</th>
<th style="text-align: left;">標簽及其內容意思</th>
<th style="text-align: left;">標簽屬性</th>
<th style="text-align: left;">可嵌套在哪些標簽中</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: center;">html</td>
<td style="text-align: left;">html的固定標簽,每個html文檔必須有。</td>
<td style="text-align: left;">lang</td>
<td style="text-align: left;">根節點,最外層</td>
</tr>
<tr class="even">
<td style="text-align: center;"><strong>head</strong></td>
<td style="text-align: left;">文檔頭，描述文檔各個屬性和信息，包括文檔標題；內容就是包含其它標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">只能嵌套在html中，且唯一</td>
</tr>
<tr class="odd">
<td style="text-align: center;">title</td>
<td style="text-align: left;">網頁標題；內容就是標題文本</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">meta</td>
<td style="text-align: left;">提供頁面的原信息；單標簽不會包含內容</td>
<td style="text-align: left;">1.http-equiv;2.name3.content存放前兩個標簽對應的值；</td>
<td style="text-align: left;">嵌套在head標簽</td>
</tr>
<tr class="odd">
<td style="text-align: center;">link</td>
<td style="text-align: left;">定義當前文檔與外部資源的關系，可以鏈接個圖標icon</td>
<td style="text-align: left;">1.rel 必須，表明連接的是是什么；2.href 外部文檔的位置url；3.type MIME類型，規定鏈接文檔的類型；單標簽</td>
<td style="text-align: left;">嵌套在head標簽中</td>
</tr>
<tr class="even">
<td style="text-align: center;">base</td>
<td style="text-align: left;">定義所有下面所有鏈接默認的連接目標地址;單標簽</td>
<td style="text-align: left;">href；target</td>
<td style="text-align: left;">嵌套在head標簽</td>
</tr>
<tr class="odd">
<td style="text-align: center;">style</td>
<td style="text-align: left;">定義css樣式</td>
<td style="text-align: left;">type</td>
<td style="text-align: left;">可在head中</td>
</tr>
<tr class="even">
<td style="text-align: center;">body</td>
<td style="text-align: left;">包含標簽;內容就是標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">只能嵌套在html中</td>
</tr>
<tr class="odd">
<td style="text-align: center;">h1</td>
<td style="text-align: left;">表示標題；獨占一行；塊標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">標題只有1-6級別,在body標簽中</td>
</tr>
<tr class="even">
<td style="text-align: center;">p</td>
<td style="text-align: left;">表示段落paragraph的簡寫；獨占一行；塊標簽；瀏覽器會在段落前后添加空行</td>
<td style="text-align: left;">style;id給塊命名,名字唯一</td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">b</td>
<td style="text-align: left;">加粗；行內標簽;</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">strong</td>
<td style="text-align: left;">加粗強調;行內標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">同b,但是strong為盲人閱讀器提供了重讀的效果</td>
</tr>
<tr class="even">
<td style="text-align: center;">i</td>
<td style="text-align: left;">斜體;行內標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">em</td>
<td style="text-align: left;">斜體；行內標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">同i</td>
</tr>
<tr class="even">
<td style="text-align: center;">s</td>
<td style="text-align: left;">刪除線；行內標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">u</td>
<td style="text-align: left;">下劃線標簽；行內標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">sup</td>
<td style="text-align: left;">上標；行內標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">sub</td>
<td style="text-align: left;">下標；行內標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">a</td>
<td style="text-align: left;">超鏈接標簽anchor錨點;行內標簽;對文本、圖片鏈接到其它文本或頁面或圖片</td>
<td style="text-align: left;">target:_blank新頁面打開;_slef當前頁;_top跳出框架;title;href</td>
<td style="text-align: left;">可嵌套在塊標簽中</td>
</tr>
<tr class="odd">
<td style="text-align: center;">li</td>
<td style="text-align: left;">列表中一條記錄;塊標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">嵌套在ol和ul標簽中</td>
</tr>
<tr class="even">
<td style="text-align: center;">ul</td>
<td style="text-align: left;">無序號列表，前面點號；塊標簽</td>
<td style="text-align: left;">type:none,circle,square,disc默認</td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">ol</td>
<td style="text-align: left;">有序號列表，前面是序號；塊標簽</td>
<td style="text-align: left;">type:1,a,A,i,I；style:list-type:none</td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">div</td>
<td style="text-align: left;">分區division,把文檔分割成獨立的不同的部分；塊標簽；想象成其它元素容器</td>
<td style="text-align: left;">id唯一標識，class分類</td>
<td style="text-align: left;">分區還可再分區</td>
</tr>
<tr class="odd">
<td style="text-align: center;">span</td>
<td style="text-align: left;">內聯元素也叫inline行內元素;用來給文本容器；用來設置樣式</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">img</td>
<td style="text-align: left;">圖片；行內塊；</td>
<td style="text-align: left;">src;target;title;style</td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">br</td>
<td style="text-align: left;">換行標簽；</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">hr</td>
<td style="text-align: left;">水平線</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">span</td>
<td style="text-align: left;">將包含的內容摘出，用css表示</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">特殊字符</td>
<td style="text-align: left;">?</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">map</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;">和img有映射關系</td>
</tr>
<tr class="even">
<td style="text-align: center;">area</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;">嵌套在map標簽里</td>
</tr>
<tr class="odd">
<td style="text-align: center;">form</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">input</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">label</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">select</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">option</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">textarea</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">table</td>
<td style="text-align: left;">表格標簽，包裹thead tbody tfoot;</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">thead</td>
<td style="text-align: left;">表格頭標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">tbody</td>
<td style="text-align: left;">表格體標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">tfoot</td>
<td style="text-align: left;">表格腳標簽</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="odd">
<td style="text-align: center;">tr</td>
<td style="text-align: left;">表格的一行</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
<tr class="even">
<td style="text-align: center;">td</td>
<td style="text-align: left;">表格的一個單元；單元可以設置rowspan/colspan來表名表格單元占據幾個行或者列</td>
<td style="text-align: left;"></td>
<td style="text-align: left;"></td>
</tr>
</tbody>
</table>
<h4 id="常用引用標簽">常用引用標簽</h4>
<h5 id="head標簽中的引用">head標簽中的引用</h5>
<pre><code># 引用外部css文件
<link rel='stylesheet' href='url'/>
# 引入外部js文件
<script src='url'></script>
# 引入網站標簽頁圖標
<link rel='icon' href='url'/></code></pre>
<h5 id="body標簽中的引用">body標簽中的引用</h5>
<pre><code># 在body中最后引入js文件
<script src='url'></script></code></pre>
<h4 id="table元素中進行行合并和列合并">table元素中進行行合并和列合并</h4>
<p>做一個課程表</p>
<pre><code><!DOCTYPE HTML>
<html lang='zh-CN'>
<head>
<meta charset='utf-8'/>
<link rel='icon' href='url' />
<title>表格
Monday
Tuseday
Wednesday
Thursday
Friday
AM
數學
音樂
物理
生物
歷史
語文
數學
英語
地理
化學
PM
歷史
語文
數學
英語
地理
語文
數學
英語
地理
化學
Night
數學
英語
首先table中合并都是在單元標簽td中的colspan rowspan熟悉來設置的。
colspan表明這個單元占據指定數的列，那么它所在的行tr的其它單元格數相應減少。
rowspan表明這個單元占據指定數的行，那么它的下一行在這個單元同列的單元就不用再有了。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2042.html
摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。 下載：PDF ...
摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。 下載：PDF ...
摘要：年，和前端開發者與應用程序前端開發者之間產生了巨大的分歧。開發最常見的解決方案有手機和平板的原生應用程序桌面應用程序桌面應用程序原生技術最后，前端開發者可以從瀏覽器開發中學習到，編寫代碼不需要考慮瀏覽器引擎的限制。 前端開發者手冊2019 Cody Lindley 編著 原文地址 本手冊由Frontend Masters贊助，通過深入現代化的前端工程課程來提高你的技能。 下載：PDF ...
摘要：前端和后端是計算機行業最常用的兩個術語在某種程度上，它們成了流行語。前端開發人員也稱為前端設計師，他們可以創建一個沒有任何后端開發的站點。 前端和后端是計算機行業最常用的兩個術語；在某種程度上，它們成了流行語。它們決定了你作為軟件開發人員的工作類型、你使用的技術以及你得到的報酬。那么，讓我們來談談這兩個術語之間的區別，它們...
摘要：官方規范估計很難出現現代框架的設計了，因為官方設計中前端三劍客是相互分離的方案，為了解決現階段前端框架的問題，必須由完全接管，這幾乎就是，或者支持語法的，可這與最初網頁設計思路是違背的。現代前端框架正在告訴我們新的三劍客虛擬虛擬。 1 引言 深入思考為何前端需要框架，以及 web components 是否可以代替前端框架？ 原文地址，建議先閱讀原文，或者閱讀概述。 2 概述 現在前端...
摘要：一些知識點有哪些方法方法前端從入門菜鳥到實踐老司機所需要的資料與指南合集前端掘金前端從入門菜鳥到實踐老司機所需要的資料與指南合集歸屬于筆者的前端入門與最佳實踐。 工欲善其事必先利其器-前端實習簡歷篇 - 掘金 有幸認識很多在大廠工作的學長，在春招正式開始前為我提供很多內部推薦的機會，非常感謝他們對我的幫助。現在就要去北京了，對第一份正式的實習工作也充滿期待，也希望把自己遇到的一些問題和...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3558·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
