HTML【1】的学习，实用编程+代码

最新推荐文章于 2021-09-04 09:08:14 发布

linweieran

最新推荐文章于 2021-09-04 09:08:14 发布

阅读量739

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： HTML

本文链接：https://blog.youkuaiyun.com/linweieran/article/details/47816013

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨HTML标签编程的特点及应用，通过实例代码详细解释了如何使用HTML进行数据操作和用户交互，包括输入文本、密码、选择性别、技术、照片、按钮、下拉菜单等功能的实现，并展示了如何为代码添加样式，使页面布局更美观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天8月20号是农历的七夕，虐死单身狗的日子。在学习Servlet这几天后常常看到HTML编程，里面有好多都忘记了，所以又花了两天的时间来复习。好了，来回忆一下我对HTML的学习吧。

HTML（HyperText Markup Language）超文本标记语言，其实就是标签<>编程，那么标签编程有什么特点呢？

大致来说，为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作，标签就相当于一个容器。同时标签大致格式分为两种：
一种格式是：<标签名属性名=‘属性值’> </标签名>，比如<h1></h1>
另一种标签只有单一功能，那么就可以在标签内部闭合，比如换行标签<br/>水平线<hr/>

其实HTML语言原理上来说是很简单的，不需要编译加载就可以直接使用浏览器按行执行看到效果。在了解HTML语言后，对标签和属性的熟悉是很重要的，现在就来了解一下HTML的标签语言，并试着用其进行编程。

其中<head>里面写的都是辅助、需要加载的内容，用<title>标签标示</head> 最先最先执行，比如一下代码：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>学习列表</title>
</head>

<title>标签会在标签栏里面显示。

我们在注册某个网站的时候，会有名字、性别、密码等等的填写，在这里以说这个例子来说明标签编程。这个代码的效果图如下：

并且代码如下：

<form>
 		输入名称：<input type="text"name="user"value=""/><br/>
 		输入密码：<input type="password"name="pass"/><br/>   <!-- 非明文 -->
 		选择性别: <input type="radio"name='sex'value="man"/>男 
 				 <input type="radio"name='sex'value="woman"checked="checked"/>女  <br>
 		选择技术：<input type="checkbox"name=java/>Java <input type="checkbox"/>C++<input type="checkbox"/>HTML <br>
 			
 		选择照片：<input type="file"name="file"/><br>
 		一个图片：<input type="image" src="li.jpg"><br>
 		隐藏组件：<input type="hidden"name="myke"value="myvalue"/><br>
 		一个按钮：<input type="button"value="请点击*_*"onclick="alert('该学习了，骚年')"/><br>
 	
 		<select name="country">
 			<option value="none">---选择国家---</option>
 			<option value="USA" selected="selected">美国</option>
 			<option value="CN">中国</option>
 			<option value="EN">英国</option>
 			<option value="GER">德国</option>		
 		</select>
 		<br>
 		个人简介：<textarea  name="text"></textarea>
 		<br>
 			<input type="reset"value="清除数据">	<input type="submit"value="提交数据"/><br>
    </form>

从这个代码里面可以看出很多知识，：<input type="text"name="user"value=""/>向服务端提交必须写name="user"value=""否则无法标识，<type="text">输入的内容会以明文的形式显示，<text="password">这个不会以明文直接显示。

<type="radio"name='sex'>这个是单选框，但是若要完成只能单选的命令，必须将<name>赋值相同，其中checked="checked"表示这个单选框是默认选中但也可更改。

<input type="checkbox"name=java/>Java这个是复选框，name 才是值，外面的只是在网页上显示而已。

<select name="country"> <option value="none">---选择国家---</option>这个代码大家猜也能猜到，这个是下拉选项。其中selected="selected"表示这个选项是默认的。

这个<input type="reset"value="清除数据"> <input type="submit"value="提交数据"/>是提交和清除数据。

上面那幅图就是效果图，但是那样子显示很乱，所以加一个框就会很好！加框的代码如下：

<form action="http://localhost:9090" method="post">
 	<table  border="1" bordercolor='#0000ff'cellpadding="10" cellspacing="0" width=600 >
 	 	<tr>
 			<th colspan="2">注册表单 </th>
 		</tr>
 		<tr>
 			<th>用户名称：</th>
 			<td> <input type="text"name="user"value=""/> </td>
 		</tr>
 		<tr>
 			<th>性别：</th>
 			<td><input type="password"name="pass"/></td>
 		</tr>
 		<tr>
 			<th>选择性别：</th>
 			<td>
 				<input type="radio"name='sex'value="man"/>男 
 				 <input type="radio"name='sex'value="woman"checked="checked"/>女
 			</td>
 		</tr>
 		<tr>
 			<th>选择技术：</th>
 			<td>
 				<input type="checkbox"name="tech"value="java"/>Java <input type="checkbox"/>C++<input type="checkbox"/>HTML
 			</td>
 		</tr>
 		<tr>
 			<th>选择国家：</th>
 			<td>
 			<select name="country">
 			<option value="none">---选择国家---</option>
 			<option value="USA" selected="selected">美国</option>
 			<option value="CN">中国</option>
 			<option value="EN">英国</option>
 			<option value="GER">德国</option>		
 		</select>
 			</td>
 		</tr>
 		<tr>
 			<th colspan="2">
 			<input type="reset"value="清除数据">	<input type="submit"value="提交数据"/>
 			</th>
 			
 		</tr>
 	</table>
 </form>

其效果图如下：

代码中：

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

是加框的基础代码。

其中method="post"是表单的提交方式，这个在下一篇里面介绍一下！