HTML

1、网页的组成部分

结构（网页上有哪些东西）
HTML用于描述页面的结构
表现（这些东西长什么样）
CSS用于控制页面中元素的样式
行为（网页界面和用户交互）
JavaScript用于响应用户操作

2、HTML简介

HyperText Markup Language （超文本标记语言）
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言，我们也叫标签语言

HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

3、基本语法

⑴ 长标签：双标签。由开始标签和结束标签组成

示例：<h1></h1>

⑵ 单标签：自结束标签。因为内部不需要内容，但推荐加上斜杠（/）

示例：<br />

⑶ 标签的属性：例如font标签的color

示例：<font color="red">这是文字</font>

⑷ 实体标签：因为HTML不会解析空格，涉及到特殊的符号字符，通过字符实现
常用实体标签：

       空格     &nbsp;        <       &lt;        >       &gt;        ¥       &yen;        ©       &copy;        ®       &reg;

⑷ 注释：在页面中不会显示，而在源码中会显示

示例：<!-- 我是注释 -->

4、语法规范

⑴ HTML标签需要正确关闭，否则会对页面中的其他内容造成影响

示例：<font color="red">文字1<font><font>文字2</font>

由于第一个font标签没有正确关闭（没有结束标签），所以文字2的颜色也成了红色

⑵ 标签可以嵌套，但不能交叉嵌套

示例：<h1><font>文字</h1></font>

这是错误的！

⑶ 注释不能嵌套

示例：<!--  <!-- 注释 --> -->显示结果：--> 

这是错误的！

⑷ 属性必须有属性值，属性值必须要用引号引起来。单引号、双引号都可以

示例：<font color='red'>文字</font><font color="red">文字</font>

显示的结果都是红色的文字

⑸ HTML标签不区分大小写，但是推荐使用小写

5、常见标签

h1【标题标签】

<h1>1级标题</h1>

h1～h6都是标题标签
其包裹的字体大小从大到小，自动加粗，每个标题占一行

p【段落标签】

<p>这是一段</p>

每个段落之间自动换行，每段之间隔开一行

br【换行标签】

<br />

换行。可以多写几个，换多个行

hr【水平线标签】

<hr />

在屏幕上显示一条水平线

ul【无序列表】

<ul>  <li>列表项1</li>  <li>列表项2</li></ul>

通过ul来创建无序列表【需要在其里面添加列表项】
通过li来创建列表项
ul：Unordered Lists 无序列表
li：List Item 列表项

ol【有序列表】

<ol>  <li>列表项1</li>  <li>列表项2</li></ol>

通过ol来创建有序列表
通过li来创建列表项
ol：Ordered Lists 有序列表
li：List Item 列表项

img【图片标签】

<img alt="" src="" title="" />

alt：图片显示错误时的提示信息
src：source图片资源的路径
title：鼠标悬停时，图片的显示信息

关于路径：
⑴ 当图片和当前HTML页面在同一目录下，则页面可以直接使用该图片
⑵ 当图片在当前HTML页面的下一级目录下，则使用方式为：文件夹名/图片名.扩展名
⑶ 当图片在当前HTML页面的上一级目录下，则使用方式为：../文件夹名/图片名.扩展名
【通过../回到当前资源的上级目录】

iframe【内联框架标签】

<iframe src="" width="" height="" name=""></iframe>

在内联框架中可以打开一个HTML页面
src：要引用的HTML页面的路径
width：内联框架的显示宽度
height：内联框架的显示高度
name：内联框架的名字

注意：
⑴ 标签的属性写在开始标签的标签体内
⑵ 【在eclipse中开发网页时】引用资源是相对或本地的绝对路径时，判断资源路径是否正确，可以通过按住ctrl外加鼠标左键，来判断。如果能打开则一般没错
⑶ 设置宽高的单位：像素（px）；还可以使用百分比（%），其为占当前浏览器打开窗口的比例

a【超链接标签】

<a href="" target="">链接名</a>

href：HyperText Reference【引用的资源】
指定跳转的页面地址。其路径的规则和img标签引用图片一样
target：在哪里打开页面：默认在当前页面中打开
可选属性：
_self：在当前页面中打开
_blank：在新的标签页中打开
内联框架名字：在指定的内联框架（iframe）中打开

