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="描述">
图片
1 | <figure> |
为主要内容添加补充说明
<video src="" controls>后备内容:浏览器不支持HTML 5视频</video>
视频,用户能够控制回放
1 | <video controls width="400" height="400" |
autoplay
自动播放,loop
循环播放,muted
默认静音,poster
预览图
1 | <audio controls> |
1 | <video controls> |
内联SVG:
1 | <svg width="300" height="200"> |
自适应图片:
1 | <img srcset="elva-fairy-320w.jpg 320w, |
srcret
中分别是文件名 图像的固有宽度
size
中分别是媒体条件 当满足媒体条件时图像填充的槽的宽度
1 | <picture> |
<table></table>
表格
<td></td>
table data
<tr></tr>
table row
<th></th>
table header
colspan
属性,单元格跨列
rowspan
属性,单元格跨行
colgroup
:给一列应用样式
1 | <table> |
1 | <colgroup> |
<thead></thead>
表头
<tbody></tbody>
<tfoot></tfoot>
表脚,写在表头后面,包含的部分自动置于表的最后
<caption></caption>
表格标题
<th>
的scope
属性,可以为col
row
colgroup
rowgroup
,将标题与行/列相关联
id
和headers
属性:
1 | <thead> |