HTML学习笔记
HTML
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
标题标签
标题有-多种标签
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h1 align="center">heading</h1>
此标题居中对齐,但不赞成使用,请使用样式。
- 浏览器会自动地在标题的前后添加空行。
- 默认情况下,HTML会自动地在块级元素前后添加一个额外的空行,比如段落、标题元素前后。
- 标题很重要,因为搜索引擎使用标题为您的网页的结构和内容编制索引。
水平线标签
<hr />
标签在 HTML 页面中创建水平线。
- 使用水平线 (
<hr>
标签) 来分隔文章中的小节是一个办法。
段落标签
<p>This is a paragraph.</p>
- 不要使用空的段落标记
<p></p>
去插入一个空行,请使用<br />
标签换行。
换行标签
<br />
标签换行
若要在不产生一个新段落的情况下进行换行(新行):
<p> This is <br /> a paragraph with line breaks</p>
<br>
和<br />
都可以换行,但使用<br />
更好。
链接标签
<a href="http://www.w3school.com.cn">This is a link</a>
图像标签
<img src="w3school.jpg" width="104" height="142" />
连续的空格显示为一个空格
当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
属性值必须加引号
属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么必须使用单引号代替双引号。
文本格式
<b></b>
加粗
<strong></strong>
貌似也是加粗
<big></big>
变大
<small></small>
变小
<i></i>
斜体
<em></em>
强调(与斜体效果貌似一样)
<sub></sub>
上标(subscript)
<sup></sup>
下标(superscript)
<pre></pre>
预格式文本,保留空格和换行
<blockquote></blockquote>
长引用
<q></q>
短引用
<del></del>
删除线
<ins></ins>
下划线
没有下划线的链接
<a href="/html/example.html" style="text-decoration:none">
其中,style="text-decoration:none"
表示没有下划线。
如何使用样式
外部样式
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
内部样式
当单个文件需要特别样式时,就可以使用内部样式表。你可以在head部分通过<style>
标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
超链接
<a></a>
定义超链接,a是指anchor(锚)。
<a href="http://www.w3school.com.cn/" title="W3Shool">Visit W3School</a>
点击这个超链接会把用户带到 W3School 的首页。
title
属性为鼠标悬停时显示的文本
有两种使用<a>
标签的方式:
1. 通过使用 href 属性 - 创建指向另一个文档的链接
2. 通过使用 name 属性 - 创建文档内的书签
超链接中的target属性
target
属性:可以定义被链接的文档在何处显示。
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
在新窗口打开链接。
超链接中的name属性
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,即在页面内跳转。
使用方法:
1. 首先,我们在 HTML 文档中对锚进行命名(创建一个书签):<a name="word">文字</a>
2. 然后,我们在同一个页面中创建指向该锚的链接:<a href="word">文字</a>
3. 我们也可以在其他页面中创建指向该锚的链接:<a href="http://www.example.com/html.asp#word">w文字</a>
举例:
<p>
<a href="#C3">查看 Chapter 3。</a>
</p>
<h2>Chapter 1</h2>
<p>content 1:bla bla bla</p>
<h2>Chapter 2</h2>
<p>content 2:bla bla bla</p>
<h2><a name="C3">Chapter 3<a></h2>
<p>content 3:bla bla bla</p>
实例演示:http://www.w3school.com.cn/tiy/t.asp?f=html_link_locations
将图像作为链接
将<img>
标签包含在<a>
标签中
<a href="/html/example.html">
<img src="/example.gif" />
</a>
跳出框架
<a href="/index.html" target="_top">click</a>
使用target="_top"
属性跳出框架。
图像替换为文本属性
在浏览器无法载入图像时,替换文本属性告诉读者她们失去的信息。此时,浏览器将显示这个替代性的文本而不是图像。
<img src="boat.gif" alt="Big Boat">
背景图片
如果图像小于页面,图像会进行重复。
<body background="/.../background.jpg">
排列图片
在文字中排列图片
<img src="/.../picture.gif" align="bottom">
align
属性可为bottom
、middle
、top
实例:http://www.w3school.com.cn/tiy/t.asp?f=html_image_align
调整图片大小
width
属性和heigth
属性
创建图像映射
创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
实例:http://www.w3school.com.cn/tiy/t.asp?f=html_areamap
表格
http://www.w3school.com.cn/html/html_tables.asp
无序列表
Unordered List
<ul>
<li>apple</li>
<li>banana</li>
</ul>
有序列表
Ordered List
<ol>
<li>apple</li>
<li>banana</li>
</ol>
自定义列表
自定义列表以<dl>
标签开始。每个自定义列表项以<dt>
开始。每个自定义列表项的定义以<dd>
开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
显示为:
Coffee Black hot drink Milk White cold drink
块元素与内联元素
块元素:块级元素在浏览器显示时,通常会以新行来开始(和结束)。
内联元素:内联元素在显示时通常不会以新行开始。
div 与 span 元素
<div>
元素是块级元素,它是可用于组合其他 HTML 元素的容器,没有特定的含义。
<span>
元素是内联元素,可用作文本的容器。没有特定的含义。
表单——文本域
<html>
<body>
<form>
名:
<input type="text" name="firstname">
<br />
姓:
<input type="text" name="lastname">
</form>
</body>
</html>
http://www.w3school.com.cn/tiy/t.asp?f=html_inputfields
表单——密码域
<html>
<body>
<form>
用户:
<input type="text" name="user">
<br />
密码:
<input type="password" name="password">
</form>
<p>
请注意,当您在密码域中键入字符时,浏览器将使用项目符号来代替这些字符。
</p>
</body>
</html>
http://www.w3school.com.cn/tiy/t.asp?f=html_passwordfields
单选按钮
radio:单选钮
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
复选框
checkbox:复选框
<form>
<input type="checkbox" name="bike" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>
其他表单知识
http://www.w3school.com.cn/html/html_forms.asp
框架
通过使用框架,可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。
框架标签
<frameset cols="25%,75%">
<frame src="frame_a.htm" noresize="noresize">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
以上框架设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。
<frameset>
:定义框架
<cols>
:垂直框架
<rows>
:水平框架
noresize
属性:框架尺寸是默认可以调整的,此属性定义了框架尺寸不可调整
内嵌框架
<iframe src="URL" width="200" height="200"></iframe>
添加内嵌框架iframe
height
和width
属性用于规定 iframe 的高度和宽度。
frameborder="0"
删除框架的边框
使用iframe作为链接的目标
<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
以上链接点击后将在框架内显示
改变背景
1.改变背景颜色
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
注意:标签属性为bgcolor
而不是backgroundcolor
2.以图像作为背景
<body background="picture.gif">
如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制。
!DOCYTYPE 声明
Web 世界中存在许多不同的文档。只有了解文档的类型,浏览器才能正确地显示文档。
HTML 也有多个不同的版本,只有完全明白页面中使用的确切 HTML版本,浏览器才能完全正确地显示出 HTML 页面。这就是<!DOCTYPE>
的用处。
<!DOCTYPE>
不是 HTML 标签。它为浏览器提供一项信息(声明),即 HTML 是用什么版本编写的。
<!DOCYTYPE>
是HTML5的版本声明
HTML head 元素
<head>
元素是所有头部元素的容器。
<head>
内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
以下标签都可以添加到<head>
部分:<title>
、<base>
、<link>
、<meta>
、<script>
以及 <style>
。
HTML title元素
<title>
元素在所有 HTML/XHTML 文档中都是必需的。
<title>
元素能够:
1. 定义浏览器工具栏中的标题
2. 提供页面被添加到收藏夹时显示的标题
3. 显示在搜索引擎结果中的页面标题
**HTML base 元素
<base>
标签为页面上的所有链接规定默认地址或默认目标(target)
将所有页面设置为在新窗口打开
<head>
<base target="_blank" />
</head>
设定默认地址
<html>
<head>
<base href="www.xxx.com" />`
</head>
<body>
<img> src=picture.gif />
<p><a href="www.baidu.com">baidu</p>
<p><a href="http://baidu.com">baidu</p>
①由于在<head>
部分规定了一个基准 URL,所以浏览器将在如下地址寻找图片:http://www.xxx.com/picture.gif
②而第一个链接,浏览器会链接到http://www.xxx.com/www.baidu.com
③而第二个链接,由于前面添加了http://
,浏览器会链接到http://baidu.com
可参考实例:http://www.w3school.com.cn/tiy/t.asp?f=html_base_test
HTML link 元素
<link>
标签定义文档与外部资源之间的关系。
<link>
标签最常用于连接样式表。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
HTML style 元素
<style>
标签用于为 HTML 文档定义样式信息。
您可以在<style>
元素内规定 HTML 元素在浏览器中呈现的样式。
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
HTML meta 元素
元数据(metadata)是关于数据的信息。
<meta>
标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。
典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta>
标签始终位于 head 元素中。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
略懂......
HTML script 元素
<script>
标签用于定义客户端脚本,比如 JavaScript。
script 元素既可包含脚本语句,也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”:
<script type="text/javascript">
document.write("Hello World!")
</script>
noscript 标签
<noscript>
标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时,才会显示 noscript 元素中的内容:
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
预留字符
在 HTML 中,某些字符是预留的。
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。
HTML实体符号参考手册:http://www.w3school.com.cn/tags/html_ref_entities.html
不间断空格(non-breaking space)
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用
字符实体。
URL - Uniform Resource Locator
URL 也被称为网址。
当您点击 HTML 页面中的某个链接时,对应的 标签指向万维网上的一个地址。
统一资源定位器(URL)用于定位万维网上的文档(或其他数据)。
网址,比如 http://www.w3school.com.cn/html/index.asp,遵守以下的语法规则:
scheme://host.domain:port/path/filename
解释:
- scheme - 定义因特网服务的类型。最常见的类型是 http
- host - 定义域主机(http 的默认主机是 www)
- domain - 定义因特网域名,比如 w3school.com.cn
- :port - 定义主机上的端口号(http 的默认端口号是 80)
- path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。
- filename - 定义文档/资源的名称
HTML 多媒体
http://www.w3school.com.cn/html/html_media.asp