HTML学习总结

起因

今天花了一整天的时间对HTML进行了大致的学习，为了加深记忆现在对今天的学习进行一个简单的总结。

问题

如何在网页中显示标签，如：< html>

标签中尖括号和标签内容间不能有空格

哪些标签不需成对使用。

都有那些标签。

正文

html是由一系列标签组成的一种标记语言，用于在浏览器中显示你想要展示的内容。

标签的用法

html的标签是由尖括号包围的关键字(不区分大小写)，如：< html>（标签中尖括号和标签内容间不能有空格）。 它的标签需要成对出现，如：< html>< /html> 前一个是开始标签，代表从这个标签开始之后就是标签定义的内容了，后一个是结束标签，代表这个标签的内容到此结束。两个标签之间是对应标签含义的实体内容。比如< p>我是一个段落< /p>之间就是显示在网页中的一段正文的内容。有个别标签是只有一个开始标签的。下面会指出这些标签。

开始标签中可以放这个标签的属性，如：< img src=”w3cschool.png” width=”104” height=”142”>指明这个图片的来源，宽度和高度。

HTML中主要的标签

基本结构标签

< html>
< head>
< title>标签页名< /title>
< /head>
< body>
文本主体
< /body>
< /html>

基本文本标签

< h1>一级标题< /h1>
< h2>二级标题< /h2>
...
< h6>最低6级标题< /h6>
< p>正文段落< /p>
< br>换行
< hr>水平线
< !- -这部分添加注释- ->

文本格式化标签

< b>对该文本加粗< /b>
< strong>对文本加粗< /strong>
< i>将文本置为斜体< /i>
< em>将文本置为斜体< /em>这两种方式效果是一样的
< big>文本字号变大< /big>
< small>文本字号变小< /small>
< pre>在这个标签里写的文本会保持格式显示在网页中（一般写的文本浏览器会自动去除多余的空格：三个空格会变为一个）< /pre>
< sub>这里的文本会变为下标< /sub>
< sup>这里的文本会变为上标< /sup>

图片标签

< img src="/pic.png" alt="当图片加载不出来时替代显示的文字" height="42" width="42">

链接标签

< a herf="www.baidu.com/">点这里链接到百度搜索< /a>这是一个文本链接
< a herf="www.baidu.com/">< img src="/pic.png" alt="未显示图片">< /a>这是一个用图片做链接方式的用法
< a href="mailto:1123213@163.com">发送e-mail< /a>发送邮件的链接
下面是一种跳转到某一位置的用法，可用于书签之类：
< a id="tips">提示部分< /a>
< a href="#tips">跳到提示部分< /a>
链接标签还有一个常用属性target，用于指示在哪里打开这个链接
< a href="www.baidu.com/" target="_blank">访问菜鸟教程!< /a>在一个新的窗口中打开这个链接

样式标签

< style type="text/css">
h1 {color:red;}
p {color:blue;}
< /style>

在head里定义style，内部定义样式

- 列表标签

有序列表
< ol>
< li>第一项< /li>
< li>第二项< /li>
< /ol>
无序列表
< ul>
< li>一项< /li>
< li>一项< /li>
< /ul>
自定义列表
< dl>
< dt>项目< /dt>
< dd>项目描述< /dd>
< /dl>

表格标签

<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>

表格标题	表格标题
表格数据	表格数据

框架标签

<iframe src="http://www.baidu.com/" width="800" height="200" frameborder="50">在这个框架中打开这个链接，效果如下：

<iframe src="http://www.baidu.com/" width="800" height="200"></iframe>

表单标签

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>选项框
<option>苹果</option>
<option selected="selected">香蕉</option>预设定选择项
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>文本块
</form>