html

最新推荐文章于 2025-06-23 09:16:31 发布

icoco_

最新推荐文章于 2025-06-23 09:16:31 发布

阅读量593

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/u011898209/article/details/21886535

web 专栏收录该内容

2 篇文章

订阅专栏

本文总结了HTML的基础开发技术，包括HTML文档类型声明、注释、列表、图片、表格、超链接、表单等关键标签及其用法。

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

web基础开发技术总结

1. html（超文本标签语言）

1.0 <!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。
DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。\

        <!-- 如下为html4的标准DOCTYPE声明 -->
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

1.1注释标签：

1.2列表标签：dl

上层标题标签:dt，
下层数据标签:dd, 封装的内容是会被缩进的。有自动缩进效果。

	<dl>
		<dt>上层项目内容</dt>
		<dd>下层项目内容</dd>			
		<dd>下层项目内容</dd>			
		<dd>下层项目内容</dd>			
	</dl>
	无序项目列表标签：ul,条目数据封装标签，li
	有序项目列表标签：ol
	<ul type="square">
		<li>无序项目列表</li>
		<li>无序项目列表</li>
		<li>无序项目列表</li>
		<li>无序项目列表</li>
	</ul>
		
	<ol type="a">
		<li>有序的项目列表</li>
		<li>有序的项目列表</li>
		<li>有序的项目列表</li>
		<li>有序的项目列表</li>
	</ol>

1.3图片标签：img

	<!-- src 图片路径属性，alt属性表示当图片加载失败时，会显示相应的文字提示。 -->
	<img src="imgs\1.jpg" height=350 width=500 border=10 alt="图片1.jpg" />

1.4表格标签：table

table标签的下一级标签是tbody
th表示表格标签标题
tr表示表格标签内容//table标签有很多属性，但是由于CSS的发展，各属性都逐渐被淘汰。

	<table>
		<tbody>
			<tr>
				<th>姓名</th>
				<td>张三</td>
			</tr>
			<tr>
				<th>年龄</th>
				<td>30</td>
			</tr>
		</tbody>
	</table>

1.5超链接标签：a
	1.5.1	作用：连接资源。当有了href属性才有了点击效果。href属性的值的不同，解析的方式也不一样。	如果在该值中没有指定过任何协议。解析时，是按照默认的协议来解析该值的。默认协议是file协议。	1.5.2	<!-- 当用户点击时表示在 新窗口中打开链接。使用网络http协议链接资源 -->
	<a href="http://www.sohu.com.cn" target="_blank">新浪网站</a>
	1.5.3	<!-- 用户点击时使用file协议打开本地的图片资源 -->
	<a href="imgs/1.jpg">图片</a>
	1.5.4	<!-- 使用js代表表示点击后执行onclick函数。
	<a href="javascript:void(0)" onclick="alert('你好')">这是一个超链接</a>
	1.5.5	<!-- 点击后 打开系统内默认的邮件服务软件，发送邮件 -->
	<a href="mailto:abs@sina.com">联系我们</a>
	1.5.6	<!-- a标签也可以当做锚点使用  当一个网页很长时间需要给网页分段 -->
	<a name=top>顶部位置</a>
	<a href="#top">回到顶部位置</a>

1.6表单标签：form

如果要给服务端提交数据，表单中的组件必须有name和value属性。用于给服务端获取数据方便。

	1.6.1	<!-- 输入类型为文本的输入框 -->
	<input type="text" name="user" value="name" />
	1.6.2	<!-- 输入类型为密码类型的输入框 -->
	<input type="password" name="psw"  />
	1.6.3	<!-- 输入单选框的输入框 name属性都为sex但是value属性不同 -->
	<input type="radio" name="sex" value="nan" />男
	<input type="radio" name="sex" value="nv" checked="checked" />女<br/>
	1.6.4	<!-- 输入为复选框 可以多选 同样name属性都为tech 但是value属性不同 -->
	<input type="checkbox" name="tech" value="java"/>JAVA
	<input type="checkbox" name="tech" value="html"/>HTML
	<input type="checkbox" name="tech" value="css"/>CSS<BR/>
	1.6.5	<!-- 下拉菜单同样只能选择一个  可以通过设置selected属性设置默认选项-->	
	<select name="country">
		<option value="none">--选择国家--</option>
		<option value="usa">美国</option>
		<option value="en">英国</option>
		<option value="cn" selected="selected">中国</option>
	</select>
	1.6.6	<!-- 按钮:通过设置onclick函数可以再客户端执行不同的操作。 -->
	<input type="button" value="确定" onclick="alert('按钮')" />
	1.6.7	<!-- 多行文本输入框 -->
	<textarea name="text"></textarea>
	1.6.8	<!-- 其他提交按钮 submit可以指定提交方式 get post -->
	<input type="reset" value="清除数据"/>
	<input type="submit" value="提交数据" />

1.6.9post get提交方式的区别

提交方式：get提交。直接在地址栏
地址栏：http://localhost/?user=abc&psw=123&repsw=123&sex=nan&tech=java&tech=html&country=cn
提交方式：POST
地址栏：http://localhost:9090/

get提交，提交的信息都显示在地址栏中。
get提交，对于敏感的数据信息不安全。
get提交，对于大数据不行，因为地址栏存储体积有限。最大为2K的内容
get提交，将信息封装到了请求消息的请求行中

post提交，对于敏感信息安全。
post提交，提交的信息不显示地址栏中。
post提交，可以提交大体积数据。
post提交，将信息封装到了请求体中。

在服务端的一个区别。
如果出现将中文提交到tomcat服务器，服务器默认会用iso8859-1进行解码会出现乱码，
通过iso8859-1进行编码，在用指定的中文码表解码。即可。
这种方式对get提交和post提交都有效。

但是对于post提交方式提交的中文，还有另一种解决办法，就是直接使用服务端一个对象
request对象的setCharacterEncoding方法直接设置指定的中文码表就可以将中文数据解析出来。
这个方法只对请求体中的数据进行解码。

1.7 其他标签

<hr/> 标签在 HTML 页面中创建一条水平线。水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。
 表示文本换行是空标签，不需要结束。
X2 X2脚标

	<div>这是一个div区域</div><!-- 有换行 这两个标签主要是为了方便使用css定义样式 -->
	<span>span区域</span>
	<p>这是一个段落1</p>
		
		<!--
		标签分为两大类。
		1,块级标签(元素):标签结束后都有换行。div p dl table title ol ul 
		2,行内标签(元素):标签结束后没有换行。 font span img input select a
		-->