HTML入门(CSS)

来源：互联网发布：dncy为什么淘宝上没有编辑：程序博客网时间：2024/05/18 00:22

一、标签和属性

1. meta标签meta：

注：

1）<meta> 标签永远位于 head 元素内部；

2）元数据总是以名称/值的形式被成对传递的；

3）必需的属性：

属性值描述 content some_text定义与 http-equiv 或 name 属性相关的元信息值得注意的是， content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。content 属性始终要和 name 属性或 http-equiv 属性一起使用。

4）可选的属性：(这些属性提供了名称/值对中的名称)

属性值描述 http-equiv

content-type
expires
refresh
set-cookie

把 content 属性关联到 HTTP 头部。 name

author
description
keywords
generator
revised
others

把 content 属性关联到一个名称。 schemesome_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>

<!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" onclick="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>

<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>

<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标签选择引用)。

必需的属性

属性值描述idunique_name为 map 标签定义唯一的名称。

可选的属性

属性值描述namemapname为 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 标签。浏览器会忽略超过图像边界范围之外的坐标。

六、地址重定向

<!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

Web 浏览器通过 URL（服务器地址）从 web 服务器请求（GET ，POST）页面。URL 是网页的地址，比如 http://www.sina.com.cn。
URL 只能使用 ASCII 字符集来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符URL 编码参考手册。URL 不能包含空格，URL 编码通常使用 + 来替换空格。

八、Object 标签作用是支持 HTML 助手（插件）object

辅助应用程序（helper application）是可由浏览器启动的程序。辅助应用程序也称为插件。辅助程序可用于播放音频和视频（以及其他）。辅助程序是使用 <object> 标签来加载的。

0 0