經常使用的HTML標記整理

時間  2019-11-16
標籤 經常 使用 html 標記 整理 欄目 HTML 简体版
原文   原文鏈接

文章CSDN地址：https://blog.csdn.net/Ght1997...
文章GitHub地址：https://github.com/ght1997012...
文章segmentfault地址：https://segmentfault.com/a/11...
文章簡書地址：https://www.jianshu.com/p/26b...javascript

1、大致格式css

<!Doctype html>
   <html>
      <head>
           <title>標題</title>
            <meta charset="utf-8">（記事本爲gb2312)
         <body>
       
         </body>
      </head>
   </html>

2、html

1.超連接標記前端

<a href="要訪問的資源地址" target="_self默認本窗口覆蓋顯示/_blank新窗口顯示/框架名-指定框架中顯示" title="提示信息"></a>

    郵件超連接:點擊郵件超連接，會自動打開你電腦上郵件發送軟件，將收件人地址自動填充（foxmail ）
     <a href="mailto:asdfs@asdf.com"></a>

    錨連接（書籤連接）:
    訪問連接<a href="url#name"></a>
    定義錨點:<a name="錨名"></a>

2.<br> 換行java

3.&nbsp; 空格git

4.<meta http-equiv="refresh"content="10"> refresh設定本網頁自動刷新時間間隔秒數（10秒）程序員

5.<meta http-equiv="refresh"content="10";url=http://www.baidu.com> 設定本網頁十秒後跳轉到其餘界面或網頁github

6.網站前端三層 (x)html 結構層--html結構 css 表現層--決定html的樣式 javascript 動做層--決定html如何交互segmentfault

7.HTML基本語法:
<標記名 屬性="值" 屬性="值" ></標記名>瀏覽器

舉例子:

<font color="red" size="7" face="隸書">
  我是帥哥
</font>

8.標記的屬性和標記不能分離
一說屬性必須得說哪個標記的屬性，屬性不能單獨說
<font color="" face=" size="" ></font>

<p align=""></p>

9.HTML裏面的註釋

<!-- -->

說明:註釋是給程序員看的

10.規範:
--標記和屬性所有小寫
--屬性值必須加""
--雙標記必須雙着用
--單標記必須關閉 <img /> <input />
--標記只能嵌套不能交叉

11.文字標記
<font color="文字顏色" face="字體名稱" size="1-7文字大小默認3"></font>

12.文字修飾標記
加粗 <b></b> <strong></strong>
傾斜 <i></i> <em></em>
下劃線 <u></u>
刪除線<del></del>
地址<address></address>
上標 <sup></sup>
下標 <sub></sub>

13.段落標記:一個p至關於一個回車換行，/p至關於一個回車換行
<p align="水平對齊方式left默認/center/right"></p>

14.橫線:

<hr width="寬度" size="粗細" color="顏色" align="水平對齊方式left/center默認/right" noshade是否有陰影>

15.預格式化:保留源代碼中空格，不忽略源代碼中的空格
<pre></pre>

16.忽略HTML標記<xmp></xmp>

17.設置段落縮進<blockquote></blockquote>

18.
無序列表 ul
有序列表 ol
定義列表 dl
目錄列表 dir
菜單列表 menu

無序列表
<ul type="disc/circle/square">
<li type="disc/circle/square">
</li>
</ul>

有序列表
<ol type="1/A/a/i/I" start="從第幾項開始">
<li>
</li>
</ol>

定義列表:

<dl>
      <dt>定義</dt>
      <dd>解釋1</dd>
      <dd>解釋2</dd>
      <dd>解釋3</dd>
      <dt>定義</dt>
      <dd>解釋1</dd>
      <dd>解釋2</dd>
      <dd>解釋3</dd>
      <dt>定義</dt>
      <dd>解釋1</dd>
      <dd>解釋2</dd>
      <dd>解釋3</dd>
   </dl>

19.<img src="圖片來源" alt="替換文本" title="全局屬性每一個標記都會有提示信息" align="圖片水平對齊方式left默認/right-----top/middle/bottom圖片後面文字的對齊方式" width="像素/百分比" height="像素/百分比">
說明：路徑分爲 相對路徑（從當前文檔開始）

