0%

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>页面标题,出现在浏览器标签上

原字符 转义
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

<!--注释-->

<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="描述">图片

1
2
3
4
<figure>
<img>
<figcaption>说明文字</figcaption>
</figure>

为主要内容添加补充说明

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

1
2
3
4
5
6
7
<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预览图

1
2
3
4
5
<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>
1
2
3
4
5
<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>

自适应图片:

1
2
3
4
5
6
7
<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中分别是媒体条件 当满足媒体条件时图像填充的槽的宽度

1
2
3
4
5
<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:给一列应用样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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,将标题与行/列相关联

idheaders属性:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>