HTML是一种在因特网上常见的网页制作标注性语言，但因缺少程序设计语言所应有的特征，不能算作一种程序设计语言。它通过浏览器的翻译将网页中的内容呈现给用户。对于网站设计人员，HTLM和CSS是一起用的，它俩的关系是“内容”和“形式”，由HTML确定网页的内容，CSS实现页面的表现形式。两者完美搭配使页面更加美观、大方、容易维护。
超文本语言、HTML标记不区分大小写的。
1、HTML文档结构
HTML页面的基本结构：<html>、<head>、<title>、<body>标记。
-
<html>标记
<html>...</html>
该标记是HTML文件的开头。所有HTML文件都以<html>标记开头，</html>标记结束。
HTML页面的所有标记都要放置在<html>...</html>标记之间，没有实质性功能，但必不可少
-
<head>标记
<head>...</head>
该标记是HTML文件的头标记。作用是放置HTML文件的信息，如定义CSS样式代码可放置在<head>...</head>标记之间。
-
<title>标记
<title>...</title>
该标记是标题标记。可将网页的标题定义在<title>...</title>之间，例如定义网页的标题为“HTML页面”，<title>标记被定义在<head>标记中。
-
<body>标记
<body>...</body>
<body>是HTML页面的主体标记。页面中的所有内容都定义在<body>标记中。该标记本身也具有控制页面的一些特性，如控制页面的背景图片和颜色等。
2、HTML文本标记
-
换行标记
<br>
单独标记。使网页中的文字实现换行。哪里需要哪里搬。
<html> <head> <meta charset="UTF-8"> <title>HTML页面</title> </head> <body> 社会主义核心价值观<br> 富强 民主 文明 和谐<br> 自由 平等 公正 法治<br> 爱国 敬业 诚信 友善<br> </body> </html>
-
段落标记
<p>...</p>
在段前和段后各添加一个空行，定义在段落标记中的内容不受该标记影响。
-
标题标记
<h1>...</h1> <h2>...</h2> <h3>...</h3> <h4>...</h4> <h5>...</h5> <h6>...</h6>
创建不同级别的标题。数字越大，表示级别越低，文字的字体也就越小。
<html> <head> <meta charset="UTF-8"> <title>HTML页面</title> </head> <body> <h1>社会主义核心价值观</h1><br> <h2>富强 民主 文明 和谐</h2><br> <h3>自由 平等 公正 法治</h3><br> <h4>爱国 敬业 诚信 友善</h4><br> <h5>时刻保持解决大党独有难题的清醒和坚定，把党的伟大自我革命进行到底</h5> <h6><p>治国必先治党，党兴才能国强。</p></h6> <h6>党的二十大发出了为了全面建设社会主义现代化国家、 全面推进中华民族伟大复兴而团结奋斗的伟大号召， 党领导的社会革命迈上新征程， 党的自我革命必须展现新气象， 全面从严治党更要有新的认识、新的作为。</h6> </body> </html>
-
居中标记
<center>...</center>
默认的布局方式是从左到右依次排序。 <center>可使页面中的内容在页面的居中位置显示。
<html> <head> <meta charset="UTF-8"> <title>HTML页面</title> </head> <body> <center> <h1>社会主义核心价值观</h1> <h2>富强 民主 文明 和谐<br> 自由 平等 公正 法治<br> 爱国 敬业 诚信 友善</h2><br> </center> </body> </html>
-
文字列表标记
分为无序列表和有序列表
（1）无序列表
<ul> <li>列表项1 <li>列表项2 <li>列表项3 ... </ul>
每个列表项的前面添加一个圆点标记。
<html> <head> <meta charset="UTF-8"> <title>HTML页面</title> </head> <body> <h1>社会主义核心价值观</h1> <h2> <ul> <li>国家：富强 民主 文明 和谐 <li>社会：自由 平等 公正 法治 <li>公民：爱国 敬业 诚信 友善 </ul> </h2> </body> </html>
（2）有序列表
<ol> <li>列表项1 <li>列表项2 <li>列表项3 ... </ol>
将列表项进行排顺序：1. .... 2. ... 3. ...
<html> <head> <meta charset="UTF-8"> <title>HTML页面</title> </head> <body> <h1>社会主义核心价值观</h1> <ol> <li><h2>国家：富强 民主 文明 和谐</h2> <li><h2>社会：自由 平等 公正 法治</h2> <li><h2>公民：爱国 敬业 诚信 友善</h2> </ol> </body> </html>
代码有些问题，会出现黄色警告，但不影响页面显示，好像是标记嵌套错误。
3、HTML表格标记
表格用来存储数据。表格包含标题、表头、行、单元格。在HTML页面中定义表格，需使用以下5个标记：
-
表格标记<table>
<table>...</table>
表示整个表格。该标记中有多个属性：
| 属性 | 描述 |
| width | 设置表格宽度 |
| border | 设置表格边框 |
| align | 设置表格对齐方式 |
| bgcolor | 设置表格背景色 |
-
标题标记 <caption>
<caption>...</caption>
可设置属性。（还得找找属性有哪些）
-
表头标记<th>
<th>...</th>
可设置属性。
-
表格行标记<tr>
<tr>...</tr>
一组<tr>标记表示表格中的一行，要嵌套在 <table>标记中使用，可设置属性。
-
单元格标记<td>
<td>...</td>
又称为列标记。一个<tr>标记中可以嵌套多个<td>标记。可设置属性。
<html> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> <table width="318" height="167" border="1" align="center"> <caption>社会主义核心价值观</caption> <tr> <th align="center" valign="middle" >国家</th> <th align="center" valign="middle" >社会</th> <th align="center" valign="middle" >公民</th> </tr> <tr> <td align="center" valign="middle">富强</td> <td align="center" valign="middle">自由</td> <td align="center" valign="middle">爱国</td> </tr> <tr> <td align="center" valign="middle">民主</td> <td align="center" valign="middle">平等</td> <td align="center" valign="middle">敬业</td> </tr> <tr> <td align="center" valign="middle">文明</td> <td align="center" valign="middle">公正</td> <td align="center" valign="middle">诚信</td> </tr> <tr> <td align="center" valign="middle">和谐</td> <td align="center" valign="middle">法治</td> <td align="center" valign="middle">友善</td> </tr> </table> </body> </html>
在实际开发中，常用于设计页面。在页面中创建一个表格，并设置没有边框，之后通过该表格将页面划分为几个区域，分别对几个区域进行设计。
4、HTML表单标记
网站登录页面。表单是用户与网页交互信息的重要手段。
-
表单标记<form>
<form>...</form> <!-- 基本语法：--> <form action="url" method="get"|"post" name="name" onSubmit="" target="">...</form>
该标记中，可定义处理表单数据程序的URL地址等信息。
各属性说明：
| 属性 | 描述 |
| action | 指定处理表单数据程序的URL地址 |
| method | 用来指定数据传送到服务器的方式，该属性有get与post两种属性值。get表示将输入的数据追加在action指定的地址后面，并传送到服务器。post会将输入的数据按照HTTP中的post传输方式传送到服务器。 |
| name | 指定表单的名称，可自定义 |
| onSubmit | 用于指定当用户点击提交按钮时触发的事件 |
| target | 指定输入数据结果显示在哪个窗口 |
target：指定输入数据结果显示在哪个窗口，属性值：
_blank：在新窗口打开目标文件；
_self：表示在同一个窗口中打开，这项一般不用设置；
_parent：在上一级窗口中打开，一般使用框架页时经常使用；
_top：在浏览器的整个窗口中打开，忽略任何框架。
有个例子：为创建表单，设置表单名称为form，当用户提交表单时，提交至action.html页面进行处理。
<form id="form1" name="form" method="post" action="action.html" target="_blank"> </form>
-
表单输入标记<input>
可以向页面中添加单行文本、多行文本、按钮等
<input>标记的语法格式如下：
<input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlenght="digit" readonly="" size="digit" src="uri" usemap="uri" alt="" name="checkbox" value="checkbox">
标记详细属性介绍：＜input＞表单输入标记-CSDN博客
太多了，我懒得再打一遍..........
-
下拉菜单标记<select>
<!-- <select>标记的语法格式 --> <select name="name" size="digit" multiple="multiple" disabled="disabled"> <option>...</option> <option>...</option> <option>...</option> ... </select>
该标记可以在页面中创建下拉列表，使用<option>标记向列表中添加内容。
| 属性 | 描述 |
| name | 指定列表框的名称 |
| size | 指定列表框中显示的选项数量，超出该数量的选择可以通过拖动滚动条查看 |
| disabled | 指定当前列表框不可使用 |
| multiple | 让多行列表框支持多选 |
实验例子：
<body> 下拉列表框： <select name="select"> <option>数码相机</option> <option>摄影器材</option> <option>MP3/MP4/MP5</option> <option>U盘/移动硬盘</option> </select> <br> 多行列表框（不可多选）： <select name="select2" size="2"> <option>数码相机</option> <option>摄影器材</option> <option>MP3/MP4/MP5</option> <option>U盘/移动硬盘</option> </select> <br> 多行列表框（可多选）： <select name="select3" size="3" multiple> <option>数码相机</option> <option>摄影器材</option> <option>MP3/MP4/MP5</option> <option>U盘/移动硬盘</option> </select> </body>
-
多行文本标记<textarea>
<!-- 语法格式 --> <textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value"> 默认值 </textarea>
通常情况下，<textarea>出现在<form>的标记内容中
| 属性 | 描述 |
| name | 用于指定多行文本框的名称，当表单提交后，在服务器端获取表单数据时应用 |
| cols | 用于指定多行文本框显示的列数（宽度） |
| rows | 用于指定多行文本框显示的行数（高度） |
| disabled | 用于指定当前多行文本框不可使用（变成灰色） |
| readonly | 用于指定当前多行文本框为只读 |
| wrap | 用于设置多行文本中的文字是否自动换行 |
实验例子：
<body> <form action="" name="form1" method="post"> <textarea rows="5" cols="30" name="content" wrap="hard"> </textarea> </form> </body>
5、超链接与图片标记
-
超链接标记<a>
<!-- 语法格式 --> <a href="">...</a>
在网站中实现从一个页面跳转到另一个页面，就是用它来完成的。
属性href用来设定连接到哪个页面中。
-
图像标记<img>
<!-- 语法格式 --> <img src="url" width="value" height="value" border="value" alt="提示文字">
浏览网站中通常会看到各式各样漂亮的图片，在页面添加的图片是通过<img>标记实现的。
| 属性 | 描述 |
| src | 指定图片来源 |
| width | 指定图片宽度 |
| height | 指定图片高度 |
| border | 指定图片外边框的宽度，默认值为0 |
| alt | 指定当图片无法显示时显示的文字 |
实验例子：
<body> <table width="409" height="523" border="1" align="center"> <tr> <td width="199" height="190"> <img src="../pic/a.jpg"/> </td> <td width="194" > <img src="../pic/b.jpg"/> </td> </tr> <tr> <td height="55" align="center" valign="middle"><a href="002.jsp">查看详情</a></td> <td align="center" valign="middle"><a href="002.jsp">查看详情</a></td> </tr> <tr> <td height="210"> <img src="../pic/a.jpg"/> </td> <td> <img src="../pic/b.jpg"/> </td> </tr> <tr> <td height="55" align="center" valign="middle"><a href="002.jsp">查看详情</a></td> <td align="center" valign="middle"><a href="002.jsp">查看详情</a></td> </tr> </table> </body>
点击查看详情，跳转界面到指定页面，比如我写的是“href="002.jsp”
