HTML入门

HTML学习笔记

参考资料：HTML指南 - MDN HTML系列教程 - W3school

<p></p>paragraph，段落

<h1></h1>一级标题

<strong></strong>加粗着重

<em></em>emphasize，斜体强调

<a href="URL" title="标题"></a>超链接

target="_blank"属性，在新窗口打开链接

<!DOCTYPE html>声明文档类型

<meta charset="utf-8">字符集

<title></title>页面标题，出现在浏览器标签上

原字符	转义
<	`<`
>	`>`
"	`"`
'	`'`
&	`&`

<meta name="类型" content="内容">作者/描述

<link rel="stylesheet" href="*.css">应用CSS

<script src="*.js"></script>应用javascript

<html lang="en-US">设定主语言

<ul><li>...</li></ul>unordered list，无序列表

<ol><li>...</li></ol>ordered list，有序列表

给要链接到的元素分配id属性，然后用URL#id的方式指向它

发送电子邮件链接mailto:URL

<dl><dt>..</dt><dd>...</dd></dl>description list，描述列表；description terms，描述术语；description description，描述部分。一个dt可以有多个dd

<blockquote cite=""></blockquote>块引用

<q cite=""></q>行内引用

<cite></cite>著作的标题

<abbr title=""></abbr>缩略语

<address></address>联系方式

<sub></sub>下标

<sup></sup>上标

<del></del>删除字

<ins></ins>插入字

<code></code>代码

<pre></pre>保留缩进

<var></var>标记变量名

<kbd></kbd>标记键盘（或者其他类型）输入

<samp></samp>标记程序输出

<time datetime=""></time>标记时间

<header></header>页眉

<nav></nav>导航栏

<main></main>主内容

<aside></aside>侧边栏

<footer></footer>页脚

<article></article>一篇文章

<section></section>组织页面，按功能分块

<span class=""></span>行内无语义元素

<div class=""></div>块级无语义元素

<br />段落中换行

<hr />水平分割线

<img src="URL" alt="描述">图片

<figure>
    <img>
    <figcaption>说明文字</figcaption>
</figure>

为主要内容添加补充说明

<video src="" controls>后备内容：浏览器不支持HTML 5视频</video>视频，用户能够控制回放

<video controls width="400" height="400"
		autoplay loop muted
		poster="poster.png">
    <source src="rabbit320.mp4" type="video/mp4">
    <source src="rabbit320.webm" type="video/webm">
    <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>

autoplay自动播放，loop循环播放，muted默认静音，poster预览图

<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>

<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>

内联SVG：

1
2
3

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>

自适应图片：

<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">

srcret中分别是文件名图像的固有宽度

size中分别是媒体条件当满足媒体条件时图像填充的槽的宽度

<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>

<table></table>表格

<td></td>table data

<tr></tr>table row

<th></th>table header

colspan属性，单元格跨列

rowspan属性，单元格跨行

colgroup：给一列应用样式

<table>
    <colgroup>
        <col>
        <col style="background-color: yellow">
    </colgroup>
    <tr>
        <th>Data 1</th>
        <th>Data 2</th>
    </tr>
    <tr>
        <td>Calcutta</td>
        <td>Orange</td>
    </tr>
    <tr>
        <td>Robots</td>
        <td>Jazz</td>
    </tr>
</table>

1
2
3

<colgroup>
    <col style="background-color: yellow" span="2">
</colgroup>

<thead></thead>表头

<tbody></tbody>

<tfoot></tfoot>表脚，写在表头后面，包含的部分自动置于表的最后

<caption></caption>表格标题

<th>的scope属性，可以为col row colgroup rowgroup，将标题与行/列相关联

id和headers属性：

<thead>
    <tr>
        <th id="purchase">Purchase</th>
        <th id="location">Location</th>
        <th id="date">Date</th>
        <th id="evaluation">Evaluation</th>
        <th id="cost">Cost (€)</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th id="haircut">Haircut</th>
        <td headers="location haircut">Hairdresser</td>
        <td headers="date haircut">12/09</td>
        <td headers="evaluation haircut">Great idea</td>
        <td headers="cost haircut">30</td>
    </tr>
</tbody>