全栈工程师成长记

编程重新定义人生

HTML基础学习笔记

HTML 基础
HTML 指的是超文本标记语言 (Hyper Text Markup Language)。
超文本(hypertext)的基本特征就是可以超链接文档,当前文档的某个部分、局域网中的其他文件、互联网上的其他任何文件都可以被链接。
超链接(hyper text),或者按照标准叫法称为锚(anchor),是使用 <a> 标签标记的。
HTML 不是一种编程语言,而是一种标记语言 (markup language)。
Markdown 是另一种标记语言,从命名种看得出 geek 的世界充满了幽默。
HTML 代码中可以加入注释,这样可以提高其可读性,浏览器不会显示注释,
注释是这样写的:<!-- 注释内容 -->。

HTML 元素
HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。
某些 HTML 元素具有空内容(empty content),<br> 就是没有关闭标签的空元素。
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
在开始标签中添加斜杠,比如 <br />,是关闭空元素的正确方法。
大多数 HTML 元素可以嵌套(包含其他 HTML 元素)。
HTML 标签对大小写不敏感:<P> 等同于 <p>,而在未来 (X)HTML 版本中强制使用小写。

HTML 属性
HTML 标签可以拥有属性,属性总是在 HTML 元素的开始标签中规定。
属性总是以名称/值对的形式出现,比如在页面顶部定义:name="top",然后在<a>中加入href="#top"可以跳转到页面顶部。
<img> 是空标签,它只包含属性,并且没有闭合标签,要在页面上显示图像,需要使用源属性(src)。src 指 "source"。源属性的值是图像的 URL 地址。
属性和属性值对大小写不敏感。不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值,而新版本的 (X)HTML 要求使用小写属性。

HTML 标题
HTML 标题(Heading)是通过<h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题,<h6> 定义最小的标题。
请确保将 HTML heading 标签只用于标题,不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为网页的结构和内容编制索引,因此用户可以通过标题来快速浏览网页。
用标题来呈现文档结构是很重要的,应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),以此类推。
注释:默认情况下,HTML 会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。

HTML 段落
HTML 段落是通过 <p> 标签定义的。
注释:<p> 是块级元素,因此浏览器会自动地在段落的前后添加空行。
提示:使用空的段落标记 <p></p> 去插入一个空行是个坏习惯,用 <br /> 标签代替它!(但是不要用 <br /> 标签去创建列表。)

HTML 表格
表格由 <table> 标签来定义。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义)。
tr 中的 r 是指行( row ),td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的标题用 <caption> 标签进行定义,标题在表格外面显示为粗体剧中的文本。
表格中的表头(Heading) 使用 <th> 标签进行定义,大多数浏览器会把表头显示为粗体居中的文本。
单元格中没有内容可能会导致表格显示不正常或者不美观,解决的办法是在单元格中插入一个 no-breaking 空格,它是一个字符实体,完整的写法是&nbsp;。
<thead> <tbody> <tfoot> 分别定义表格的页眉、主体、页脚,不管在它们在 <table> 标签中的实际排列如何,最后显示出来的效果都是页眉>主体>页脚的顺序。
使用 <table> 元素进行文档布局不是表格的正确用法, <table> 元素的作用是显示表格化的数据。

HTML 列表
无序列表始于 <ul> 标签,列表项目使用粗体圆点进行标记。
有序列表始于 <ol> 标签,列表项目使用数字进行标记。
无序列表和有序列表的列表项始于 <li>,列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

HTML 块
大多数 HTML 元素被定义为块级元素 block level element 或内联元素 inline element。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例子:<h1>, <p>, <ul>, <table>, <div>

内联元素在显示时通常不会以新行开始。
例子:<b>, <td>, <a>, <img>, <span>

<div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器,可定义文档中的分区或节(division/section)。
<div> 元素没有特定的含义,换行是 <div> 固有的唯一格式表现。
<div> 元素使用 class 或 id 属性可以对大的内容块设置样式属性。但是更常见的情况是只应用其中一种,这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
<div> 元素的另一个常见的用途是文档布局,可以把文档分割为独立的、不同的部分,它取代了使用表格定义布局的老式方法。

<span> 元素是内联元素,可用作文本的容器。
<span> 元素也没有特定的含义,为 span 应用 id 或 class 属性既可以增加适当的语义,又便于对 span 应用样式(为部分文本设置样式属性)。

HTML