前端之html的查漏補缺

時間 2019-12-08

標籤前端 html 補缺欄目 HTML 简体版

原文原文鏈接

1、<head>部分

 
   <!-- 聲明該文檔是html5的文檔 --> 
  
   <!DOCTYPE html> 
  
   <!-- lang="en"是說明該網頁主要的語言是英文 --> 
  
   <!-- <html lang="zh-CN"> --> 
  
   <html lang="en"> 
  
   <head> 
  
       <!-- 不寫這個若是有中文可能會亂碼 --> 
  
       <meta charset="utf-8"> 
  
       <title>html</title> 
  
       <!-- 定義css樣式 --> 
  
       <style type="text/css"></style> 
  
       <!-- 定義js代碼或引入外部js文件 --> 
  
       <script type="text/javascript"></script> 
  
       <!-- 引入外部樣式表文件 --> 
  
       <link rel="stylesheet" type="text/css" href=""> 
  
       <!-- 定義頁面原信息 --> 
  
       <meta/> 
  
       <meta name="keywords" content="關鍵字,meta,keywords,搜索"> 
  
       <meta name="description" content="簡單介紹html的元素"> 
  
   </head> 
  
   <body> 
  
   </body> 
  
   </html>

1.幾個經常使用標籤：

標籤	意義
<title></title>	定義網頁標題
<style></style>	定義內部樣式表
<script></script>	定義JS代碼或引入外部JS文件
<link/>	引入外部樣式表文件
<meta/>	定義網頁原信息

2. Meta標籤介紹：

 
   <meta>元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。 
  
   <meta>標籤位於文檔的頭部，不包含任何內容。 
  
   <meta>提供的信息是用戶不可見的。

meta標籤的組成：

meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。

a. http-equiv屬性：至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。

 
   <!--2秒後跳轉到對應的網址，注意引號--> 
  
   <meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> 
  
   <!--指定文檔的編碼類型--><meta http-equiv="content-Type" charset=UTF8"> 
  
   <!--告訴IE以最高級模式渲染文檔--><meta http-equiv="x-ua-compatible" content="IE=edge">

b. name屬性: 主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

 
   <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> 
  
   <meta name=" 
   description 
   " content="老男孩教育Python學院">

2、<body>部分

表單屬性：

屬性	描述
accept-charset	規定在被提交表單中使用的字符集（默認：頁面字符集）。
action	規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete	規定瀏覽器應該自動完成表單（默認：開啓）。
enctype	規定被提交數據的編碼（默認：url-encoded）。
method	規定在提交表單時所用的 HTTP 方法（默認：GET）。
name	規定識別表單的名稱（對於 DOM 使用：document.forms.name）。
novalidate	規定瀏覽器不驗證表單。
target	規定 action 屬性中地址的目標（默認：_self）。

input

