前端-HTML笔记
2014-12-08 17:59
330 查看
1.注释:默认情况下,HTML
会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
2.使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!(但是不要用 <br /> 标签去创建列表。不要着急,您将在稍后的篇幅学习到
HTML 列表。)
3.如果您希望在不产生一个新段落的情况下进行换行(新行),请使用
<br /> 标签:
<p>This is<br />a para<br />graph with line breaks</p>
4.当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML
代码中的所有连续的空行(换行)也被显示为一个空格。
5.
6.
7.
8.使用css
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。
</head>[/code]
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
This is a paragraph
</p>[/code]
9.
10.
使用 Target 属性,你可以定义被链接的文档在何处显示。
下面的这行会在新窗口打开文档:<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
11.
首先,我们在 HTML 文档中对锚进行命名(创建一个书签):
然后,我们在同一个文档中创建指向该锚的链接:
您也可以在其他页面中创建指向该锚的链接:
14.
15.
16.如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。17.
18.
19.
很难打印整张页面
20.
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset
会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
2.使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它!(但是不要用 <br /> 标签去创建列表。不要着急,您将在稍后的篇幅学习到
HTML 列表。)
3.如果您希望在不产生一个新段落的情况下进行换行(新行),请使用
<br /> 标签:
<p>This is<br />a para<br />graph with line breaks</p>
4.当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是,HTML
代码中的所有连续的空行(换行)也被显示为一个空格。
5.
文本格式化标签
标签 | 描述 |
---|---|
<b> | 定义粗体文本。 |
<big> | 定义大号字。 |
<em> | 定义着重文字。 |
<i> | 定义斜体字。 |
<small> | 定义小号字。 |
<strong> | 定义加重语气。 |
<sub> | 定义下标字。 |
<sup> | 定义上标字。 |
<ins> | 定义插入字。 |
<del> | 定义删除字。 |
<s> | 不赞成使用。使用 <del> 代替。 |
<strike> | 不赞成使用。使用 <del> 代替。 |
<u> | 不赞成使用。使用样式(style)代替。 |
“计算机输出”标签
标签 | 描述 |
---|---|
<code> | 定义计算机代码。 |
<kbd> | 定义键盘码。 |
<samp> | 定义计算机代码样本。 |
<tt> | 定义打字机代码。 |
<var> | 定义变量。 |
<pre> | 定义预格式文本。 |
<listing> | 不赞成使用。使用 <pre> 代替。 |
<plaintext> | 不赞成使用。使用 <pre> 代替。 |
<xmp> | 不赞成使用。使用 <pre> 代替。 |
引用、引用和术语定义
标签 | 描述 |
---|---|
<abbr> | 定义缩写。 |
<acronym> | 定义首字母缩写。 |
<address> | 定义地址。 |
<bdo> | 定义文字方向。 |
<blockquote> | 定义长的引用。 |
<q> | 定义短的引用语。 |
<cite> | 定义引用、引证。 |
<dfn> | 定义一个定义项目。 |
外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。<head> [code]<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。<head> [code]<style type="text/css"> body {background-color: red} p {margin-left: 20px} </style>
</head>[/code]
内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。<p [code]style="color: red; margin-left: 20px">
This is a paragraph
</p>[/code]
9.
标签 | 描述 |
---|---|
<style> | 定义样式定义。 |
<link> | 定义资源引用。 |
<div> | 定义文档中的节或区域(块级)。 |
<span> | 定义文档中的行内的小块或区域。 |
<font> | 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。 |
<basefont> | 定义基准字体。不赞成使用。请使用样式。 |
<center> | 对文本进行水平居中。不赞成使用。请使用样式。 |
HTML 链接 - target 属性
使用 Target 属性,你可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档:<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
11.
实例
首先,我们在 HTML 文档中对锚进行命名(创建一个书签):<a [code]name="tips">基本的注意事项 - 有用的提示</a>[/code]
然后,我们在同一个文档中创建指向该锚的链接:
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接:
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
HTML 链接标签
替换文本属性(Alt)
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。<img src="boat.gif"alt="Big Boat">12.在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯,这样有助于更好的显示信息,并且对于那些使用纯文本浏览器的人来说是非常有用的。13.
图像标签
标签 | 描述 |
---|---|
<img> | 定义图像。 |
<map> | 定义图像地图。 |
<area> | 定义图像地图中的可点击区域。 |
表格标签
表格 | 描述 |
---|---|
<table> | 定义表格 |
<caption> | 定义表格标题。 |
<th> | 定义表格的表头。 |
<tr> | 定义表格的行。 |
<td> | 定义表格单元。 |
<thead> | 定义表格的页眉。 |
<tbody> | 定义表格的主体。 |
<tfoot> | 定义表格的页脚。 |
<col> | 定义用于表格列的属性。 |
<colgroup> | 定义表格列的组。 |
列表标签
标签 | 描述 |
---|---|
<ol> | 定义有序列表。 |
<ul> | 定义无序列表。 |
<li> | 定义列表项。 |
<dl> | 定义定义列表。 |
<dt> | 定义定义项目。 |
<dd> | 定义定义的描述。 |
<dir> | 已废弃。使用 <ul> 代替它。 |
<menu> | 已废弃。使用 <ul> 代替它。 |
TML 布局 - 使用 <div> 元素
div 元素是用于分组 HTML 元素的块级元素。下面的例子使用五个 div 元素来创建多列布局:实例
<!DOCTYPE html> <html> <head> <style type="text/css"> div#container{width:500px} div#header {background-color:#99bbbb;} div#menu {background-color:#ffff99; height:200px; width:100px; float:left;} div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;} div#footer {background-color:#99bbbb; clear:both; text-align:center;} h1 {margin-bottom:0;} h2 {margin-bottom:0; font-size:14px;} ul {margin:0;} li {list-style:none;} </style> </head> <body> <div id="container"> <div id="header"> <h1>Main Title of Web Page</h1> </div> <div id="menu"> <h2>Menu</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">Content goes here</div> <div id="footer">Copyright W3School.com.cn</div> </div> </body> </html>亲自试一试上面的 HTML 代码会产生如下结果:
18.
表单标签
标签 | 描述 |
---|---|
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 (一个多行的输入控件) |
<label> | 定义一个控制的标签 |
<fieldset> | 定义域 |
<legend> | 定义域的标题 |
<select> | 定义一个选择列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个按钮 |
<isindex> | 已废弃。由 <input> 代替。 |
框架
通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。使用框架的坏处:开发人员必须同时跟踪更多的HTML文档很难打印整张页面
20.
框架标签(Frame)
Frame 标签定义了放置在每个框架中的 HTML 文档。在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中:<frameset cols="25%,75%"><frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset
21实例
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
相关文章推荐
- 《编写高质量代码-Web前端开发修改之道》笔记--第三章 高质量的HTML
- 【前端】HTML入门笔记
- 【开源】前端练手笔记,Chrome扩展应用程序(html+CSS+JS) (1)
- 前端学习笔记(二)——html
- 前端基础笔记HTML&CSS&JS
- 前端攻城狮学习笔记六:常见前端面试题之HTML/CSS部分(一)
- 前端的一些小笔记 HTML+CSS
- j2ee学习笔记之前端(js、jQuery、html、html5、webService、ajax、css)—— 一直会补充
- 前端面试学习笔记之HTML
- 前端开发学习笔记05---HTML高级教程
- web前端——html基础笔记 NO.6
- web前端——html基础笔记 NO.11{元素分类定义,盒模型}
- web前端——html基础笔记 NO.10
- 前端学习笔记--HTML
- 〖前端开发〗HTML/CSS基础知识学习笔记
- 【前端笔记】在HTML中画一条横线和IE10支持引用的CSS文件
- web前端——html基础笔记 NO.9
- web前端——html基础笔记 NO.13{盒模型,颜色值,字体的缩写}
- WEB前端(HTML、XML、CSS、JS)学习笔记
- 前端 Html笔记3