Web笔记（一）--- HTML常用标签

HTML常用标签

标题标签h1~h6

<hn>标题文本</hn>

注意： h1 标签因为重要，尽量少用。 一般h1 都是给logo使用，或者页面中最重要标题信息。

段落标签

<p>  文本内容  </p>

水平线标签

<hr />是单标签

换行标签

<br />

文本格式化标签

<font size="3" color="#FF00FF" face="宋体">我要忘了你的样子</font>
<font size="5" color="#009933" face="Webdings">像鱼忘了海的味道</font>
<p><b>放下所有梦和烦恼[加粗]</b></p>
<p><i>却放不下回忆的乞讨[倾斜]</i></p>
<p><u>多么可笑的心事[下划线]</u></p>
<p><em>只剩我还在坚持[倾斜]</em></p>
<p><strong>谁能看透我的眼睛[加粗]</strong></p>
<p><small>让我能够不再失明[小]</small></p>
<p><big>让我能够不再失明[大]</big></p>
<P>3<suP>2</suP>+2<suP>3</suP>=17</P>
<P>A<sub>1</sub>,A<sub>2</sub></P>

实现效果：
我要忘了你的样子
像鱼忘了海的味道

放下所有梦和烦恼[加粗]

却放不下回忆的乞讨[倾斜]

多么可笑的心事[下划线]

只剩我还在坚持[倾斜]

谁能看透我的眼睛[加粗]

让我能够不再失明[小]

让我能够不再失明[大]

3²+2³=17

A₁,A₂

图像标签img

<img src="图像URL" alt="替换文本" title="悬停文本" width="100px" border="10px"/>

链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定链接目标的url地址，当为标签应用href属性时，它就具有了超链接的功能。
target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，_blank为在新窗口中打开方式。

1.外部链接 <a href="http:\\www.baidu.com">百度</a>
2.内部链接 <a href="基础文字标记.html">文字</a>
3.空连接 <a href="#">本页面</a>
4.图像、表格、音频、视频等都可以添加超链接。

锚点定位：创建锚点链接分为两步：

1.使用<a href="#id名">链接文本</a>创建链接文本（被点击的）
  <a href="#two">到第2集</a>
2.使用相应的id名标注跳转目标的位置。
  <h3 id="two">第2集</h3> 

特殊字符

注释标签

  <!-- 注释语句 -->   ctrl + /       或者 ctrl +shift + / 

相对路径和绝对路径

相对路径

以引用文件之网页所在位置为参考基础，而建立出的目录路径。

1. 同一文件夹：只需输入图像文件的名称即可，如<img src=“logo.gif” />。
2. 目标文件位于当前文件的下级文件夹：<img src=“img/img01/logo.gif” />。
3. 目标文件位于当前文件的上级文件夹：在文件名之前加入“…/” ,如<img src="…/logo.gif" />。

绝对路径

绝对路径以Web站点根目录为参考基础的目录路径。

完整的文件路径，例如：“D:\web\img\logo.gif”。

完整的网络地址，例如“http://www.itcast.cn/images/logo.gif”。

列表标签

无序列表 ul

<h1>你喜欢的水果</h1>
<ul>
  <li>苹果</li>
  <li>橘子</li>
  <li>香蕉</li>
</ul>

你喜欢的水果

• 苹果
• 橘子
• 香蕉

有序列表 ol

<h1>你喜欢的蔬菜</h1>
<ol>
  <li>西红柿</li>
  <li>白菜</li>
  <li>胡萝卜</li>
</ol>

你喜欢的蔬菜

1. 西红柿
2. 白菜
3. 胡萝卜

自定义列表

<dl>
  <dt>四大名著</dt>
  <dd>《红楼梦》</dd>
  <dd>《水浒传》</dd>
  <dd>《西游记》</dd>
  <dd>《三国演义》</dd>
  <dt>四大爱情故事</dt>
  <dd>《梁祝》</dd>
  <dd>《牛郎织女》</dd>
  <dd>《白蛇传》</dd>
  <dd>《孟姜女》</dd>
</dl>

四大名著

《红楼梦》

《水浒传》

《西游记》

《三国演义》

四大爱情故事

《梁祝》

《牛郎织女》

《白蛇传》

《孟姜女》

表格 table

表格的学习要求： 能手写表格结构，并且能合并单元格。

<table>
  <tr>/* 行 */
    <td>单元格内的文字</td>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

1.table用于定义一个表格。
2.tr 用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格。
3.td /td：用于定义表格中的单元格，必须嵌套在标签中，一对 中包含几对，就表示该行中有多少列（或多少个单元格）。

三参为0：border cellpadding cellspacing 为 0

表头标签

表头一般位于表格的第一行或第一列，其文本加粗居中。

用表头标签<th></th>替代相应的单元格标签<td></td>即可。

表格结构

<table>
  <thead>用于定义表格的头部，适合放tr</thead>
  <tbody>用于定义表格的主体，适合放td</tbody>
  ...
</table>

表格标题caption

<table>
   <caption>我是表格标题</caption>
</table>

caption 标签必须紧随 table 标签之后。
每个表格只能定义一个标题。通常这个标题会被居中于表格之上。

合并单元格

1.确认合并：跨行合并：rowspan 跨列合并：colspan
2.看顺序：合并的顺序 先上往下 先左再右
3.删除单元格：删除的个数 = 合并的个数 - 1

表单标签（重要）

完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

input 控件 ※

radio 每一组命名相同的名字 name

label标签

作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点

for 属性规定 label 与哪个表单元素绑定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

textarea控件(文本域)

如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

下拉菜单select控件

<select>
  <option selected="selected">选项1</option> / *默认选中项 * /
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

表单域form

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

1. Action: 在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2. method: 用于设置表单数据的提交方式，其取值为get或post。
3. name: 用于指定表单的名称，以区分同一个页面中的多个表单。

查文档

W3C : http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/