炒一下冷飯1-5

2周沒有寫HTML5,腦子就有些混亂了。做一下筆記

HTML5典型頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>
      <h1>HTML5</h1>
    </header>
    <main></main>
    <footer></footer>
</body>
</html>

忘記了有<header><main><footer>這類標簽
這類標簽都可以用CSS

h1~h6標示大標題
p標示段落

P可以用來換行

a鏈接
<a target="_blank" title="饑人谷">饑人谷.com</a>
title是鼠標放上去的顯示出來的提示
target=“_blank”打開新頁面
沒有target則是變成當前頁面直接跳轉

img
![](a.png)
alt是在后面的顯示的名稱
用來展示圖片

UL

<ul>
      <li>聯系</li>
      <li>地址</li>
    </ul>

無序列表

OL
<ol> <li>
同理有序列表

dl dt dd 作用于商品介紹

<dl>
  <dt>商品名稱:</dt>
  <dd>青花瓷</dd>
  <dt>特征:</dt>
  <dd>白色</dd>
  <dd>圓口</dd>
  <dt>商品介紹</dt>
  <dd>這是一個年代久遠的瓷器,很貴,易碎</dd>
</dl>

button
<button>點我</button>

強調用的不多

<p>優惠 <strong>100</strong> 元</p>
 <p>小谷 <em>2</em> 歲了</p>

嵌入頁面
<iframe src="http://jirengu.com" name="myPage"></iframe>

TABLE列表
table tr-th tr-td

<table>  
    <tr>
      <th>姓名</th>
      <th>年紀</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>18</td>
    </tr>
    <tr>
      <td>小花</td>
      <td>20</td>
    </tr>  
</table>

meta
IE最高模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
聲明文檔使用的編碼付
<meta charset="utf-8">
搜索引擎關鍵字
<meta name="keywords" content="your tags">

表單

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<div class="login">
  <input type="text" name="sex">
  <form action="/getInfo" method="get">
      <div class="submit">
      <button>提交??</button>
    </div>
    <div class="username">
      <label for="username">姓名</label>
      <input id="username" type="text" name="username" value="ruo">
    </div>
    <div class="password">
      <label for="password">密碼</label>
      <input id="password" type="password" name="password" placeholder="輸入密碼">
    </div>
    <div class="hobby">
      <label>愛好</label>
      <input type="checkbox" name="hobby" value="read"> 讀書
      <input type="checkbox" name="hobby" value="music"> 聽歌
      <input type="checkbox" name="hobby" value="study"> 學習
    </div>
    <div class="sex">
      <label>性別</label>
      <input type="radio" name="sex" value="男"> 男
      <input type="radio" name="sex" value="女"> 女
    </div>
    <div class="file">
      <input type="file" name="myfile" accept="image/png">
    </div>
    <div class="select">
      <select name="city">
        <option value="beijing">北京</option>
        <option value="shanghai" selected>上海</option>
        <option value="hangzhou">杭州</option>
      </select>
    </div>
    <div class="textarea">
      <textarea name="article">
         多行文本,注意和 type=text的區別
      </textarea>
      <input type="hidden" name="csrf" value="12345623fafdffdd">
        <input type="button" value="Buttom" /> 不會提交
        <input type="submit" value="Submit" /> 會提交
        <input type="reset" value="Reset" /> 重置輸入
    </div>
  </form>
</div>
</body>
</html>

注意type="buttom" 是不會提交的 單純按鈕功能
type="submit" 才是提交的

一般提交表單數據method="POST"而不用method="get"

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,993評論 19 139
  • 本文為閱讀《Head First HTML 與 CSS》的html部分的讀書筆記,方便回顧書上的知識,另一篇為He...
    兼續閱讀 3,340評論 0 23
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,595評論 25 708
  • ¥開啟¥ 【iAPP實現進入界面執行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 6,554評論 0 17
  • 千字文是一項非常考驗意志的行動。但當我們疲憊時、當我們情緒低落時、當我們忙碌時,都可能出現過敷衍的念頭,甚至...
    一默如雷閱讀 1,574評論 0 9