table【表格标签】

<table>  <tr>    <th></th>  </tr>  <tr>    <td></td>  </tr></table>

通过table来创建一个表格
通过tr来创建一行
通过td来创建一个单元格
通过th来创建一个表头
tr：Table Row 行
th：Table Head 表头
td：Table Data 单元格

合并单元格

通过rowspan来合并行，自上而下合并
通过colspan来合并列，从左向右合并
rowspan是行跨度，从当前行开始计算。所以最终结果应为要跨的行数加上1
同理：
colspan是列跨度，从当前列开始计算。所以最终结果应为要跨的列数加上1

table标签的相关属性

⑴ border 边框。即设置表格线
⑵ align 对齐方式。【不推荐使用】可选参数：center居中
⑶ width 表格的宽度。可以用像素（px）；也可以使用百分比（%），其为占当前浏览器打开窗口的比例
⑷ cellpadding 规定单元格边沿与其内容之间的空白。可以用像素（px）；也可以使用百分比（%），其为占当前浏览器打开窗口的比例
⑸ cellspacing 规定单元格之间的空白。也就是单元格间距。可以用像素（px）；也可以使用百分比（%），其为占当前浏览器打开窗口的比例

form【表单标签】

<form action=""></form>

服务器用来收集用户信息时使用，需要根据服务器的需求来设计其具体的表单项
通过form来创建一个表单
action属性：表单数据要提交给哪个资源文件处理

通过input标签来创建表单项

input【表单项】

通过type属性，来创建不同的表单项

注意：
⑴ 如果希望表单项能够将数据提交给服务器，则其必须要添加name属性
⑵ value用来设置每一个表单项的值
⑶ 添加name属性后，提交表单给服务器，使用name属性值为key；input中输入的值或input的value属性为value。键值对开头用?和资源文件地址相连。键和值用key=value连接。多个键值之间用&隔开
资源文件地址?key=value&key=value

总结：
⑴ 长标签的值写在开始标签和结束标签的中间
文本
⑵ 段标签的值写在value中

⑶ 如果想将表单中的数据提交给服务器，则必须给标签设置name值

text【文本框】

<input type="text" name="" />

可以输入文本。其上传时value值就是用户输入的内容

password【密码框】

<input type="password" name="" />

用户输入进去的内容不是明码。其上传时value值就是用户输入的内容

file【文件框】

<input type="file" name="" />

用来上传文件

radio【单选按钮】

<input type="radio" name="" value="" />

单选框。如果有多个radio表单项，而又希望只能同时选择一个选项，则这些radio表单项的name属性要一样，可以设置不能的value值

checkbox【多选框】

<input type="checkbox" name="" value="" />

复选框。相同name属性的，多个复选框，可以同时选中多个
注意：提交同一组多选框时，这些多选框的name属性要相同

button【按钮】

<input type="button" value="" />

添加一个按钮。value属性用来设置提交按钮上显示的文字【value属性有默认值】

hidden【隐藏域】

<input type="hidden" value="" />

创建一个隐藏域。其本质和text文本框一样，只是在页面中看不到，在源码中可以看到。其上传时value值就value属性值

submit【提交】

<input type="submit" value="" />

提交按钮。 用于将所有的表单项提交给action中的资源文件。value属性用来设置提交按钮上显示的文字【value属性有默认值】

reset【重置】

<input type="reset" value="" />

重置按钮。用于将所有的表单项中的值，重置为默认状态。value属性用来设置提交按钮上显示的文字【value属性有默认值】

select【下拉框】

<select name="">  <option value="">下拉框选项1</option>  <option value="">下拉框选项2</option></select>

通过select来创建一个下拉框
通过option来创建一个下拉框选项

属性multiple：可以创建一个多选下拉框【默认该属性是空的，即创建的是一个单选下拉框】

<select multiple="multiple">  <option>多选项1</option>  <option>多选项2</option>  <option>多选项3</option>  <option>多选项4</option></select>

注意：提交服务器时，需要给select的name属性赋值，给option的value属性赋值
select判断内容的变化，就是根据option的value属性值来判断的

textarea【文本域】

<textarea name="" cols="" rows=""></textarea>