絕對路徑（從盤符開始）---不可能用

20.移動<marquee bgcolor="背景顏色" behavior="slide一次/scroll循環/alternate來回動" scrollamount="速度" scrolldelay="延遲" direction="移動方向left默認/right/up/down"/></marquee>

21.單元格<tr>行</tr><td>列</td>

<table border="表格邊框" width="表格寬度" height="表格高度" bgcolor="背景顏色" background="表格背景圖片"cellspacing="單元格之間的距離" cellpadding="單元格里邊的內容距離邊框的距離" align="表格對齊方式">
     <tr align="單元格中水平對齊方式
left/center/right" valign="單元格中內容垂直對齊方式top/middle/bottom ">
         <td colspan="跨列合併單元格" rowspan="跨行合併單元格"></td>
         <td></td>
         <td></td>
     </tr>
     <tr><td></td>
         <td></td>
         <td></td>
     </tr>
    </table>

22.框架集和框架

<frameset cois="豎着分割" rows="橫着分割"/>
    <frame name="框架的名字" src="鏈接的資源"/>
    <frame name="框架的名字" src="連接的資源"/>
</frameset>

 例子:<frameset rows="25,75/*">
         <frame name="  " src="  "/>
      </frameset>

  浮動框架：講一個獨立的HTML頁面嵌入到當前頁面中
  <iframe name=""src="" width="" height=""></iframe>

23.<form name="表單名稱" action="數據提交到的地址/腳本/頁面" method="get默認/post"></from>

※ method="get/post"
    相同點：都是數據提交的方式，提交的數據是相同的
    不一樣點：
         ①get原理 ：數據和HTML文檔的頭部<head></head>信息一塊兒提交
              特色 ：大小受到文檔頭部大小限制
                     數據附加到url？後面
         ②post原理：數據和HTML文檔正文<body></body>之間信息一塊兒提交
               特色：大小沒有限制
                     數據不會附加到url？後面

說明：什麼是數據？答：數據是用戶填寫的或選擇的表單項（信息）

表單項：表單裏面的項目
輸入元素：<input type="text默認"/>輸入文本框
                         "password"密碼框
                         "radio"單選按鈕
                         "checkbox"複選框
                         "file"文件域
                         "image"圖像域
                         "hidden"隱藏域
                         "button"按鈕
                         "reset"重置
                         "submit"提交
<select></select>      <textarea></textarea>

        (1)輸入文本框：<input type="text" name="" value="默認值" max-length="最大字符數" size="多少個字符的寬度" readonly只讀 disabled禁用/>
        (2)密碼框：<input type="password" name="" max-length="" size="" readonly disabled/>
        (3)單選按鈕：單選按鈕要是同一組的 那麼name值相同；若是不一樣，name值不一樣。
                     <input type="radio" name="ri" value="">提示
                     <input type="radio" name="ri" value="">提示
        (4)複選框：多選，name值相同也行，不一樣也行<input type="checkbox" name="" value="">
        (5)文件域：<input type="file" name="">
        (6)圖像域：代替submit樣子，若是你以爲submit很差看，那麼你可使用PS作一個圖代替submit。<input type="image" src="">
        (7)按鈕：<input type="button" name="" value="按鈕"> 
        (8)重置按鈕：將全部表單項重置爲默認值而不是清空<input type="reset" name="" value="">
        (9)提交按鈕：點擊提交按鈕後瀏覽器自動將表單項數據發送給action因此所指地址<input type="submit" name="sub" value="">
        (10)select標籤；單選下拉菜單和多選列表
            ①單選下拉菜單：
              <select name="">
                  <option value=""></option>
                  <option value=""></option>
                  <option value=""></option>
                  <option value=""></option>
              </select>
            ②多選列表
              <select name="" size="大小" multiple多選ctrl shift>
                  <option value=""></option>
                  <option value=""></option>
                  <option value=""></option>
                  <option value=""></option>
              </select>
          (11)文本域：例如新浪微博，發表微博。百度貼吧，發佈帖子
              <textarea name="" cols="多少個字符寬度" rows="多少個字符高度"></textarea>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程