一、标签和属性
1. meta标签meta:
<meta> 标签位于文档的头部,不包含任何内容(只有属性,没有内容)。<meta> 标签的属性定义了与HTML文档相关联的名称/值对。<meta> 标签没有结束标签。
注:
1)<meta> 标签永远位于 head 元素内部;
2)元数据总是以名称/值的形式被成对传递的;
3)必需的属性:
属性 | 值 | 描述 |
---|---|---|
content | some_text | 定义与 http-equiv 或 name 属性相关的元信息 |
4)可选的属性:(这些属性提供了名称/值对中的名称)
属性 | 值 | 描述 |
---|---|---|
http-equiv |
| 把 content 属性关联到 HTTP 头部。 |
name |
| 把 content 属性关联到一个名称。 |
scheme | some_text | 定义用于翻译 content 属性值的格式。 |
2. head标签head:
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>以及 <title>。
<title> 定义文档的标题,它是 head 部分中唯一必需的元素。
<title>:
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>
</html>
<base>:<base> 标签为页面上的所有链接规定默认地址或默认目标(target):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<base target="_blank" />
</head>
<body>
<p>
<a href="http://www.w3school.com.cn" target="_blank">这个连接</a> 将在新窗口中加载,因为 target 属性被设置为 "_blank"。
</p>
<p>
<a href="http://www.w3school.com.cn">这个连接</a> 也将在新窗口中加载,即使没有 target 属性。
</p>
</body>
</html>
or
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<base href="http://www.baidu.com" />
<base target="_blank" />
</head>
<body>
<p><a href="http://www.sina.com.cn">这个链接</a> 将在新窗口中加载新浪首页。</p>
<p><a href=" ">这个链接</a> 将在新窗口中默认加载新浪首页。</p>
</body>
</html>
<script>:
<html>
<head>
<script type="text/javascript">
function msg()
{
alert("Hello world!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me" οnclick="msg()" />
</form>
<p>如果点击上面的按钮,会启动一段 JavaScript。如果您希望学习更多有关 JavaScript 的知识,请访问我们的 JavaScript 教程。</p>
</body>
</html>
<meta>:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="author"
content="w3school.com.cn">
<meta name="revised"
content="David Yang,8/1/07">
<meta name="generator"
content="Dreamweaver 8.0en">
</head>
<body>
<p>本文档的 meta 属性标识了创作者和编辑软件。</p>
</body>
</html>
<style>:注意,样式一定要写在head里面
<html>
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
</html><strong>
</strong>
注:1)应该把 <head> 标签放在文档的开始处,紧跟在 <html> 后面,并处于 <body> 标签或 <frameset> 标签之前。 2) 请记住始终为文档规定标题!
3. div 标签div:按块 style
文档中的一个部分会显示为绿色:
<html>
<body>
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
4. li标签:
<html>
<body>
<p>有序列表:</p>
<ol>
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol>
<p>无序列表:</p>
<ul>
<li>雪碧</li>
<li>可乐</li>
<li>凉茶</li>
</ul>
</body>
</html>
or
<html>
<body>
<h3>Table of Contents</h3>
<ul>
<li><a href="/example/html/pref.html" target="view_window">Preface</a></li>
<li><a href="/example/html/chap1.html" target="view_window">Chapter 1</a></li>
<li><a href="/example/html/chap2.html" target="view_window">Chapter 2</a></li>
<li><a href="/example/html/chap3.html" target="view_window">Chapter 3</a></li>
</ul>
</body>
</html>
or
<html>
<body>
<p>有序列表:</p>
<ol>
<li>打开冰箱门</li>
<li>把大象放进去</li>
<li>关上冰箱门</li>
</ol>
<p>无序列表:</p>
<ul>
<li>雪碧</li>
<li>可乐</li>
<li>凉茶</li>
</ul>
</body>
</html>
5. a标签a :
<!DOCTYPE html>
<html>
<body>
<p>点击图片可以转到链接:</p>
<a href="http://www.baidu.com">
<img src="E:\python\test.png" alt="test">
</a>
</body>
</html>
下载:
<!DOCTYPE html>
<html>
<body>
<p>点击图片可以下载图片:</p>
<a href="E:\python\test.png" download=" ">
<img src="E:\python\test.png" alt="test">
</a>
</body>
</html>
download="E:\python\test.png"
target:
<html>
<body>
<h3>Table of Contents</h3>
<ul>
<li><a href="/example/html/pref.html" target="view_window">Preface</a></li>
<li><a href="/example/html/chap1.html" target="view_window">Chapter 1</a></li>
<li><a href="/example/html/chap2.html" target="view_window">Chapter 2</a></li>
<li><a href="/example/html/chap3.html" target="view_window">Chapter 3</a></li>
</ul>
</body>
</html>
第一次打开链接时,创建一个名为view_window的新窗口,其后每次打开链接不再创建新窗口,而是在view_window窗口中打开链接,并覆盖原来的链接内容。
target还有以下属性值:
属性值 | 描述 |
---|---|
_blank | 在新窗口中打开被链接文档。 |
_self | 默认。在相同的框架中打开被链接文档。 |
_parent | 在父框架集中打开被链接文档。 |
_top | 在整个窗口中打开被链接文档。 |
framename | 在指定的框架中打开被链接文档。 |
framename:在指定的框架中打开被链接文档。在框架中原本显示的是百度首页,点击链接之后,在框架中显示新浪首页(因为target所引用的framename我们已经定义过了)。
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.baidu.com" name="abchaha"></iframe>
<p><a href="http://www.sina.com.cn" target="abchaha">sina.com.cn</a></p>
<p><b>注释:</b>由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开。</p>
</body>
</html>
6. title属性(全局属性):全局属性就是在任何元素都可以使用的属性,如title,style,id,class等
<html>
<body>
<abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
<p title="Free Web tutorials">W3School.com.cn</p>
</body>
</html>
7. form标签form:用于为用户输入创建 HTML 表单
<html>
<body>
<form action="/example/html/form_action.asp" method="get">
<fieldset>
<legend>哈哈哈</legend>
<p>First name: <input type="text" name="fname" /></p>
<p>Last name: <input type="text" name="lname" /></p>
<input type="submit" value="Submit" />
</fieldset>
</form>
<p>请单击确认按钮,输入会发送到服务器上名为 "form_action.asp" 的页面。</p>
</body>
</html>
fieldset标签将表单内的相关元素分组
8. input标签input:
input标签的type属性:type
注:form搭配input,fieldset,type使用。
二、HTML 文本格式化
HTML 可定义很多供格式化输出的元素,比如粗体和斜体字。
格式化有两种方式:
1)直接用文本格式化标签(格式化标签):在<body>...</body>内进行;
2)使用独立的样式表CSS:
在 style 中规定,使得浏览器如何呈现 HTML 文档。这里是使用<style>标签style,且必须位于 head 元素中,这里要使用CSS属性!
另外,这些属性使用“:”赋值(HTML标签的属性是用“=”赋值),用“;”分隔(HTML标签的属性是用“ ”空格分隔)
使用外部样式表:link标签link!也必须位于 head 元素中。
<!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:150px;float:left;}
div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}
div#footer {background-color:#99bbbb;clear:both;text-align:center;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
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>
注意,上面代码<style>元素里面的background-color、height、width、float等都是CSS属性
属性查询。
三、如何在页面中设置书签
所谓书签,指的是在本页面中某处设置一个链接,使得用户在点击该链接时可以跳转到该页面的指定位置,就像书签一样。
1)首先,我们在 HTML 文档中对锚进行命名为 tips(创建一个书签):
<a name="tips"
>基本的注意事项-有用的提示</a>
2)然后,我们在同一个HTML 文档中创建指向该锚的链接:
<a href="#tips">有用的提示(可以随便写)</a>
关于“有用的提示”可以随便写,因为HTML是根据name和tips来定位书签的,而非“有用的提示”。
也可以在其他页面中创建指向该锚的链接:
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。
实例:
<html>
<body>
<p>
<a href="#C4">查看 Chapter 4。</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
</body>
</html>
四、链接发邮件
用mailto:
另,电子邮件中的CC和BCC分别代表什么? CC 是抄送,BCC是隐藏抄送。
<html>
<body>
<p>
这是邮件链接:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>
<p>
<b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</p>
</body>
</html>
复杂一点的,
<html>
<body>
<p>
这是另一个 mailto 链接:
<a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件!</a>
</p>
<p>
<b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</p>
</body>
</html>
注意,mailto的第一个字段和之后的字段之间中“?”分隔,其余字段间用“&”分隔。
五、图像标签<img>和源属性src
定义图像的语法是:
<img src="url" />URL 指存储图像的位置。
假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。
排列和浮动图片(规定图片的位置:在文字的左边 left 还是右边 right ,与文字底部 bottom 对齐,还是顶部 top 或中间 middle 对齐)用align属性;显示替换文本用alt属性;用图片做链接见a标签第一个例子。
关键是如何创建图像映射:创建带有可供点击区域的图像地图。其中的每个区域都是一个超级链接。
实例:
<html>
<body>
<p>请点击图像上的星球,把它们放大。</p>
<img src="E:\python\image\test.png" usemap="#girlmap" alt="girl" />
<map name="girlmap" id="girlmap">
<area shape="circle" coords="582,398,80" href ="E:\python\image\1.png" target ="_blank" alt="eyes" />
<area shape="circle" coords="620,710,100" href ="E:\python\image\2.png" target ="_blank" alt="jar" />
<area shape="rect" coords="0,0,483,547" href ="E:\python\image\test.png" target ="_blank" alt="beauty" />
</map>
<p><b>注释:</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>
1)map标签:
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性(取决于浏览器),所以我们应同时向 <map> 添加 id 和 name 属性(以供image标签选择引用)。
必需的属性
属性 | 值 | 描述 |
---|---|---|
id | unique_name | 为 map 标签定义唯一的名称。 |
可选的属性
属性 | 值 | 描述 |
---|---|---|
name | mapname | 为 image-map 规定的名称。 |
2)area标签:
<area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。area 元素总是嵌套在 <map> 标签中。
sharp属性和coords 属性:
coords 属性与 shape 属性配合使用,来规定区域的尺寸、形状和位置。图像左上角的坐标是 "0,0"。
语法
<area shape="rect/circ" coords="value">
属性值
值 | 描述 |
---|---|
x1,y1,x2,y2 | 如果 shape 属性设置为 "rect",则该值规定矩形左上角和右下角的坐标。 |
x,y,radius | 如果 shape 属性设置为 "circ",则该值规定圆心的坐标和半径。 |
x1,y1,x2,y2,..,xn,yn | 如果 shape 属性设置为 "poly",则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致,那么为了关闭多边形,浏览器必须添加最后一对坐标。 |
1)设置coords时要清楚原图像的像素信息(可用系统自带的“画图”软件),才能有效定位和打开链接。
2)如果某个 area 标签中的坐标和其他区域发生了重叠,会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。
六、地址重定向
<meta> 标签的 http-equiv 属性下的 Refresh ,然后用a标签超链接即可。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>
<body>
<p>
对不起。我们已经搬家了。您的 URL 是 <a href="http://www.w3school.com.cn">http://www.w3school.com.cn</a>
</p>
<p>您将在 5 秒内被重定向到新的地址。</p>
<p>如果超过 5 秒后您仍然看到本消息,请点击上面的链接。</p>
</body>
</html>
七、URL 统一资源定位器URL
URL 只能使用 ASCII 字符集来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符 URL 编码参考手册。 URL 不能包含空格,URL 编码通常使用 + 来替换空格。