HTML

最新推荐文章于 2020-10-30 20:52:53 发布
原创 最新推荐文章于 2020-10-30 20:52:53 发布 · 439 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

HTML：

超文本标记语言，主要有标签组成

列表标签dl、图像标签img、表格标签table、超链接标签href、框架标签frameset、画中画标签iframe、表单标签form

get提交和post提交的区别？

1.get提交：提交的信息都显示在地址栏中

    post提交：提交的信息不显示在地址栏中

2.get提交：对于敏感的数据信息不安全

    post提交：对于敏感信息安全

3.get提交：对于大数据不行，因为地址栏存储体积有限

    post提交：可以提交大体积数据

4.get提交：将信息封装到了请求消息的请求行中

    post提交：将消息封装到了请求体中

列表标签：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		
		<!--HTML注释：演示列表标签。
		
		列表标签：dl
		
		上层项目：dt
		下层项目：dd : 封装的内容是会被缩进的。 有自动缩进效果。 
		-->
		<dl>
			<dt>上层项目内容</dt>
			<dd>下层项目内容</dd>			
			<dd>下层项目内容</dd>			
			<dd>下层项目内容</dd>			
		</dl>
		
		<hr/>
		<!--有序和无序的项目列表
		
		有序：<ol>
		无序：<ul>
		无论有序和无序，条目的封装用的都是<li>
		而且它们都有缩进效果。 
		
		-->
		<ul type="square">
			<li>无序项目列表</li>
			<li>无序项目列表</li>
			<li>无序项目列表</li>
			<li>无序项目列表</li>
		</ul>
		
		<ol type="a">
			<li>有序的项目列表</li>
			<li>有序的项目列表</li>
			<li>有序的项目列表</li>
			<li>有序的项目列表</li>
		</ol>
		
	</body>
</html>

图像标签：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		
		<!--演示图片标签
		img.
		-->
		<img src="imgs\1.jpg" height=350 width=500 border=10 alt="啊，美女！" />
	</body>
</html>

表格标签：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		
		<table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=0 width=500>
			<tbody><!--表格的下一级标签是tbody，不定义也存在-->
			<tr>
				<th rowspan=2>个人信息</th>
				<td>张三</td>
			</tr>
			<tr>				
				<td>30</td>
			</tr>
			</tbody>
		</table>
		
		
		<hr/>
		
		<table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=0 width=500>
			<tr>
				<th colspan=2>个人信息</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>30</td>
			</tr>
		</table>
		<hr/>
		<table border=1 bordercolor="#0000EE" cellpadding=10 cellspacing=0 width=500>
			<caption>表格标题</caption>
			<tr>
				<th>姓名：</th>
				<th>年龄：</th>
			</tr>
			<tr>
				<td>张三</td>
				<td>39</td>
			</tr>
		</table>
		
		
		
	</body>
</html>

超链接标签：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		<!--
		超链接：
		作用：连接资源。
		当有了href属性才有了点击效果。
		href属性的值的不同，解析的方式也不一样。
		
		如果在该值中没有指定过任何协议。
		解析时，是按照默认的协议来解析该值的。默认协议是file协议。
		
		
		
		-->
		<a href="http://www.sohu.com.cn" target="_blank">新浪网站</a>
		<hr/>
		<a href="imgs/1.jpg">美女图片</a>
		<hr/>
		<a href="mailto:abs@sina.com">联系我们</a>
		<hr/>
		
	<a href="http://www.xunlei.com/movies/fczlm.rmvb">复仇者联盟</a><br/>
	<a href="thunder://wertyuioasdfghjklwertyuio==">复仇者联盟</a>
	
	<a href="javascript:void(0)" onclick="alert('我弹')">这是一个超链接</a>
		
	</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		
		<!--
		定位标记。
		专业术语：锚
		-->
		<a name=top>顶部位置</a>
		<hr/>
		<img src="111.jpg" height=900 width=400 border=10/>
		<hr/>
		<a name=center>中间位置</a>
		<hr/>
		
		<img src="111.jpg" height=900 width=400 border=10/>
		<a href="#top">回到顶部位置</a>
		<a href="#center">回到中间位置</a>
		
		
	</body>
</html>

框架标签：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	
	
	
	<!--
	定义框架。使用标签frameset
	-->
	
	<frameset rows="30%,*">
		<frame src="top.html" name="top" />
		
		
		<frameset cols="30%,*">
			<frame src="left.html" name="left" />
			<frame src="right.html" name="right"/>
		</frameset>
		
		
	</frameset>
	
	
	
	
	<body>
		
		
	</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		<h1>这是我的网站LOGO</h1>
	</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		<H3>左边栏连接</H3>
		<a href="../img.html" target="right">链接一</a>
		<a href="../table.html"  target="right">链接一</a>
		<a href="../link.html" target="right">链接一</a>
	</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		<h2> 内容显示区域</h2>
	</body>
