HTML简要笔记
了解HTML的基本元素以及属性后,常用的其实也就其中的一些,大体有一个框架性的了解就行了。
写详细的也没必要,教程那么多,超越不了,也不适合自己用,流水账式写完岂不是编字典?不如要用再查。
<head>
head
元素不在页面中显示,主要内容包含元数据meta
,标题title
等。
<title>
title
仅为网页文档添加标题(整个HTML文档),与h1
区别,h1
为body
添加标题。同时,title
作为书签的推荐命名以及搜索引擎抓取的搜索结果。
<meta>
一般用于指定文档字符编码,<meta charset='utf-8'>
等。
还包含name
,content
特性,指定元素类型以及内容。
1 | <meta name="author" content="Ivy"> |
其中的description
可以在搜索引擎中显示。
其他
head
中常见的还塞了<link>
,<script>
等,以链接到图表、样式表等等。
页面结构
页面语义结构
为构建网页布局,一般地,我们需要页眉、导航、正文主体、侧边栏与页脚等页面结构,需要使用一系列明确的标签,如下。
<header>
:页眉。<nav>
:导航栏。<main>
:主内容。主内容中还可以有各种子内容区段,可用<article>
、<section>
和<div>
等元素表示。<aside>
:侧边栏,经常嵌套在<main>
中。<footer>
:页脚。
以下为上述标签的综合实例:当然还要加点CSS
的
1 | <html> |
其他分隔结构
<div>
<span>
这两个无语义元素,其中<div>
是块级元素,<span>
是内联元素(区别:换不换行)。当需要一组元素修饰一些单独的实体以提供CSS
与JS
的单一响应时,或不需要对修饰实体增加不必要的特定结构含义时,就可以使用了。
<br>
,换行元素。<hr>
,插入水平分割线。
文字处理
内容上的语义结构
完成页面结构的布局后,对其内容在语义上需要进一步分离(如标题,分段等),当然,很多时候通过样式来进行视觉上的区分。尽管我们可以使用<span>
等无语义元素加上样式来使内容看上去像特定语义块,但这对整个网页的分析并无益处。
常用文字语义元素
<h1>
-<h6>
:多级标题。<p>
:段落<ul>
,<ol>
,<li>
:列表的无序(unordered)、有序(ordered list)以及列表条目。有、无序是可以互相嵌套的,当然,大部分元素都是可以互相嵌套的。<em>
,<strong>
:语义强调,斜体强调(语气?)以及粗体特别强调。<b>
,<i>
,<u>
:一些很旧的元素,用于粗体、斜体和下划线,不记得也没关系的东西,已经不重要了。
一些少用但必要的内容语义结构
<dl>
,<dt>
,<dd>
:描述列表。
1 | <dl> |
- 描述的第一项
- 第一项的描述
- 第二项
- 第二项的描述一
- 第二项的描述二
引用及引文,引用有块引用与行引用。
<blockquote>
:块引用,包住引用的内容,使用cite
属性指向引用的资源。(点不了,指向有啥用?)<q>
:同上,只不过是在行内。
缩略,使用<addr>
包裹缩略语,在元素内的属性title
写缩略的解释。
上下标,使用<sup>
和<sub>
包裹。
代码块,使用<code>
,还有一些更不常用的如:<pre>
,<var>
,<kbd>
,<samp>
。
超链接
既然是互联网的产物,链接肯定是极其重要的一环。
元素<a>
元素<a>
的内容在链接解析成功后,作为链接入口。而内容可以不止是文本,嵌套<img>
等块级元素也是可以的。
属性:
herf
属性,包含指向网址。title
属性,补充信息,悬停时显示。
路径
使用url
统一资源定位符作为位置定义。
- 上级目录:../xx
- 子目录:son/xx
- 文档片段:xx.html#Mailing_address,链接到文档内的特定部分,通过对目标部分的元素分配
id
属性来标记。
绝对与相对的选取,一般地,多使用相对链接,可以减少浏览器通过DNS的查找,但是要注意,相对链接会随着文档结构的改变而改变。
多媒体
图
<img>
元素
src
属性内放置图片路径(绝对/相对)。alt
属性,作为备选内容,在图片不显示时输出。同时作为图片的描述。width
,height
:定义大小。title
:悬停提示。
如果需要图(或音视频)搭配文字,可以使用<img>
和<p>
构建,或使用<figure>
和<figcaption>
,前者包含整个多媒体流,后者内包裹文本。
音视频
<video>
与<audio>
,但一般使用其他插件。具体见video与audio在MDN上的详细页面。
其他嵌入
用的少,不写了,需要再去查iframe
,embed
,object
等等元素。
表格
展现数据。实际上也不常用,而且很长很多。但还是要写!我要死了!写这个太无聊了!
表格使用的元素比较多,<table>,<tr>,<td>,<th>,<col>,<colgroup>,<caption>,<thead>,<tfoot>,<tbody>
,还可以嵌套。
一般的属性有colspan,rowspan,span,scope,id,headers
。
好吧,一一记录下。
基本结构
使用<table>
创建表格,<tr>
创建每行表格,<td>
表示每个格子,格子也可以使用<th>
用以表明该格为标题(行/列)。
结构方面,可以在table
下使用<caption>
来为表格创建标题。也可以使用<thead>,<tfoot>,<tbody>
来区分表格结构,元素名字已经不言自明。
修饰属性
属性有很多,出去可以通过css样式修饰的之外,主要为了实现表格元素标记和非常规的表格模式。
为跨越多行/列,可以令<td>,<th>
的属性colspan,rowspan
为一个无单位数值,即可跨越相应的格子数。
为指明<th>
是行还是列标题,利用scope
属性指明值为row
或col
甚至复杂表格的rowgroup
等。
单元格与标题的联系还可以用id
和headers
来创造。在<th>
中创建唯一的id
属性值,在<td>
的headers
属性中,包含’所有‘属于的标题的id
值。
结尾
笔记基本上包含了HTML
常用的要点。最后,要检查代码,在Markup Validation Service上提交文档即可返回错误报告,一般来说,浏览器都支持宽松的特性,所以瞎写也问题不大。