一、 HTML基础
1、HTML基本结构
<html>
<head>
<title>文件标题<title>
</head>
<body>
文件正文
</body>
</html>
说明：
标签<html>用于表示文件是以超文本标记语言（HTML）表写的。<html>是成对出现的，首标签<html>和尾标签</html>分别位于文件的最前面和最后面。
<head>它包含文件的标题、编码方式及URL等信息，这些信息大部分用于提供索引、辨认或其他方面的应用。
<head>与</head>之间的部分是HTML文件的文件头部分，用以说明文件的标题和整个的一些公共属性。
<body>与</body>之间的部分是HTML文件的主体部分。
2、文本编写注意事项
（1）元素的标签要用"<>",并且结束的标签要在开始的标签前加“/”;例：<html>开始 </html>结束
（2）标签与标签之间可以嵌套；
（3）在源代码中不区分大小写；
（4）html标签中可以放置各种属性；
（5）在源代码中添加注释时，用“<!--”开始，“--!>”结束；
二、HTML文件基本标记
1、头部标记<head>
| 标记 | 描述 |
| <base> | 当前文档的URL全称（基层网址） |
| <basefont> | 设定基准的文字字体、字号和颜色 |
| <title> | 设定显示在浏览器左上方的标题内容 |
| <isindex> | 表明该文档是一个可用于检索的网关脚本，由服务器自动建立 |
| <meta> | 有关文档本身的元信息，如用于查询的关键字、获取该文档的有效期等 |
| <style> | 设定CSS层叠样式表的内容 |
| <link> | 设定外部文件的链接 |
| <script> | 设定页面中程序脚本的内容 |
2、标题标记<title>
3、元信息标记<meta>
meta元素提供的信息是用户不可见的，它不显示在页面中，一般用来定义页面信息的名称、关键字、作者等。一个HTML页面中可以有多个meta元素，且meta不需要设置结束标记。meta的属性有两种：name和http-equiv，其中name属性主要用于描述网页，以便于搜索引擎查找和分类。
（1）设置页面关键字
语法： <meta name="keyname" contect="具体的关键字">
（2）设置页面描述
语法： <meta name="description" contect="对页面的描述语言">
（3）设置编辑工具
语法： <meta name="generator" contect="编辑软件的名称">
（4）设定作者信息
语法： <meta name="author" contect="作者的姓名">
（5）限制搜索方式
语法： <meta name="robots" contect="搜索方式">
（6）设置网页文字及语言
语法： <meta http-equiv="Content-Type" contect="text/html;charest=字符集类型">
语法： <meta http-equiv="Content-Language" contect="语言">
（7）设置网页的定时跳转
语法： <meta http-equiv="refresh" contect="跳转时间；url=链接地址">
（8）设定有效期限
语法： <meta http-equiv="expires" contect="到期的时间">
（9）禁止从缓存中调用
语法： <meta http-equiv="cache-control" contect="no-cache">
语法： <meta http-equiv="pragram" contect="no-cache">
（10）删除过期的cookie
语法： <meta http-equiv="set-cookie" contect="到期的时间">
（11）强制打开新窗口
语法： <meta http-equiv="windows-target" contect="_top">
（12）设置网页的过度效果
语法： <meta http-equiv="过度事件" contect="revealtrans(duration=过渡效果持续时间，transition=过渡方式)">
4、基层网址标记<base>
语法： <base href="链接地址" target="新窗口的打开方式">
5、页面的主题标记<body>
（1）设置文字颜色——text
语法： <body text="颜色代码" >
（2）背景颜色属性——bgcolor
语法： <body bgcolor="颜色代码" >
（3）背景图像属性属性——background
语法： <body background="文件链接地址" bgproperties="背景图片固定属性" >
（4）设置链接文字属性——link
语法： <body link="颜色代码" >
（5）设置边距——margin
语法： <body topmargin="上边距的值" leftmargin="左边距的值" >
三、设计网页文本内容
1、标题文字的建立
（1）标题文字标记<h>
1级标题：<h1>...</h1>
2级标题：<h2>...</h2>
3级标题：<h3>...</h3>
4级标题：<h4>...</h4>
5级标题：<h5>...</h5>
6级标题：<h6>...</h6>
（2）对齐方式——align
语法：align="对齐方式" （left right center ）
2、设置文字格式
（1）设置文字字体——face
语法：<font face="字体1,字体2,...">应用了该字体的文字</font>
（2）设置字号——size
语法：<font size="文字字号"></font>
（3）设置文字颜色——color
语法：<font color="颜色代码"></font>
（4）粗体、斜体、下划线——strong、em、u
语法：<strong>粗体的文字</strong>
<em>斜体字</em>
<u>带下划线的文字</u>
（5）上标与下标——sup、sub
语法：<sup>...</sup> 上标标记
<sub>...</sub> 下标标记
（6）设置删除线——strike
语法：<strike>文字</strike>或<s>文字</s>
（7）等宽文字标记——code
语法：<code>文字</code>
<samp>文字</samp>
（8）空格—— 
语法： 
3、设置段落格式
（1）段落标记——p
语法：<p>段落文字</p>
（2）取消文字换行标记——nobr
语法：<nobr>不换行显示的文字</nobr>
（3）换行标记——br
语法：<br>
（4）保留原始排版标记——pre
语法：<pre>文字</pre>
（5）居中对齐标记——center
语法：<center>文字</center>
（6）向右缩进标记——blockquote
语法：<blockquote>文字</blockquote>
4、水平线标记
（1）添加水平线——hr
语法：<hr>
（2）设置水平线的宽度与高度——width、height
语法：<hr width="水平线宽度" height="水平线高度">
（3）设置水平线的颜色——color
语法：<hr color="颜色代码">
（4）设置水平线的对齐方式——align
语法：<hr align="对齐方式">
（5）去掉水平线阴影——noshade
语法：<hr noshade="noshade/">
5、其他文字标记
（1）文字标注标记——ruby
语法：<ruby>
被说明的文字
<rt>
文字的标注
<rt>
</ruby>
（2）声明变量标记——var
语法：<ar>变量</var>
（3）忽视HTML标记——plaintext、xmp
语法：<plaintext>或<xmp>
四、使用列表
1、无序列表标记
语法：<ul>
<li>文字<li>
<li>文字<li>
...
</ul>
2、有序列表标记
语法：<ol>
<li>文字<li>
<li>文字<li>
...
</ol>
五、超链接
1、绝对路径：是主页上的文件或目录在硬盘上的真正路径
优点：定位链接目标文件比较清晰
缺点：（1）需要输入更多的内容；（2）若文件被移动了就需要重新设置相关的所有链接；
2、相对路径：其相对地址可以自由的在文件之间构建链接，这种地址形式利用的是构建两个文件之间的相对关系，不受站点文件夹所处服务器位置的影响。优点：即使站点文件夹所处服务器地址发生改变时，文件夹的所有内部链接都不会出问题。
3、建立文本超链接
语法：<a href="链接地址">链接文字</a>
4、通过http协议
语法：<a href="http://...">链接文字</a>
六、使用图像
1、添加图片
语法：<img src="图像文件的地址">
2、设置图像属性
（1）图像高度、宽度——height、width
语法：<img src="图像文件的地址" height="图像的高度" width="图像的宽度">
（2）图像边框——border
语法：<img src="图像文件的地址" border="图像边框的宽度">
（3）图像水平间距、垂直间距——hspace、vspace
语法：<img src="图像文件的地址" hspace="水平间距" vspace="垂直间距">
七、表格的应用
1、表格的基本构成
| 标记 | 描述 |
| <table>...<table> | 表格标记 |
| <tr>...<tr> | 行标记 |
| <td>...<td> | 列标记 |
2、表格的标题——caption
语法：<caption>表格的标题</caption>
八、层标记——div
1、<div>标签被称为区隔标签，表示一块可显示HTML的区域，用于设置字、图片、表格等的摆放位置，<div>标签是块元素，需要关闭标签。
语法：<div>
....
</div>
2、<div>标签的属性
（1）align属性 可以改变<div>标签的水平对齐方式
<tr align="left">
<tr align="center">
<tr align="right">
（2）id属性 用于区分不同的结构和内容，就像人的名字，如果同一个房子里有两个人重名，就会混淆。
（3）class属性 用于指定元素属于何种样式的类；class是一个样式，可以套在任何结构和内容上。
（4）style属性 用于设置对象的内嵌样式
position属性 进行<div>的定位
语法：position:static|absolute|relative
static:无特殊定位，对象遵循HTML定位规则。
absolute:将对象流中拖出，并不占位置，可以层叠，使用left、right、top、tottom等属性进行绝对定位。此时对象不具有边距，但仍有补白和边框。
relative:对象不可层叠（占位置），但将依据left、right、top、bottom等属性在正常文档流中偏移位置。
display属性 style属性的另一个常用功能是控制<div>标签的display属性，用于设置元素的浮动特征，
当display被设置为block（块）时，容器中所有元素都将会被当做一个单独的块放入到页面中；
将display设置为inline，将使其元素和inline元素一样，即使它是普通的块元素，它也将会被组合成<span>那样的输出流输出到页面上；
将display设置为none,则该元素实际上就从页面中被移走，它下面的所有元素都会被自动跟上填充。
display属性可以用来设置或检索对象是否显示以及如何显示。
（5）<span>标签与<div>标签
相同之处：两者非常类似，是HTML中组合用的标签，可以作为插入CSS这类风格的容器；
不同之处：div(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而span是行内元素，span的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用span。
功能上来说，<div>标签一般用来做布局，而<span>标签用来做文字的效果，尤其是标题和链接的效果，如<h1 class="..."><span>...</span></h1>
不过，块元素和行内元素也不是一成不变的，只要给块元素定义display:inline，块元素便成为内嵌元素；同样，给内嵌元素定义display:block后，内嵌元素便成为块元素。
扫一扫
2930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