type屬性值	表現形式	對應代碼
text	單行輸入文本	<input type=text" />
password	密碼輸入框	<input type="password" />
date	日期輸入框	<input type="date" />
checkbox	複選框	<input type="checkbox" checked="checked" />
radio	單選框	<input type="radio" />
submit	提交按鈕	<input type="submit" value="提交" />
reset	重置按鈕	<input type="reset" value="重置" />
button	普通按鈕	<input type="button" value="普通按鈕" />
hidden	隱藏輸入框	<input type="hidden" />
file	文本選擇框	<input type="file" />

      
   <!-- 聲明該文檔是html5的文檔 --> 
  
   <!DOCTYPE html> 
  
   <!-- lang="en"是說明該網頁主要的語言是英文 --> 
  
   <!-- <html lang="zh-CN"> --> 
  
   <html lang="en"> 
  
   <head> 
  
       <!-- 不寫這個若是有中文可能會亂碼 --> 
  
       <meta charset="utf-8"> 
  
       <title>html</title> 
  
       <!-- 定義css樣式 --> 
  
       <style type="text/css"></style> 
  
       <!-- 定義js代碼或引入外部js文件 --> 
  
       <script type="text/javascript"></script> 
  
       <!-- 引入外部樣式表文件 --> 
  
       <link rel="stylesheet" type="text/css" href=""> 
  
       <!-- 定義頁面原信息 --> 
  
       <meta/> 
  
       <meta name="keywords" content="關鍵字,meta,keywords,搜索"> 
  
       <meta name="description" content="簡單介紹html的元素"> 
  
   </head> 
  
   <body> 
  
   <div> 
  
       <!-- 
  
       html標籤的幾個分類： 
  
           1. 單標籤和雙標籤 
  
           2. 內聯標籤和塊兒級標籤(是否獨佔一行) 
  
               內聯: span img a b i 
  
               塊兒級:div h1~h6 p hr ul li ol 
  
               嵌套的規則: 
  
                   1. 內聯的不能套塊兒級 
  
                   2. p不能套塊兒級標籤 
  
           3. 展現用的和交互用的 
  
           4. table標籤 
  
           5. 列表 
  
               1. ul 
  
               2. ol 
  
               3. dl 
  
           6. 特殊符號 
  
               1. &nbsp; 
  
               2. &copy; 
  
               3. &reg; 
  
               4. &lt; 
  
               5. &gt; 
  
       --> 
  
       <p id="圖片相關的設置"> 
  
           <img src="" alt="當圖片顯示不出來會打印這句話" title="鼠標移到圖片上會打印這句話"> 
  
       </p> 
  
       <p id="頁面內的跳轉"> 
  
           <a href="#test">跳到最後</a> 
  
           <a href="" id="test"></a> 
  
       </p> 
  
   <!-- 
  
       總結input屬性： 
  
           text 
  
           textarea 大段文本 
  
           password 
  
           radio 單選框 
  
           checkbox 多選框 
  
           select 下拉菜單 
  
           option 具體的下拉選項 
  
           optgroup 分組的下拉框（label="上海"） 
  
           date 日期 
  
           datetime 時間 
  
           file 文件 
  
           button 普通按鈕，多用js給它綁定事件 
  
           reset 重置 
  
           submit 提交 
  
   --> 
  
       <p id="emmet插件的使用"> 
  
           <!-- 在pycharm中按tab鍵會進行快捷操做,其它編輯器中要安裝emmet插件 --> 
  
           h1*4>a.c$#id${content$} 
  
       </p> 
  
       <p> 
  
           <label for="username">username：</label> 
  
           <input type="text" name="" id="username"> 
  
           <input type="password" name="密文輸入"> 
  
           <input type="hidden" name="隱藏"> 
  
           <input type="text" value="默承認以修改"> 
  
           <input type="text" name="" placeholder="佔位符"> 
  
           <input type="" readonly value="默認不能修改"> 
  
           <input type="text" value="不能被選中" disabled> 
  
       </p> 
  
       <p id="單選框"> 
  
           性別: 
  
           <!-- label的第一個用法 --> 
  
           <input type="radio" checked name="gender" id="man"> 
  
           <label for="man">男</label> 
  
           <input type="radio" name="gender" id="woman"> 
  
           <label for="woman">女</label> 
  
       </p> 
  
       <p id="複選框"> 
  
           愛好： 
  
           <!-- label的第二個用法 --> 
  
           <label><input type="checkbox" name="">籃球</label> 
  
           <label><input type="checkbox" name="">足球</label> 
  
           <label><input type="checkbox" name="">皮球</label> 
  
       </p> 
  
       <p id="下拉分級"> 
  
           <!-- 加入multiple就變成了多選的下拉框 --> 
  
           <select multiple> 
  
                   <optgroup label="河南"> 
  
                       <option>許昌</option> 
  
                       <option>洛陽</option> 
  
                       <option selected>鄭州</option> 
  
                       <option>商丘</option> 
  
                   </optgroup> 
  
                   <optgroup label="廣東"> 
  
                       <option>廣州</option> 
  
                       <option>惠州</option> 
  
                   </optgroup> 
  
           </select> 
  
       </p> 
  
       <p id="文本框輸入"> 
  
           <textarea cols="30" rows="10"></textarea> 
  
       </p> 
  
       <p id="上傳文件"> 
  
           頭像: 
  
           <input type="file" name=""> 
  
           <!-- 
  
               method="post" enctype="multipart/form-data" autocomplete="off" 關閉自動補全 novalidate 
  
           --> 
  
       </p> 
  
       <P id="input按鈕"> 
  
           <input type="submit" value="提交"> 
  
           <input type="button" value="按鈕"> 
  
           <input type="reset" value="所有重置"> 
  
       </P> 
  
       <p id="選擇時間"> 
  
           生日: 
  
           <input type="date" name=""> 
  
       </p> 
  
   </div> 
  
   <div> 
  
   </div> 
  
   </body> 
  
   </html>

相關標籤/搜索

每日一句

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