文本域。可以在里面输入多行文本
cols：文本域的可见宽度
rows：文本域的可见行数

6、使用示例

常见标签的使用

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>常见标签的使用</title>  </head>  <body>    <!-- 标题标签 -->    <h1>1级标题</h1>    <h2>2级标题</h2>    <h3>3级标题</h3>    <h4>4级标题</h4>    <h5>5级标题</h5>    <h6>6级标题</h6>    <!-- 段落标签 -->    <p>这是段落1</p>    <p>这是段落2</p>    <!-- 换行标签 -->    <br />    <!-- 水平线标签 -->    <hr />    <!-- 无序列表 -->    <ul>      <li>列表项1</li>      <li>列表项2</li>      <li>列表项3</li>    </ul>    <!-- 有序列表 -->    <ol>      <li>列表项1</li>      <li>列表项2</li>      <li>列表项3</li>    </ol>    <!-- 图片标签 -->    <img alt="图片" src="test.jpg" title="这是一张图片" />    <br /><br />    <!-- 内联框架 -->    <iframe src="test.html" width="300px" height="200px" name="myframe" ></iframe>    <br /><br />    <!-- 超链接标签 -->    <a href="https://www.baidu.com/">百度</a><br /><br />    <a href="https://www.baidu.com/" target="_self">在当前页面中打开</a><br /><br />    <a href="https://www.baidu.com/" target="_blank">在新的标签页中打开</a><br /><br />    <a href="https://www.baidu.com/" target="myframe">在内联框架中打开</a><br /><br />    <!-- 表格标签 -->    <!-- 边框1像素，居中显示，宽度占当前浏览器窗口大小的一半，单元格内容和单元格边沿的空白有10像素，单元格与单元格之间0像素 -->    <table border="1px" align="center" width="50%" cellpadding="10px" cellspacing="0">      <!-- 创建一行 -->      <tr bgcolor="lightgray">        <!-- 创建一个表头 -->        <th>表头项1</th>        <th>表头项2</th>        <th>表头项3</th>        <th>表头项4</th>      </tr>      <tr>        <!-- 创建一个单元格 -->        <td>1行1列</td>        <td>1行2列</td>        <td>1行3列</td>        <td>1行4列</td>      </tr>      <tr>        <td>2行1列</td>        <td>2行2列</td>        <td>2行3列</td>        <!-- 行的跨度为2 -->        <td rowspan="2">2行4列</td>      </tr>      <tr>        <!-- 列的跨度为2 -->        <td colspan="2">3行1列</td>        <td>3行2列</td>      </tr>    </table>  </body></html>

表单和表格结合，做出注册的界面

<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <title>注册页面</title>  </head>  <body>    <form action="success.html">      <table>       <tbody>        <tr>          <td>姓名：</td>              <!-- 文本框 -->          <td><input type="text" name="username" /></td>        </tr>        <tr>          <td>密码：</td>              <!-- 密码框 -->          <td><input type="password" name="pwd" /></td>        </tr>        <tr>          <td>图片：</td>              <!-- 文件框 -->          <td><input type="file" name="pic" /></td>        </tr>        <tr>          <td>性别：</td>              <!-- 单选框 -->          <td>            男<input type="radio" name="gender" value="male" />            女<input type="radio" name="gender" value="female" />          </td>        </tr>        <tr>          <td>爱好：</td>              <!-- 多选框 -->          <td>            足球<input type="checkbox" name="hobby" value="football" />            篮球<input type="checkbox" name="hobby" value=""basketball />            网球<input type="checkbox" name="hobby" value="netball" />          </td>        </tr>        <tr>          <td>语言：</td>          <td>            <!-- 下拉框 -->            <select name="language">              <option value="java">Java</option>              <option value="cs">C#</option>              <option value="js">JavaScript</option>            </select>          </td>        </tr>        <tr>          <td>自我介绍：</td>              <!-- 文本域 -->          <td><textarea name="info" cols="20" rows="10"></textarea></td>        </tr>        <tr>              <!-- 提交按钮 -->          <td><input type="submit" value="注册" /></td>              <!-- 重置按钮 -->          <td><input type="reset" value="重置" /></td>        </tr>       </tbody>      </table>    </form>  </body></html>