HTML文件下有一个HTML根元素,HTML标签下有两个子元素:header和body
header标签下可以有以下标签:
title
指定网页的标题
base
设定基路径,如:
<html> <header> <title>first</title> <base href="http://www.baidu.com" _target="_blank"></base> </header> <body> <a href="/">百度一下,你就知道</a> </body> </html>
meta
meta元素提供的信息对于用户是不可见的,一般定义页面信息的名称,关键字,作者等。在header中可以有多个meta元素,meta元素分为两种:页面描述信息和http标题信息
页面描述信息:
<meta name="keywords" value="...,.."/> <meta name="description" value="..."/> <meta name="author" value="..."/> <meta name="generator" value="..."/> <meta name="robots" value="..."/>
<meta http-equiv="content-type" content="text/html;charset=gbk"/> <meta http-equiv="refresh" content="30;url=www.baidu.com"/><!-- 30s后跳到百度首页 --> <meta http-equiv="expires" content="30"/><!--30s后网页过期 --> <meta http-equiv="cache-control" content="no-cache"/><!-- 不缓存网页,每次请求都从服务器 --> <meta http-equiv="set-cookie" content="..."/><!-- 设置cookie -->
style和script
<style type="text/css"> </style> <script type="text/javascript"> </script>
header的子元素大概就这些吧,接下来看看body,body的子元素就多了,先从body的属性说起吧。
bgcolor:设置网页的背景色,默认是重复的,效果一试便知
style:设置样式,如:
<body style="background:url(a.jpg) center bottom no-repeat">
其中no-repeat也可以为repeat-x或repeat-y
leftmargin、topmargin、rightmargin、buttonmargin:控制边距
处理文字和段落
<p>:段落,在段落中 代表一个空格,align属性可以设置对齐方式,默认为left
<br>:换行
<hr>:水平分割线,常见的属性有align,width,size,color,title
<font>:文字修饰,常见的属性有color,size(1-7,默认为3),face(默认为宋体)
<em>:斜体
<strong>:加粗
<h1>:标题样式,另外有<h2><h3>到<h6>
处理特殊字符:
< <
> >
"" "
& &
<sup>:上标
<sub>:下标
<marquee>:文字滚动
<ol>、<ul>:有序列表和无序列表,列表项用<li>表示
<a>:超级链接,target属性用于设置打开方式,有_self(默认,覆盖),_blank(新窗口打开),_top,_parent,属性href用于设置链接的URL,属性title设置提示
<a name="1"/>这样的标签可以定位HTML的位置,使用<a href="#1">1</a>就跳到了前者<a>所在的位置了
HTML中的图片
图片文件的格式是计算机存储图片的方式和压缩算法,常用的格式有gif,jpg
<img>:属性src指定文件位置,属性width,height指定宽高,border设置边框粗细,alt指定当图片不显示时的代替文字,align与文字一起排版时的对齐方式
<a><img/></a>:图片链接
表格
<table border="1" align="center" rules="cols" bordercolor="#00ff00" cellspacing="5" cellpadding="5"> <caption> 表格测试 </caption> <tr height="50" align="center"> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr> <tr> <td>10</td> <td>20</td> <td>30</td> <td>40</td> </tr> <tr></tr> </table>