</html>

画中画标签：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		
		<!--iframe src="http://www.xxx.com/1.js" height=0 width=0>这是画中画标签，您如果看到该文字，很遗憾，您的浏览器不支持该标签</iframe-->
		
		<!--a href="a">下载地址1</a>
		<a href="a">下载地址2</a-->
		
		<a href="sadfsdfad"><img src="c:\2.bmp" border=0/></a>
	</body>
</html>

表单标签：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		<!--
		如果要给服务端提交数据，表单中的组件必须有name和value属性。
		用于给服务端获取数据方便。
		-->
		<form>
			输入名称：<input type="text" name="user" value="" /><br/>
			输入密码：<input type="password" name="psw"  /><br/>	
			选择性别：<input type="radio" name="sex" value="nan" />男
				     <input type="radio" name="sex" value="nv" checked="checked" />女<br/>
			选择技术：<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/>
			选择文件：<input type="file" name="file"/><br/>		 
			一个图片：<input type="image" src="11.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">美国</option>
					<option value="en">英国</option>
					<option value="cn" selected="selected">中国</option>
			</select>
			
			<textarea name="text"></textarea>
			<br/>
					 
			<input type="reset" value="清除数据"/><input type="submit" value="提交数据" />
		</form>
		
	</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<!--meta http-equiv="refresh" content="3;url=http://www.sina.com.cn" /-->
		<title>Untitled Document</title>
	</head>
	<body>
		<!--
提交方式：get提交。
地址栏：http://10.1.31.69:9090/?user=abc&psw=123&repsw=123&sex=nan&tech=java&tech=html&country=cn
		
GET /?user=abc&psw=123&repsw=123&sex=nan&tech=java&tech=html&country=cn HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*
Accept-Language: zh-cn,zu;q=0.5
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; InfoPath.2)
Host: 10.1.31.69:9090
Connection: Keep-Alive


提交方式：POST
地址栏：http://10.1.31.69:9090/

