css標籤

時間 2019-11-20

標籤 css 標籤欄目 CSS 简体版

原文原文鏈接

HTML標記
<ol>
    <li>標記英文點擊tab鍵直接補全標記</li>

    <li>標記通常成對出現，除了個別單標記</li>

    <li>註釋快捷鍵：ctrl+?</li>
</ol>html

1.引用瀏覽器

`<!DOCTYPE html>`安全

2.開始標記ide

`<html>` oop

3.字符編碼集post

`<meta charset="UTF-8">`字體

4.標記標題搜索引擎

`<title></title>`

5.標題標記編碼

`<h1></h1>` url

6.分割標記

`<hr/>`

7.強制換行標記

`<br/>`

8.無序標記

`<ol>`
` <li></li>`

`</ol>`

9.有序標記

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

`</ul>`

10.空格標記

`<br/><br/>`

12.超連接標記

`<a href="name1.html"></a>`

13.段落標記

`<p></p>`

14.空格，能夠同時使用多個

&nbsp

15.後臺排版是什麼樣，顯示就是什麼樣

16大段引用

`<blockquote></blockquote>`

17.小段引用

`<q></q>

18.樣式：顏色、字體大小

`<span style="color: red;font-size: 20px;"></span>`

19.超連接

`<a href="http://www.baidu.com" target="_blank"></a>`

20.圖片顯示

<!--<img src="card1.gif" alt="撲克牌"/>
<!--<img src="img/card1.gif" alt="撲克牌"/>
<img src="img/card1.gif" alt="puk"/>

21.加粗，語氣強調

<strong>我是strong標記</strong>

22.加粗

<b></b>

23.斜體，語氣強調

<em>我是em標記</em>

24.斜體

<i>我是i標記</i>

25.劃分區塊

26.圖片的定義

`<figare>
<image src="img/文件名" alt="米奇「>

<figcaotion>米奇</figcaotion>
<figare>`

27.視頻播放

`<video src="img/movie.mp4" controls autopiay loop></video>`

28.音頻播放

`<audio src="img/blouke.wav" controls autopiay loop></audio>`

29.表格

01.

`
<table border="1">

<caption>XX班級人員表</caption>`
    <tr>

<th>姓名</th>
        <th>年齡</th>
        <th>班級</th>
        <th>備註</th>
    </tr>
    <tr>
        
        <td colspan="4" align="right">666</td>
    </tr>
    <tr>
        
        <td>AC</td>
        <td>+/-</td>
        <td>%</td>
        <td>/</td>
    </tr>
    </table>`
30.表單

`
<form action="#" method="get">

<input type="text" piaceholder="請輸入帳號"/>

<input type="text" maxlength="6"/>

<input type="button" value="搜索"/>

     
     <input type="submit">
     <button>提交按鈕</button>

<input type="reselt">

足球<input type="checjbox"/>
     手球<input type="checjbox"/>
     頭球<input type="checjbox"/>

     
     男<input type="radio" name="sex"/>
     女<input type="radio" name="sex"/>

     <!--增長「用戶名的點擊區域，使用戶點擊用戶名或者勾選框時都能實現效果，其中id不會出現相同」->
     <label for="username"> 用戶名</label>
     <input type="text" id="username"/>

<!--下拉框,name和id能夠暫時不用寫」->
    <select name="" id="guojia" >
    <option value="china">中國</option>
    <option value="eluosi">俄羅斯</option>
    <option value="yindu">印度</option>
    <option value="feizhou">非洲</option>
    </select>

<!--多行文本框，能夠設置樣式」->
<textarea name="" id="" cols="50" rows="5"></textarea>

</form>
總結：

post相對於get更安全

ID具備惟一性，對前臺而言能夠快速找到元素，修改樣式

name對後臺而言有利於數據管理

31.網頁結構

01.article

     `<article>
          <h1>章節1</h1>
          <p>文章</p>
          <article>評論1</article>
          <article>評論2</article>
      </article>`

02.section:子集必定有標題標記

      <body>
         <scetion>
           <h1>章節1</h1>
           <p>詳細內容</p>
         </scetion>
         body>
         <scetion>
           <h1>章節1</h1>
           <p>詳細內容</p>
         </scetion>
     </body>`

03.aside:用來裝載非正文的內容，例如廣告。成組的連接，側邊欄。

04.nav:網頁導航

      <nav>
           <a href="#">新聞</a>
           <a href="#">新聞</a>
       <nav>
05.sup/sub:上標、下標

      <p><sup>2</sup></p>
      <p><sub>2</sub></p>
05.time:時間通常要用time框起來

      <p>咱們<time>18:00</time>下班</p>

32.塊元素/行內元素

<span style=color:blue>**塊級元素:**

<pre>
div-劃分區塊 dl-定義列表 form-表單 h1-一級標題

hr-水平分割線 ol-有序排列 p-段落 ul-無序排列

address-擁有者的地址 table-表格 pre-格式化文本
</pre>

<span style=color:blue>**行內元素:**
<pre>
abbr-縮寫 br-強制換行 em-強調，斜體 q-小段引用

q-小段引用 select-項目選擇 i-斜體 img-圖片

input-輸入框 label-表格標籤 span-定義文本內區塊 strong-粗體，強調

sub-下標 sup-上標 textarea-多行對話框

</pre>
33.HTML語義化

`語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標籤（代碼語義化），可以便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
　　1.語義化有利於SEO，有利於搜索引擎爬蟲更好的理解咱們的網頁，從而獲取更多的有效信息，提高網頁的權重。
　　2.在沒有CSS的時候可以清晰的看出網頁的結構，加強可讀性。
　　3.便於團隊開發和維護，語義化的HTML可讓開發者更容易的看明白，從而提升團隊的效率和協調能力。
　　4.支持多終端設備的瀏覽器渲染。`
　　
34.新增表單元素

email 類型用於驗證email的格式，當提交表單時會自動驗證email域的值

•url 類型用於驗證 URL 地址的格式，當提交表單時會自動驗證url域的值

•number 類型會根據你的設置提供選擇數字的功能，min屬性設置最小值、max屬性設置最大值，value屬性設置當前值，step屬性設定每次增加的值，某些瀏覽器還不支持

•range 類型用於應該包含必定範圍內數字值的輸入域，其會以一個滑塊的形式展示，min屬性設置最小值、max屬性設置最大值，value屬性設置當前值，若是沒有設置，則其默認值的範圍是1-100

•日期和時間類型：HTML5 擁有多個可供選取日期和時間的新輸入類型：

date - 選取日、月、年

month - 選取月、年

week - 選取周和年

time - 選取時間（小時和分鐘）

datetime - 選取時間、日、月、年（UTC 時間）

datetime-local - 選取時間、日、月、年（本地時間）

•search 類型用於搜索域，好比站點搜索或 Google 搜索，爲其加上results="s"屬性，則會在搜索框前面加上一個搜索圖標

•tel類型用於驗證輸入的是不是電話格式的內容，此元素如今尚未瀏覽器支持

•color類型會提供一個顏色拾取器，供用戶選擇顏色，並將用戶選擇的顏色填充到此元素中

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。