HTML学习一

来源：互联网发布：三知四会一联通图片编辑：程序博客网时间：2024/05/29 02:30

前面修改页面的时候，各种犯挫，所以简单看了一些HTML的知识：

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

HTML 段落是通过 <p> 标签进行定义的。

HTML 链接是通过 <a> 标签进行定义的。（比如：<a href = "www.cugb.edu.cn">CUGB</a>

HTML 图像是通过 <img> 标签进行定义的。

对齐使用align = "left/right/center"

定义页面背景<body bgcolor="red"></body>

HTML中属性和属性值对大小写不敏感。

文本格式化：

<b>定义粗体文本。<big>定义大号字。<em>定义着重文字。<i>定义斜体字。<small>定义小号字。<strong>定义加重语气。<sub>定义下标字。<sup>定义上标字。<ins>定义插入字。<del>定义删除字。

样式的使用：

三种方法引入样式：

外部样式表：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。例如

内部样式表：当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head><style type="text/css">body {background-color: red} p {margin-left: 20px} </style> </head>

内联样式：当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下

实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">This is a paragraph</p>

HTML中重要的Table的使用：

表格的定义是使用table关键字：<table border = "1"><tr><td></td><tr></table> 这个就定义了一个一行一列的表格。表格定义当中，<tr></tr>是定义行，

<td></td>是定义列。需要注意的是<tr></tr>中间必须有<td></td>的存在，就算只有一列，也需要写出<td></td>。当然，表格也可以嵌套，在列当中也可以嵌套行

和列。

表格的合并：有时候我们会需要把某个表格的某几行或者某几列合并成一行或者一列。这时候就需要使用到colspan和rowspan分别对应和并列和行，在写表格的定义时，

就可以在行或者列的定义上使用。比如<td colspan="2"> </td> / <td rowspan="3"> </td>

HTML列表：

无序列表：

<ul><li>Coffee</li><li>Milk</li></ul>

效果：

Coffee
Milk

有序列表：

<ol><li>Coffee</li><li>Milk</li></ol>

效果：

Coffee
Milk

当然，列表也可以嵌套，对于有序列表，可以定义开始的start，如果定义的是40，那么前面显示的就是40和41了。

HTML布局：

布局可以使用div和table实现很好的效果，比如下面的例子：

<!DOCTYPE html><html><body><table width="500" border="0"><tr><td colspan="2" style="background-color:#99bbbb;"><h1>Main Title of Web Page</h1></td></tr><tr valign="top"><td style="background-color:#ffff99;width:100px;text-align:top;"><b>Menu</b><br />HTML<br />CSS<br />JavaScript</td><td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">Content goes here</td></tr><tr><td colspan="2" style="background-color:#99bbbb;text-align:center;">Copyright W3School.com.cn</td></tr></table></body></html>

效果图：

使用表格进行布局

0 0