逼自己说几句
制作网页的第一步就是学会编写HTML语言
确实,正确的编写HTML语言,是写好一个网页的基础,基础扎实才能一路潇洒的去写CSS和JavaScript
本文中整理了HTML语言的编写标准,我会尽量详细的去归纳整理,如有遗漏的也会在日后的学习中不断更新
一、基础元素
基础元素是HTML文档的根基。基础元素在每一个网页的源代码里都能见到,位置在文档首行doctype 声明的下方。doctype表明了该页面正在使用哪种版本的 (X)HTML。包含网页内容的元素是放置在开始标签<html>
和关闭标签</html>
之间的。<html>
元素也被称之为根元素。
html
描述:HTML<html>
元素(或者说HTML根元素)代表着一个HTML文档的根(root)。 所有其他元素皆是此元素的后代。
二、文档元数据
元数据(Metadata)含有页面的相关信息。这些包括样式,脚本及数据的信息能帮助一些软件 (如搜索引擎, 浏览器等等)更好运用以及渲染页面。对于样式和脚本的元数据可以直接在网页里定义或者链接到有这些的其他文件。
base
描述:指定文档里所有相对URL地址的基础URL。一份文档最多一个<base>
元素。
head
描述:规定文档相关的通用信息(元数据),包括文档标题、样式或脚本的链接或定义。
link
描述:指定了外部资源与当前文档的关系. 这个元素的使用方法包括为导航定义关系框架.这个元素经常用来链接css文件。
meta
描述:用来表达任何其他HTML元相关元素(<base>
,<link>
,<script>
,<style>
或者<title>
)等无法表达的信息。
style
描述:包含了文档的样式化信息或者文档的一部分。指定的样式化星系包含的该元素内,通常是CSS的格式。
titile
描述:定义文档的标题,显示在浏览器的标题栏或标签页上。它只可以包含文本,若是包含有标签,则包含的任何标签都不会被解释。
三、行内元素
a
描述:与href属性搭配使用,用于链接到其他页面或者跳转到同一页的某个锚点。
示例:
<a href="网页链接">a链接的文本内容</a>
abbr
描述:表示一个缩写,搭配title属性使用可对此缩写进行完整描述。
示例:
<abbr title="全称内容">缩写内容</abbr>
b
描述:表示相对于普通文本字体上的区别,但不表示任何特殊的强调或者关联。
cite
描述:用来指明书目信息、个人引语、或者参考文献中的外部资源。
示例:
我至今也没有读完<cite>《盆地构造解析》</cite>
code
描述:呈现一段计算机代码。
del
描述:表示该信息已被删除(添加删除线)。
dfn
描述:用来表示一个定义
示例:
<cite>虎扑体育</cite>是篮球迷的聚集地
em
描述:标记出需要用户着重阅读的内容,表现为斜体。
示例:
<em>我正在强调这句话</em>
ins
描述:表示修订后插入的内容(添加下划线)。
q
描述:表示一个封闭的并且是短的行内引用的文本。
strong
描述:标记该文本十分重要,表现为粗体
示例:
<strong>我正在以更大的强度强调这句话</strong>
span
描述:短语内容的通用行内容器,并没有任何特殊语义。
sub/sup
描述:含义:表示下标/上标。
四、块级元素
address
描述:表示某个特定文档或文档的某个部分的联系信息或联络方式。
<address>
地址:XXX
</address>
div
描述:常见的用途有三种
- 划分页首、页尾、页边栏或导航栏等等;
- 表示页面的分栏;
- 将文章进一步分成几个部分,比如正文、评论、文章的元数据等等。
h1~h6
描述:h1是最高一级的标题,下一层标题使用h2,依次类推
p
描述:表示段落
blockquote
描述:表示一段引用自其他来源的独立文本。
blockquote有两个属性,第一个是cite属性,用来指明引用材料的URL地址;第二个是title属性,用于提供引用材料的相关信息。
<blockquote cite="http://www.hupu.com/" title="文章的标题,作者,发表日期">"我正在此处引用虎扑体育。"</blockquote>
五、列表元素
ul,ol,li
描述:表示一组相同格式的信息。
dl,dd,dt
描述:表示一个术语列表。
dt表示术语,dd表示该术语的定义,可以为单个术语提供多个定义。
示例:
<dl>
<dt>江君</dt>
<dd>一个无聊的人</dd>
<dt>佳佳</dt>
<dd>另一个无聊的人</dd>
<dt>JJ</dt>
<dd>两个无聊的人</dd>
</dl>
六、表格元素
七、分割元素
br
描述:表示换行。
注意:除了少数场合(比如诗歌中的分行),应该尽量避免使用这个标签,因为它并没有特别的语义含义,而且分行的视觉效果完全可以通过p标签、列表标签和CSS命令达到。
hr
描述:表示两个部分之间用一根水平直线分割。
事实上,不用这个标签,也有办法显示水平直线。这个标签的唯一优势,也许就是在没有CSS的场合,它可以产生视觉分割的效果。
参考文献
(完)
文档信息
- 自由转载-非商用-非衍生-保持署名
- 发表日期:2016年9月8日