HTML入门(CSS)

一、标签和属性

1. meta标签meta

<meta> 标签位于文档的头部,不包含任何内容(只有属性,没有内容)。<meta> 标签的属性定义了与HTML文档相关联的名称/值对。<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 属性关联到一个名称。
   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

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> 标签来加载的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值