标题标签 <h1> 定义最大的标题。<h6> 定义最小的标题。 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推
<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>;
段落标签<p></p>
链接标签<a></a>( href 属性中指定链接的地址。)
通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
命名锚的语法:
<a name="label">锚(显示在页面上的文本)</a>
提示:锚的名称可以是任何名字。
提示:可以使用 id 属性来替代 name 属性,命名锚同样有效。
Target 属性,你可以定义被链接的文档在何处显示. target="_blank"表示会在新窗口打开文档。
图像标签<img/>(例如<img src="a.jpg" width="100" height="120" />图像的名称和尺寸是以属性的形式提供的。src指定图片,width设置宽,height设置高)
替换文本属性(Alt)为页面上的图像都加上替换文本属性是个好习惯。
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
换行<br />
创建水平线<hr/> 用于分隔内容
属性: (属性总是以名称/值对的形式出现,比如:name="value"。)
对齐方式align="center" (居中排列)
设置宽 width
设置高 height
设置背景颜色bgcolor (不建议用) ; background-color(例如bgcolor="yellow" ; style="background-color: powderblue;")
style 属性用于改变 HTML 元素的样式:
style中
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
<q> 元素定义短的引用
注释 <!-- -->: 快捷键ctrl +/ 或 ctrl+shift+/;
css的引用:
外部样式表:<link rel="stylesheet" type="text/css"href="mystyle.css">
内部样式表:在<head>部分中通过<style type="text/css"></style>定义内部样式表
内联样式: 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。
表格:<table>标签定义表格,<tr>定义行<td>定义列 添加表格数据。
table的边框属性是 border
表格的表头使用<th>标签定义,大多浏览器会把表头显示为粗体剧中。
如果某个单元格是空的(没有内容),浏览器可能无法显示出这个单元格的边框。在空单元格中添加一个空格占位符,就可以将边框显示出来。
标题标签<caption>
横跨两列的单元格属性colspan="2",横跨两行的单元格属性rowspan="2"
属性单元格边距cellpadding (来创建单元格内容于其边框之间的空白)
属性单元格间距cellspacing (增加单元格之间的距离)
表格和单元都可以通过属性添加背景颜色和背景图片
可以用align属性排列单元格内容。
框架(frame)属性添加在table标签上。 控制围绕表格的边框。
frame="box"四周有线
frame="above"上边有线
frame="below"下边有线
frame="hsides"上下有线
frame="vsides"左右有线
<col> 标签为表格中一个或多个列定义属性值。
如需对全部列应用样式,<col> 标签很有用,这样就不需要对各个单元和各行重复应用样式了。
您只能在 table 或 colgroup 元素中使用 <col> 标签。
<col align="left" /> <col align="right" />
列表:定义列表项li。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
ul无序列表; 属性默认实心圆, type="disc"(实心圆),type="circle"(空心圆), type="square"(实心方形)
ol有序列表; 添加属性start=“2”从2开始排序。默认数字列表,type="1"
type=“A”(字母列表)type="a"(小写字母排序)type=“I”(罗马字母列表)=“i”(小写罗马字母列表)
自定义列表;di定义定义列表,dt定义定义项目,dd定义定义的描述。
块元素:<div>容器 : 定义文档中的分区或节(division/section)。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<span>容器: 定义 span,用来组合文档中的行内元素。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
属性类 class="类名": div设置样式时 .类名{ };span设置样式时span.类名{ }
id属性 id="id名":设置css样式时调用 #id名{ }
同一个类名可以由多个 HTML 元素使用,而一个 id 名称只能由页面中的一个 HTML 元素使用:
id 属性用于为 HTML 元素指定唯一的 id
id 属性的值在 HTML 文档中必须是唯一的
CSS 和 JavaScript 可使用 id 属性来选取元素或设置特定元素的样式
id 属性的值区分大小写
id 属性还可用于创建 HTML 书签
JavaScript 可以使用 getElementById() 方法访问拥有特定 id 的元素
内联框架:iframe 用于在网页内显示网页。
添加 iframe 的语法<iframe src="URL"></iframe> URL 指向隔离页面的位置。
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素,但也可以用百分比来设定(比如 "80%")。
Iframe - 删除边框 frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 "0" 就可以移除边框:
javaScript: HTML <script> 标签用于定义客户端脚本(JavaScript)。
<script> 元素即可包含脚本语句,也可通过 src 属性指向外部脚本文件。
JavaScript 的常见用途是图像处理、表单验证和内容的动态更改。
如需选取 HTML 元素,JavaScript 最常用 document.getElementById() 方法。
路径:文件路径会在链接外部文件时被用到:网页,图像,样式表,JavaScript
绝对路径 相对路径
使用相对路径是个好习惯
头部:<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
以下标签都可以添加到 head 部分:
<title> 标签定义文档的标题。【html/xhtml文档中必需的】、<base> 标签为页面上的所有链接规定默认地址或默认目标(target):、
<link>标签定义文档与外部资源之间的关系。<link> 标签最常用于连接样式表:<link rel="stylesheet" type="text/css" href="mystyle.css" />
<meta>标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。针对搜索引擎的关键词
一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。
<script> 标签用于定义客户端脚本,比如 JavaScript。
<style> 标签用于为 HTML 文档定义样式信息。
布局:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。
HTML5 语义元素
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary定义 details 元素的标题
响应式设计: RWD 指的是响应式 Web 设计(Responsive Web Design), 能够以可变尺寸传递网页, 对于平板和移动设备是必需的
使用 Bootstrap,另一个创建响应式设计的方法,是使用现成的 CSS 框架。
Bootstrap 是最流行的开发响应式 web 的 HTML, CSS, 和 JS 框架。 帮助开发在任何尺寸都外观出众的站点:显示器、笔记本电脑、平板电脑或手机:
添加bootstrap <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
HTML 计算机代码元素
标签 描述
<code> 定义计算机代码文本
<kbd> 定义键盘文本
<samp> 定义计算机代码示例
<var> 定义变量
<pre> 定义预格式化文本
HTML5 语义元素 <article> 定义文章。
<aside> 定义页面内容以外的内容。
<details> 定义用户能够查看或隐藏的额外细节。
<figcaption> 定义 <figure> 元素的标题。
<figure> 规定自包含内容,比如图示、图表、照片、代码清单等。
<footer> 定义文档或节的页脚。
<header> 规定文档或节的页眉。
<main> 规定文档的主内容。
<mark> 定义重要的或强调的文本。
<nav> 定义导航链接。
<section> 定义文档中的节。
<summary> 定义 <details> 元素的可见标题。
<time> 定义日期/时间。
HTML 代码约定: 请始终保持您的样式智能、整洁、纯净、格式良好
必需的属性,请始终对图像使用 alt 属性。当图像无法显示时该属性很重要。
避免长代码行
勿使用没有必要的空行和缩进。没有必要在短的和相关项目之间使用空行,也 没有必要缩进每个元素
<title> 元素在 HTML5 中是必需的。请尽可能制作有意义的标题。
学会合理运用注释。
样式表:请使用简单的语法来链接样式表(type 属性不是必需的):<link rel="stylesheet" href="styles.css">
短规则可以压缩为一行,长规则应该分为多行。
开括号与选择器位于同一行
在开括号之前用一个空格
使用两个字符的缩进
在每个属性与其值之间使用冒号加一个空格
在每个逗号或分号之后使用空格
在每个属性值对(包括最后一个)之后使用分号
只在值包含空格时使用引号来包围值
把闭括号放在新的一行,之前不用空格
避免每行超过 80 个字符
在 HTML 中加载 JavaScript,请使用简单的语法来加载外部脚本(type 属性不是必需的) <script src="myscript.js">
尽量使用小写命名:
如果您从对大小写不敏感的服务器转到一台对大小写敏感的服务器上,这些小错误将破坏您的网站。为了避免这些问题,请始终使用小写文件名(如果可以的话)。
文件扩展名:
HTML 文件名应该使用扩展名 .html(而不是 .htm)。
CSS 文件应该使用扩展名 .css。
JavaScript 文件应该使用扩展名 .js。
HTML 中有用的字符实体。【实体名称对大小写敏感!】
显示结果 描述 实体名称 实体编号
空格  
< 小于号 < <
> 大于号 > >
& 和号 & &
" 引号 " "
' 撇号 ' (IE不支持) '
¢ 分(cent) ¢ ¢
£ 镑(pound) £ £
¥ 元(yen) ¥ ¥
€ 欧元(euro) € €
§ 小节 § §
© 版权(copyright) © ©
® 注册商标 ® ®
™ 商标 ™ ™
× 乘号 × ×
÷ 除号 ÷ ÷
HTML 符号: 实体,表情符号,键盘上不存在的字符也可以由实体代替。需要什么可上网查询。
UTF-8 字符
很多 UTF-8 字符无法在键盘上键入,但始终可以使用数字(被称为实体编号)来显示它们:
A 是 65
B 是 66
C 是 67
框架: 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。
垂直框架:
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
水平框架:
<html>
<frameset rows="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html>
框架结构标签(<frameset>)
框架结构标签(<frameset>)定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
含有 noresize="noresize" 属性的框架结构
本例演示 noresize 属性。在本例中,框架是不可调整尺寸的。
在框架间的边框上拖动鼠标,你会发现边框是无法移动的。
导航框架,使用框架导航跳转至指定的节
背景颜色(Bgcolor):属性值可以是十六进制数、RGB 值或颜色名。
背景(Background):背景可以是颜色或者图像。
URL可以是相对地址,如第一行代码。也可以使绝对地址,如第二行代码。
提示:如果你打算使用背景图片,你需要紧记一下几点:
背景图像是否增加了页面的加载时间。小贴士:图像文件不应超过 10k。
背景图像是否与页面中的其他图象搭配良好。
背景图像是否与页面中的文字颜色搭配良好。
图像在页面中平铺后,看上去还可以吗?
对文字的注意力被背景图像喧宾夺主了吗?
背景可以是颜色或者图像。
URL 字符编码:
URL 编码会将字符转换为可通过因特网传输的格式。URL - 统一资源定位器
如需完整的 URL 编码参考,就访问 URL 编码参考手册
HTML Web Server
如果希望向世界发布自己的网站,那么必须把它存放在 web 服务器上。
<!DOCTYPE> 声明帮助浏览器正确地显示网页。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。