HTML基础
文章目录
1.什么是HTML
HTML是英文Hyper Markup Language的缩写，中文译为“超文本标记语言”
主要作用：通过HTML标签对网页中的文本、图片、声音等内容进行性描述。HTML网页就是一个扩展名为“.html”或“.htm”的文件，它可以用记事本打开，因此简单的HTML代码可以在记事本中编写。编写完成后，将文件扩展名修改为“.html”或“.htm”即可以生成一个HTML网页。
学习任何一门语言，首先要掌握它的基本格式，下面就通过基本的HTML文档讲解HTML内部的构成。
eg:文件1-1 htmlDemo01.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>htmlDemo01</title>
</head>
<body>
</body>
</html>
在文件1-1中，带有"<>"符号的元素被称为HTML标签，如、、都是HTML标签。标签名存放在"<>"中，表示某个功能的编码命令，也称为HTML标签或HTML元素。
下面对<!DOCTYPE>声明 、<html标签＞、<head标签＞、<body＞标签进行介绍：
<!DOCTYPE>声明
声明必须位于HTML文档的第一行，且在<html＞标签
是根标签，跟在<!DOCTYPE>声明之后。主要用于告知浏览器该文档是一个HTML文档。<html＞标签是HTML文档的开始，</html＞标签是HTML文档的结束，它们之间是文档的头部和主体内容。
<head＞标签
是头部标签，跟在<html＞之后，用于定义HTML文档的头部信息。主要用于封装其他位于文档头部的标签，如<title＞、<meta＞、<link＞、<style＞等。
<body＞标签
是主体标签，用于定义HTML文档所要显示的内容。浏览器中显示的所有文本、图像、音频、视频等信息都必须位于<body＞标签内，才能最终展现给用户。
需要注意的是，一个HTML文档只能含有一对<body＞</body＞标签，且<body＞标签必须在<html＞标签内，位于<head＞标签之后，与<head＞标签是并列关系。
在了解了HTML标签后，讲一些下HTML的创建与运行：
首先，在桌面创建一个文件夹，然后在文件夹内创建文本文档（以.txt为拓展名），将自己写的HTML的内容写进文本文档中，并保存，最后将文档拓展名改为以.html，更改之后即是一个HTML文件。（因为我是刚接触HTML，所有用的这种方式，也可以使用EditPlus、UltraEdit或IDEA等工具）
这样双击就能打开浏览器查看网页的文件就是html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>htmlDemo01</title>
</head>
<body>
这是我的第一个HTML
</body>
</html>
看一下页面效果：
网页中打印的”这是我的第一HTML“就是<body＞标签中的内容。
2.HTML标签概述
HTML标签分为3类：
| 介绍 | 语法格式 | 例如 | |
|---|---|---|---|
| 单标签 | 用一个标签就可以完整地描述某个功能 | <标签名/＞ | < hr/＞ |
| 双标签 | 由开始标签和结束标签组成 | <标签名＞内容</标签名＞ | <html＞和</html＞ |
| 注释标签 | 添加一些便以阅读和理解但又不需要在页面中显示的文字 | <!–注释语句–＞ |
注意：注释内容不会显示在浏览器窗口中，但是作为HTML文档内容的一部分，注释标签可以被下载到用户的计算机上，或者用户查看源代码事也可以看见注释标签。
多学一招：为什么要有单标签？
HTML 标签的作用原理是选择网页内容进行描述，也就是说需要描述谁就选择谁，所以才会有双标签出现。双标签有开始标签和结束标签，而单标签本身就可以描述一个功能，不需要选择谁。例如水平线标 <hr /＞，按照双标签的语法，应该写成<hr＞</hr＞，但是水平线标签不需要选择谁，它本身就代表一条水线，此时写成双标签就显得有些多余，但是又不能没有结束符号，所以单标签的语法格式就是在标签名称面加一个关闭符，即<标签名 /＞。
3.常用的HTML标签
1.段落、行内、换行标签
<body>
<p>
每周二，
<span>从早上八点到晚上九点都是满课<br />完全黑色星期二</span>
</p>
</body>
其中，<p＞就是段落标签，<span＞是行内标签，<br＞是换行标签。
2.文本样式标签
<font＞标签控制网页中文本的样式，格式：<font 属性=“属性值”>文本内容</font＞
<body>
我是默认样式的文本<br />
<font face="微软雅黑" size="7" color="green"><br />
我是7号绿色文本，我的字体是微软雅黑</font>
</body>
<font＞标签控制网页中文本的样式，上面就是用font标签的face、size、color属性设置了文字的字体、大小和颜色。
3.表格标签
有三类：
| < table></table＞ | 用于定义一个表格 |
|---|---|
| <tr ＞</tr ＞ | 定义表格中的行 |
| <td＞</td ＞ | 定义表格中的列 |
<body>
<table border="1xp">
<tr>
<td>姓名</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
</tr>
<tr>
<td>Grade</td>
<td>95</td>
<td>80</td>
<td>90</td>
</tr>
</table>
</body>
这里将border的属性值设置为1，单位是像素，表示该表格边框的宽度为1像素。如果border的值发生改变，只有围绕表格的边框尺寸发生改变，表格内部的边框还是1像素宽。如果将border的属性值设置为0或者删除border属性，将显示没有边框的表格。
4.表单标签
表单就是在网页上用于输入信息的区域，它的主要功能是收集数据信息，并将这些信息传递给后台信息处理模块。例如，注册页面中的用户名和密码输入 、性别选择、提交按钮等都是用表单中的相关标签定义的。
表单主要由3个部分构成，分别为表单控件、提示信息和表单域。这3个部分的详细介绍如下。
●表单控件：包含具体的表单功能项，例如单行文本输入框、密码输入框、复选框、提交按钮等。
●提示信息：一个表单中通常还需要包含一些说明性的文字即表单控件前的说明文字，用于提示用户进行填写和操作。
●表单域：它相当于一个容器，用于容纳所有的表单控件和提示信息。
表单中常用标签的使用方法具体如下。
（1）表单域< form＞
在 HTML 中，< form ＞标签用于定义表单域，即创建一个表单。
< form ＞标签基本语法如下： <form action =" URL 地址＂ method =＂提交方式＂ name ="表单名称＂>
各种表单控件
< form ＞
在上述语法中， action 、 method 、 name 为＜ fom ＞标签的常用属性。 action 属性用于指定表单提交的地址，如 action =" login . jsp "，表示表单数据会提交到名为 Jogin . jsp 的页去处理。method 属性用于设置表单数据，提交方式它有 CET 和 POST 两个值。其中GET 为默认值，这种方式提交的数据将显示在浏览器地栏中，保密性差印有数据量限制）而使用 POST 提交方式不但保密性好）而且可以提交大量的数据。因此发中通常使用 POST 方式提交表单。
（2）表单控件
浏览网页时经常会看到单行文本输入框、单选按钮、复选框、重置按钮等，使用控件可以在表单中定义这些元素。
格式：< input type=“控件类型” /＞
<input＞定义单行文本，<textare＞可以创建多行文本
格式：
<textare cols=“每行中的字符数” rows="显示行数"＞
文本内容
</textare＞