POST / HTTP/1.1
Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, */*
Accept-Language: zh-cn,zu;q=0.5
Content-Type: application/x-www-form-urlencoded
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; InfoPath.2)
Host: 10.1.31.69:9090
Content-Length: 68
Connection: Keep-Alive
Cache-Control: no-cache

user=hahah&psw=8989&repsw=8989&sex=nv&tech=html&tech=css&country=usa
		
		
		
		GET提交和POST提交的区别？
		1,
		get提交，提交的信息都显示在地址栏中。
		post提交，提交的信息不显示地址栏中。
		
		2，
		get提交，对于敏感的数据信息不安全。
		post提交，对于敏感信息安全。
		
		3，
		get提交，对于大数据不行，因为地址栏存储体积有限。
		post提交，可以提交大体积数据。 
		
		4，
		get提交，将信息封装到了请求消息的请求行中。
		post提交，将信息封装到了请求体中。
		
		在服务端的一个区别。
		如果出现将中文提交到tomcat服务器，服务器默认会用iso8859-1进行解码会出现乱码，
		通过iso8859-1进行编码，在用指定的中文码表解码。即可。
		这种方式对get提交和post提交都有效。 
		
		但是对于post提交方式提交的中文，还有另一种解决办法，就是直接使用服务端一个对象
		request对象的setCharacterEncoding方法直接设置指定的中文码表就可以将中文数据解析出来。
		这个方法只对请求体中的数据进行解码。 
		
		
		综上所述：表单提交，建议使用post。
		
		
		
		和服务端交互的三种方式：
		1，地址栏输入url地址。get
		2，超链接。 get
		3，表单。 get 和  post
		

		
		如果在客户端进行增强型的校验(只要有一个组件内容是错误，是无法继续提交的。只有全对才可以提交)
		问，服务端数据后，还需要校验吗？
		需要，为了安全性。
		
		如果服务端做了增强型的校验，客户端还需要校验吗？
		需要，因为要提高用户的上网体验效果，减轻服务器端的压力。
		
		
		-->
		
		
		<form action="http://10.1.31.69:9090" method="post">
			<table border="1" bordercolor="#0000ff" cellpadding=10 cellspacing=0 width=600>
				<tr>
					<th colspan="2">注册表单</th>
				</tr>				
				<tr>
					<td>用户名称：</td>
					<td><input type="text" name="user" /></td>
				</tr>				
				<tr>
					<td>输入密码：</td>
					<td><input type="password" name="psw" /></td>
				</tr>				
				<tr>
					<td>确认密码：</td>
					<td><input type="password" name="repsw" /></td>
				</tr>				
				<tr>
					<td>选择性别：</td>
					<td>
						<input type="radio" name="sex" value="nan" />男 
						<input type="radio" name="sex" value="nv" />女
					</td>
				</tr>				
				<tr>
					<td>选择技术：</td>
					<td>
						<input type="checkbox" name="tech" value="java" />JAVA
						<input type="checkbox" name="tech" value="html" />HTML
						<input type="checkbox" name="tech" value="css" />CSS
					</td>
				</tr>				
				<tr>
					<td>选择国家：</td>
					<td>
						<select name="country">
							<option value="none">--选择国家--</option>
							<option value="usa">--美国--</option>
							<option value="en">--英国--</option>
							<option value="cn">--中国--</option>
						</select>
					</td>
				</tr>				
				<tr>
					<th colspan="2">
						<input type="reset" value="清除数据" />
						<input type="submit" value="提交数据" />
					</th>
				</tr>				
			</table>
			
		</form>
		
		
	</body>
</html>


其他标签：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		<pre>
		class Demo
		{
			public static void main(String[] args)
			{
				System.out.println("hello");
			}
		}
		</pre>
		
		
		<hr/>
		<marquee direction="down" behavior="slide">嘿，原来我会飞!</marquee>
		<b>这是</b><i>演示</i><u>其他</u>常见的小标签。 
		
		X<sub>2</sub> X<sup>2</sup>
		
	</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
		<title>Untitled Document</title>
	</head>
	<body>
		<div>这是一个div区域1</div>
		<div>这是一个div区域2</div>
		<span>span区域1</span>
		<span>span区域2</span>
		<p>这是一个段落1</p>
		<p>这是一个段落2</p>
		
		<!--
		标签分为两大类。
		1,块级标签(元素):标签结束后都有换行。div p dl table title ol ul 
		2,行内标签(元素):标签结束后没有换行。 font span img input select a
		-->
		<dl>
			<dt>ddddd</dt>
			<dd>eeeee</dd>
		</dl>
		hahahahh
	</body>
</html>








2017.8.1拼多多内推内推笔试题（4）—迷宫寻路（状态压缩+BFS）
UliseeseX的博客
08-07 4721
题目要求 假设一个探险家被困在了地底的迷宫之中，要从当前位置开始找到一条通往迷宫出口的路径。迷宫可以用一个二维矩阵组成，有的部分是墙，有的部分是路。迷宫之中有的路上还有门，每扇门都在迷宫的某个地方有与之匹配的钥匙，只有先拿到钥匙才能打开门。请设计一个算法，帮助探险家找到脱困的最短路径。如前所述，迷宫是通过一个二维矩阵表示的，每个元素的值的含义如下 0-墙，1-路，2-探险家的起始位置，3-迷宫的出
Java对图片Base64转码--HTML对Base64解码
W_Jp - 编程爱好者
10-11 1万+
java代码   package base64; import java.awt.image.BufferedImage; import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.File; imp
SEx2p参考代码
hxy17682323970的博客
03-26 5291
6-1 数组指针与二维数组的关系 利用数组指针p将main函数中输入的二维数组a的所有元素输出， 要求先按行的顺序输出，然后再以列的顺序输出， 其中输出整型格式用 “%3d”, (测试用数据大小不要超过2位数）。 参考代码： void reOut(int (*p)[3]) { int i, j; for (i = 0; i < 2; i++) { for (j = 0; j ...
ul、ol、table、select 元素使用"is"特性：约束元素不能直接使用组件
weixin_41796631的博客
10-20 403
说明：  由于DOM元素模板限制，&lt;ul&gt;、&lt;ol&gt;、&lt;table&gt;、&lt;select&gt; 这些元素内部只能使用&lt;li&gt;、&lt;tr&gt;、&lt;option&gt;元素。 如果在&lt;ul&gt;、&lt;ol&gt;、&lt;table&gt;、&lt;select&a
程序设计综合实训——高校教师信息管理系统（数据结构，单向链表）
CUCUC1的博客
06-23 5206
其实这个用数组，很容易就可以完成，但是为了学习数据结构，还是用链表写的 题目： 编写一套计算机学院教师信息管理系统，用菜单进行管理，具备输入、显示、查找、排序、插入等功能。每一条记录包括一位教师的职工号、姓名、职称、性别、2门主讲课程，包括课程名称、开课学期、课程性质（必修/限选课）和教学效果，以及教学效果综合评分。 话不多说，直接上代码吧，代码比语言描述清晰 #include <iostream> #include <cstdio> #include <string>
程序员给女朋友用HTML5制作的3D相册
04-21
HTML5是一种强大的网页开发技术，它为网页开发者提供了丰富的功能和接口，使得创建交互式、动态和响应式的网站成为可能。在这个"程序员给女朋友用HTML5制作的3D相册"项目中，我们可以看到HTML5如何被巧妙地利用来...
HTML5浪漫爱心表白动画在线演示程序
02-12
HTML5是一种强大的网页开发语言，它是HTML的第五个版本，为现代互联网提供了丰富的功能和交互性。这个"HTML5浪漫爱心表白动画在线演示程序"是一个利用HTML5特性制作的创意应用，特别适合在情人节这样的特殊日子里，...
仿京东商城H5主页面源代码，html、css、js 下载
05-13
【标题】"仿京东商城H5主页面源代码"是一个项目，旨在重现京东商城的移动端网页界面，通过HTML、CSS和JavaScript技术实现。这个项目可以帮助开发者理解和学习如何构建响应式、交互性强的电商网站前端。 【描述】...
全套移动端_app_页面（商城）html_demo_前端页面
09-04
html+css+js+各种丰富的插件）大家快速开发后台必备模板，适合设计o2o、商城、系统平台。文件内包含了一整套页面，帮助大家快速完成页面设计，不用再写一行页面代码，只需要专注开发后端功能就行了。首页、会员中心...
Markdownpad2_html渲染出错组件，下载即用
05-19
Markdown软件很好用，但是初下载之时会报错：“HTML 渲染组件出错，这个问题可以通过安装某个缺失组件来解决。您是否想要了解详细信息？” 但是跳转到相关页面也没明确的解决方法 那怎么办呢？ 提示“缺失组件”，那...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sty
热门推荐
u014497548的博客
06-03 61万+
Title img,div,body{margin: 0;padding: 0;} .orgindiv {width: 200px;height: 200px;position: relative;float: left;margin-left: 100px;} .orgindiv img{width: 100%;height: 100%;}
Access to XMLHttpRequest at ‘http://xxxx‘ from origin ‘http://xxxx‘ has been blocked by CORS policy
笑三年-Dylen
10-30 11万+
解决CORS跨域问题 今天做前后端分离的项目时, 前端向后台发送请求发现报错: Access to XMLHttpRequest at ‘http://localhost:8082/doLogin’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-A
HttpURLConnection 传输数据和下载图片
weixin_30642267的博客
12-09 216
一、传输字符串数据 在Android中HttpURLConnection传输数据是必不可少的，我们继续在“AsyncTask（异步任务）”案例的基础上添加。 案例： 首先我们做一个jsp的服务端，文件名为test1.jsp。 <%@ page language="java" contentType="text/html; charset=UTF-...
Servlet——HttpServletRequest对象详解
Gavin
04-27 1万+
本文介绍了HttpServletRequest的常见方法、常见应用，最后重点介绍了请求转发forward，以及它和请求重定向sendRedirect的区别
网络基本原理和加密
梦浮生清月夜
03-01 2469
数据加密1. base64编码加密一种简单的加密方式,本质是将任意的二进制数据编码成字符串,在网络上传输.//终端命令 base64编码 base64 xx.png -o abc.txt 编码文件 echo -n "Man" | base64 编码字符串 base64解码 base64 abc.txt -o xx.png -D 解码文件 echo -n "TWFu" |
B站的基于python的Opencv项目实战-唐宇迪.zip
最新发布
08-22
B站的基于python的Opencv项目实战-唐宇迪.zip
借助 LLaMA 3 等大模型，为全球百余种语言个性化学习提供支持的对话类 AI Agent，适用于全球旅行与生活场景
08-22
资源下载链接为： https://pan.quark.cn/s/538a38db2c7e 借助 LLaMA 3 等大模型，为全球百余种语言个性化学习提供支持的对话类 AI Agent，适用于全球旅行与生活场景（最新、最全版本！打开链接下载即可用！）
一个基于 Python 的网易云音乐-音乐合伙人任务脚本，支持本地运行和 GitHub Actions 自动执行。.zi
08-22
一个基于 Python 的网易云音乐-音乐合伙人任务脚本，支持本地运行和 GitHub Actions 自动执行。.zip
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值