（二）网页前端开发基础之HTML

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>&nbsp;
<br>
多行列表框（不可多选）：
<select name="select2" size="2">
<option>数码相机</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>&nbsp;
<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”

（二）网页前端开发基础之HTML

1、HTML文档结构

<html>标记

<head>标记

<title>标记

<body>标记

2、HTML文本标记

换行标记

段落标记

标题标记

居中标记

文字列表标记

3、HTML表格标记

表格标记<table>

标题标记 <caption>

表头标记<th>

表格行标记<tr>

单元格标记<td>

4、HTML表单标记

表单标记<form>

表单输入标记<input>

下拉菜单标记<select>

多行文本标记<textarea>

5、超链接与图片标记

超链接标记<a>

图像标记<img>