HTML基础

发表于 | | 阅读次数

HTML 元素参考

基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html> <!-- h5 文档申明-->
<html lang="en">
<head>
    <meta ……>
    <link rel="stylesheet" href="style.css"         >
    <script src="script.js"></script>
    <title>Document</title>
</head>
<body>
    
    <script src="script.js"></script>
</body>
</html>

head中的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<head>
    <meta charset="UTF-8">  <!--语言 UTF-8:万国码-->
    <title>My test page</title> <!--标题-->

    <meta name="author" content="Chris Mills"> <!-- 作者 seo、搜索-->
    <meta name="description" content="This is an example page to demonstrate usage of metadata on web pages."> <!-- 描述  seo、搜索 -->

    <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
    <meta property="og:description" content="This is an example page to demonstrate usage of metadata on web pages.">
    <meta property="og:title" content="Metadata; The HTML &lt;head&gt;, on MDN">

    <link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
    <!-- <link rel="stylesheet" href="style.css"> -->

</head>

body中的标签

1
2
3
4
5
6
7
8
9
<!-- h1 页面中重要标题：文章标题。如果 head 中没有 title 则浏览器会识别 h1 中内容为标题 -->
<h1>页面标题</h1> 
<p>段落</p>
<strong>强调</strong>
<br> <!--换行-->
<em>强调、斜体</em>
<i>斜字体：外国文字，分类名称，技术术语，一种思想……</i>
<b>加粗：关键字，产品名称，引导句……</b>
<u>下划线：专有名词，拼写错误</u>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!-- a 标签，链接。-->
<p>欲练<a href="https://zh.wikipedia.org/zh-hans/葵花宝典" title="葵花宝典简介" target="_blank">葵花宝典</a>，需引刀自宫</p>

<a href="https://www.mozilla.org/en-US/">
    <img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
        alt="mozilla logo that links to the mozilla homepage">
</a>
   
<input type="text" disabled>
<input type="text">

<table>
    <thead>
        <tr>
            <th scope="col">等价字符引用</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="2">&lt;</td>  <!--colspan rowspan-->
        </tr>
    </tbody>
</table>

<!-- 注释 -->

<ul>
    <li>无序列表的元素</li>
    <li>无序列表的元素</li>
    <ol>
        <li>有序列表的元素</li>
        <li>有序列表的元素</li>
    </ol>
</ul>

<!-- 绝对URL和相对URL：尽可能使用相对路径，避免 绝对路径每次浏览器都从CDN开始定位 -->

<!-- download 属性，下载默认文件名 -->
<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
    download="firefox-latest-64bit-installer.exe">
    Download Latest Firefox for Windows (64-bit) (English, US)
</a>

##高级文字格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- 描述列表 
<dl>
    <dt>
        <dd>
-->

<!-- 引文 cite ：引用自某人、某个帖子 -->
<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
        <cite>MDN blockquote page</cite></a>:
</p>

<!-- 块引用 blockquote  -->
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
    <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
            Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<!-- 行内引用 -->
<p>The quote element — <code>&lt;q&gt;</code> — is <q
        cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
        for short quotations that don't require paragraph breaks.</q></p>

<!-- 缩略语 <abbr> -->
<p>我们使用 <abbr title="超文本标记语言（Hypertext Markup Language）">HTML</abbr> 来组织网页文档。</p>

<!-- address 标记联系方式 -->
<address>
    <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

<!-- 上标和下标  <sup> 和<sub> -->
<p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

##文档与网站架构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 语义标签 
<header>：页眉。
<nav>：导航栏。
<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。
<aside>：侧边栏，经常嵌套在 <main> 中。
<footer>：页脚。 
-->

<!-- 无语义元素
    <div> 和 <span>
 -->

<!-- 换行与水平分割线 <br> 和 <hr> -->

<!-- <script src="script.js"></script> -->

源义字符的展示

1
2
3
<!-- 源义字符 展示替换 -->
<a href="http://www.baidu.com" title="你觉得'好玩吗'？">示例站点链接</a>
<p>HTML 中用 &lt;p&gt; 来定义段落元素</p>

-w867
空格 &nbsp

HTML验证器

Markup Validation Service

多媒体

1
2
3
4
5
<figure>
  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
     alt="一只恐龙头部和躯干的骨架，它有一个巨大的头，长着锋利的牙齿。">
  <figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>

视频

