HTML学习总结

起因

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

问题

1. 如何在网页中显示标签，如：< html>
2. 标签中尖括号和标签内容间不能有空格
3. 哪些标签不需成对使用。
4. 都有那些标签。

正文

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>