src：只能设置一种格式，可能遇到浏览器兼容问题
source（推荐）： 可以设置多种格式。浏览器可以通过type，自动识别支持的type，进行加载。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!--
 width="400" height="400"
       autoplay 自动播放
       loop     循环播放
       muted    静音播放
       poster="poster.png"  默认图片
-->

<video src="rabbit320.webm" controls>
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

<video controls>
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">  <!--字幕文件-->
</video>

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>你的浏览器不支持 HTML5 音频，可点击<a href="viper.mp3">此链接</a>收听。</p>
</audio>

iframe 嵌入网页

具体参考：Iframe详解

1
2
3
4
5
6
7
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

svg矢量图片/元素

SVG元素参考

1
2
3
4
5
6
7
8
9
10
11
矢量图片引用
<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87px"
    width="100px" />
    
<!--html 内联 svg-->
<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

响应式图片

根据屏幕设置不同图片展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>

表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<table>
<caption>表格标题</caption>
    <colgroup>
      <col style="background-color: yellow" span="2"> <!--定义整列的样式-->
    </colgroup>
    <thead>
        <tr>
        <!-- scope：标记 th 是 col 标题还是 row 标题-->
            <th scope="col">等价字符引用</th> 
        </tr>
    </thead>
     <tfoot>
      <tr>
        <td colspan="4">SUM</td>
        <td>118</td>
      </tr>
    </tfoot>
    <tbody>
        <tr>
            <td colspan="2">&lt;</td>  <!--colspan rowspan-->
        </tr>
    </tbody>
</table>

表单

表单挂件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form action="/my-handling-form-page"" method="GET">
    <div>
        <label for="name">Name:</label> 
        <!-- for 属性，与 input 中 id 属性对应-->
        <input type="text" name="user_name" id="name">
    </div>
    <fieldset>
        <legend>Title</legend>
        <ul>
            <li>
                <label for="title_1"><input type="radio" id="title_1" name="title" value="M.">Mister</label>
            </li>
            <li>
                <label for="title_2"><input type="radio" id="title_2" name="title" value="Ms.">Miss</label>
            </li>
        </ul>
    </fieldset>
</form>

单行文本框类型

1
2
3
4
5
6
7
8
9
<input type="text" id="comment" name="comment" value="I'm a text field">

<!-- type="email" 通过包括multiple属性，它还可以让用户将多个电子邮件地址输入相同的输入(以逗号分隔)。-->
<input type="email" id="email" name="email" multiple>

<input type="password" id="pwd" name="pwd">
<input type="search" id="search" name="search">
<input type="tel" id="tel" name="tel">
<input type="url" id="url" name="url">

选择框

1
2
3
4
5
6
7
<select id="simple" name="simple" multiple>   <!-- multiple 属性选择框支持多选-->
    <optgroup label="fruits"> <!-- option 分组 -->
        <option>Banana</option>
        <option selected>Cherry</option>
        <option>Lemon</option>
    </optgroup>
</select>

自动补全输入框

注意：部分浏览器不支持（IE < 10、Safair) ，解决技巧，包含

复选框 checkbox

name 相同为一组

1
<input type="checkbox" checked id="carrots" name="carrots" value="carrots">

单选按钮 radio

name 相同为一组

1
<input type="radio" checked id="soup" name="meal">

多行文本框

1
<textarea cols="30" rows="10">输入框默认值</textarea>

按钮

两种方式 <button type="submit"> 和 <input type="submit">
type类型支持 submit、reset、button

1
2
3
4
5
<button type="submit">
    This a <br><strong>submit button</strong>
</button>

<input type="submit" value="This is a submit button">

数字

注意：（IE < 10 不支持）
通过设置min和max属性来约束该值。
通过设置step属性来指定增加和减少按钮更改小部件的步进值大小

1
<input type="number" name="age" id="age" min="1" max="10" step="2">

滑块

注意：（IE < 10 不支持）

1
<input type="range" name="beans" id="beans" min="0" max="500" step="10">

日期时间选择器

注意：Firefox和Safari对这些都没有太大的支持。
所有日期和时间控制都可以使用min和max属性来约束

1
2
3
4
5
<input type="datetime-local" name="datetime" id="datetime">
<input type="month" name="month" id="month">
<input type="time" name="time" id="time">
<input type="week" name="week" id="week">
<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">

文件选择器

1
<input type="file" name="file" id="file" accept="image/*" multiple>

上传文件

1
2
3
4
5
6
7
8
9
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose a file</label>
    <input type="file" id="file" name="myFile">
  </div>
  <div>
    <button>Send the file</button>
  </div>
</form>