null - 程序员宅基地

2.6 HTML_1、实现一个调查问卷,要求尽可能的使用上所学过的各种标签-程序员宅基地

技术标签： html5 web html JavaWeb

本文是课上资料的总结非原创没有转载地址

HTML

回顾

三层架构 DAO、Service、UI utils 工具类 domain实体类 (PO Persistent Object) DTO VO
JDBC操作事务，结合事务的三层架构，在DBUtils工具类里，封装对事务的一系列操作
conn.setAutoCommit(false); //begin; set autocommit=1(自动提交) 0(不自动提交)
conn.commit();//提交 commit;
conn.rollback();//回滚 rollback;
ThreadLocal解决多个DAO操作，connection对象不同步的问题。
Apache DBUtils的使用，QueryRunner ResultSetHanlder 接口
BeanListHandler
BeanHandler
ScalarHandler
封装查询功能:
1. RowMapper 理解
2. 反射方式理解

第一节 HTML简介

什么是网页?
网页，是网站中的一个页面，通常是网页是构成网站的基本元素，是承载各种网站应用的平台。通俗的说，网站就是由网页组成的。
通常我们看到的网页都是以htm或html后缀结尾的文件，俗称HTML文件。

1.1 HTML概述

HTML全称：Hyper Text Markup Language(超文本标记语言)
超文本标记语言是标准通用标记语言（SGML）下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
HTML是一门用户创建网页文档的标记语言，网页文件本身是一种文本文件，通过在文本文件中添加标记符。
HTML可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示、包括音频、视频等等如何播放）。
简单一句话：HTML是一门用来创建网页的标记语言。

1.2 HTML特点

其主要特点如下：

简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：超文本标记语言可以使用在广泛的平台上，这也是万维网（www）盛行的另一个原因。
通用性：HTML是网络的通用语言,一种简单、通用的标记语言。

1.3 HTML的发展

超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布(并非标准)
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准  
		W3C : XHTML1.0 -> XHTML1.1 -> XHTML2.0-->(XML) 死路
		WHATWG:HTML 5
HTML 5——2014年10月29日，W3C推荐标准

1.4 HTML基本结构

<!--文档声明：告诉浏览器使用HTML5版本 -->
<!DOCTYPE html>
<html>
  <!--网页的头部 -->
  <head>
    <!--设置页面的字符集编码 -->
    <meta charset="utf-8" />
    <!--设置页面的标题 -->
    <title>第一页面</title>
  </head>
   <!--网页的主体 -->
  <body>
    <!--需要展示的信息-->
    页面内容
  </body>
</html>

HTML页面包含头部head和主体body
HTML标签通常是成对出现的，有开始就有结束，这样的标签称为成对标签、没有结束标签称为空标签。
HTML通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开)
HTML标签不区分大小写,建议小写
文件名后缀为.html或.htm

第二节 HTML基本标签

2.1 结构标签

    <html><html>    // 根标签		 
    <head></head>    // 头标签		 	
   	<title></title>    // 页面的标题		 
    <body></body>    // 主体标签：网页内容

<!--属性：
    color:文本的颜色
-->
<font color="red">内容</font>
<!--size: 文本的大小1-7-->
<font size="3">内容</font>
<!--bgcolor:背景色-->
<body bgcolor="bisque"></body>
<!--background:背景图片-->
<body background="图片的地址"></body>		     
<!--颜色的表示方式：                        
    第一种方式：使用颜色名称: red green blue skyblue             
    第二种方式：RGB模式 #000000  #ffffff  #325687   #377405
-->

2.2 排版标签

注释标签：，不要嵌套
换行标签：<br/>
段落标签：<p>文本文字</p>
- 特点：段与段之间有行高
- 属性：align对齐方式 (left：左对齐 center：居中 right：右对齐)
水平线标签:
- 属性：
  width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)
  size: 水平线的粗细 (像素表示，例如：10px)
  color:水平线的颜色
  align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)

2.3 标题标签

<h1></h1>—-<h6></h6>
随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；

2.4 容器标签

 <div></div>    // 块级标签，独占一行，换行 ，有高度和宽度
 <span></span>    // 行级标签，所有内容都在同一行, 没有高度和宽度
 <!--作用： <div></div>:主要是结合css页面分块布局
      <span></span>:进行友好提示信息，突出显示内容 
-->

2.5 列表标签

2.5.1 无序列表 - ul（unorder list）

无序列表标签： <ul></ul>
- 属性：type：三个值，分别为
  circle（空心圆），disc（默认,实心圆），square（黑色方块）
列表项：
示例如下：

<ul type="square">无序列表
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ul>

2.5.2 有序列表 - ol（order list）

有序列表标签：<ol></ol>
- 属性：type：1、A、a、I、i（数字、字母、罗马数字）
列表项：<li></li>
示例如下：

<ol type="I">有序列表
    <li>苹果</li>
    <li>香蕉</li>
    <li>橘子</li>
</ol>

2.5.3 定义列表

dl（defination list）定义列表
dt（defination title）定义标题
dd（defination description）定义描述

<!--定义列表-->
<dl>
    <dt>苹果</dt>
    <dd>苹果是一种水果，富含维生素C，美容养颜，吃了长寿....</dd>
</dl>

2.5.4 列表嵌套

<ul>
    <li>咖啡</li>
    <li>茶
        <ul>
            <li>红茶</li>
            <li>绿茶
                <ul>
                    <li>中国茶</li>
                    <li>非洲茶</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>牛奶</li>
</ul>

2.6 图片标签

独立标签

<img/>

属性：
src：图片地址：相对路径（同一个网站）绝对路径（不同网站）
width：宽度
height：高度
border：边框
align：对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
alt：图片的文字说明
title：图片的悬停显示
hspace和vspace：设定图片边沿上下左右空白，以免文字或其它图片过于贴近

2.7 链接标签

超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
功能：
1. 页面跳转
2. 锚链接

<a>文本或图片</a>

属性：
href：跳转页面的地址（跳转到外网需要添加协议）
target:_self（自己）、_blank（新页面，之前页面存在）、_parent、_top、_self（本窗口打开，默认）
_search：相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。
name：名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式：#name的值

2.8 表格标签

表格由<table>标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由标签定义）。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

2.8.1 普通表格（table、tr、td）

border：边框的宽度
bordercolor：边框的颜色
cellspacing：单元格的边距
width：宽度
height：高度
table的align属性：控制表格的对齐方式left、center、right
td的align属性：控制内容对齐方式left、center、right
td的valign属性：控制内容对齐方式top、middle、bottom

	<!--border:边框的宽度 bordercolor:边框的颜色 cellspacing:单元格的边距 width:宽度 height:高度-->
	<!--table的 align属性控制表格的对齐方式  left  center right-->
	<!--td 的align属性控制内容对齐方式 left  center right -->
	<!--td 的valign属性控制内容对齐方式 top  middle bottom -->
		<table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
			<tr>
				<td>学号</td>
				<td>姓名</td>
			</tr>
			<tr>
				<td>1</td>
				<td>aa</td>
			</tr>
		</table>

2.8.2 表格的表头（th）

		<table border="1" bordercolor="red" cellspacing="0" align="center">
			<caption>学生表</caption>
			<tr>
				<th>学号</th>
				<th>姓名</th>
			</tr>
			<tr>
				<td>1</td>
				<td>aa</td>
			</tr>
		</table>

2.8.3 表格的列合并（colspan）

colspan属性

	<table border="1" bordercolor="red" cellspacing="0" align="center">
			<tr>
				<td colspan="4" align="center">学生表</td>
			</tr>
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td colspan="2">各科成绩</td>
			</tr>
			<tr>
				<td>1</td>
				<td>aa</td>
				<td>80</td>
				<td>90</td>
			</tr>
	</table>

2.8.4 表格的行合并（rowspan）

rowspan属性

<table border="1" bordercolor="red" cellspacing="0" align="center">
			<tr>
			<td colspan="4" align="center">学生表</td>
			</tr>
			<tr>
				<td>学号</td>
				<td>姓名</td>
				<td>语文成绩</td>
				<td>数学成绩</td>
			</tr>
			<tr>
				<td rowspan="2">1</td>
				<td rowspan="2">aa</td>
				<td>80</td>
				<td>90</td>
			</tr>
			<tr>
				<td>80</td>
				<td>90</td>
			</tr>
</table>

2.9 文本格式化标签

<b>：定义粗体文本。
<big>：定义大号字。
<em>：定义着重文字。
<i>：定义斜体字。
<small>：定义小号字。
<strong>：定义加重语气。
<sub>：定义下标字。
<sup>：定义上标字。
<ins>：定义插入字。
<del>：定义删除字。

第三节基本标签的综合案例

3.1 综合案例效果图

效果图

3.2 综合案例源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本标签综合案例</title>
	</head>
	<body>
		<div>
			<table width="90%" align="center">
			<tr>
				<td align="left">&nbsp;&nbsp;逆光工作室</td>
				<td align="right">
					<a>&nbsp;&nbsp;逆光特训营&nbsp;&nbsp;</a>
					<a>&nbsp;&nbsp;逆光学堂&nbsp;&nbsp;</a>
					<a>&nbsp;&nbsp;练习我们&nbsp;&nbsp;</a>
					<a>&nbsp;&nbsp;加入收藏</a>
				</td>
			</tr>
			<tr>
				<td align="left"><img src="img/new_logo.png"/></td>
				<td align="right"><img src="img/nav_r_ico.png"/></td>
			</tr>
		</table>
		</div>
		<!--菜单视图：第二个div块-->
		<div>
			<table width="90%" align="center">
				<tr>
					<td align="center">
						<hr>
						<span>&nbsp;&nbsp;首页&nbsp;&nbsp;</span><span>&nbsp;&nbsp;岗前培训&nbsp;&nbsp;</span><span>&nbsp;&nbsp;工作室简介&nbsp;&nbsp;</span>
						<span>&nbsp;&nbsp;视频介绍&nbsp;&nbsp;</span><span>&nbsp;&nbsp;人员介绍&nbsp;&nbsp;</span><span>&nbsp;&nbsp;企业合作&nbsp;&nbsp;</span>
						<span>&nbsp;&nbsp;成就介绍&nbsp;&nbsp;</span><span>&nbsp;&nbsp;主管介绍&nbsp;&nbsp;</span><span>&nbsp;&nbsp;关于&nbsp;&nbsp;</span>
						<span>&nbsp;&nbsp;工作室论坛&nbsp;&nbsp;</span>
						<hr>
					</td>
				</tr>
			</table>
		</div>
		<!--导航视图：第四个div块-->
		<div align="right" style="width: 95%;">首页&gt;岗前培训&gt;JavaEE列表&nbsp;&nbsp;&nbsp;</div>
		<div>
			<table width="90%" align="center">
				<tr>
					<td>
						<h3>岗前培训</h3>
						<h5>共XX种课程视频</h5>
						<hr />
					</td>
				</tr>
			</table>
		</div>
		<div>
			<table width="90%" align="center">
				<tr>
					<td colspan="5">
						<img src="img/001.png" width="100%"/>
					</td>
				</tr>
				<tr>
					<td align="center">
						<img src="img/002.png" width="150"/><br/>
						书名：XX<br/>
						售价：XX
					</td>
					<td align="center">
						<img src="img/003.png" width="150"/><br/>
						书名：XX<br/>
						售价：XX
					</td>
					<td align="center">
						<img src="img/004.png" width="150"/><br/>
						书名：XX<br/>
						售价：XX
					</td>
					<td align="center">
						<img src="img/005.png" width="150"/><br/>
						书名：XX<br/>
						售价：XX
					</td>
					<td align="center">
						<img src="img/006.png" width="150"/><br/>
						书名：XX<br/>
						售价：XX
					</td>
				</tr>
				<tr>
					<td align="center">
						<img src="img/007.png" width="150"/><br/>
						书名：XX<br/>
						售价：XX
					</td>
					<td align="center">
						<img src="img/008.png" width="150"/><br/>
						书名：XX<br/>
						售价：XX
					</td>
					<td align="center">
						<img src="img/009.png" width="150"/><br/>
						书名：XX<br/>
						售价：XX
					</td>
					<td align="center">
						<img src="img/010.png" width="150"/><br/>
						书名：XX<br/>
						售价：XX
					</td>
					<td align="center">
						<img src="img/011.png" width="150"/><br/>
						书名：XX<br/>
						售价：XX
					</td>
				</tr>
				<tr>
					<td colspan="5">
						<img src="img/012.png" width="100%"/>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

第四节 HTML表单标签

HTML表单用于收集不同类型的用户输入

4.1 form标签

常用属性：action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
         method:请求方式：get 和post
         enctype:表示是表单提交的类型
			    默认值：application/x-www-form-urlencoded  普通表单
			           multipart/form-data  多部分表单(一般用于文件上传)
			           text/plain 普通文本
			           
	 get:
	   1.数据存在地址栏中,请求参数都在地址后拼接 path?name=张三&password=123456
	   2.不安全
	   3.效率高
	   4.get请求大小有限制，不同浏览器有不同，但是大约是2KB
使用情况：一般情况用于查询数据。
	 post：
	   1.地址栏没有数据：请求参数单独处理。
	   2.安全可靠
	   3.效率低
	   4.post请求大小理论上无限。
使用情况：一般用于插入修改等操作		
put 
delete
header

4.1.1 input标签

type: 以下为type可能要取的值：
1. text：文本框，输入内容
2. password：密码框，密文或者掩码
3. radio 表示是单选，name必须一致；value：提交给服务器的数据表示同一组中只能选中一个( checked =“checked” 表示选中)
4. checkbox 表示多选，name必须一致，表示同一组中可以选多个，返回值是个数组( checked =“checked” 表示选中)
5. file ：表示上传控件以上具有输入性质的必须要有name属性,初始开始写value表示是默认值(以后获取输入框的内容要根据name来取) 以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
6. submit 提交
7. reset 重置
8. image 图片提交按钮
9. button 普通按钮
10. hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)
11. email 表示邮箱格式的数据

name属性：表单元素名字，只有name属性才能提交给服务器。
value属性：提交给服务器的数据
placeholder：提示信息
高级属性：
disabled:禁用
readonly:只读

4.1.2 select 元素

(下拉列表)

<select name="city">   <!--select标签添加该属性multiple="multiple"表示多选 、size表示显示的个数--> 
     <!--option表示下拉列表项-->
	<option value="北京">北京</option> 
     <!--selected="selected"表示选中该项-->
	<option value="上海" selected="selected">上海</option>
	<option value="广州">广州</option>
	<option value="杭州">杭州</option>
</select>

4.1.3 textarea元素

(文本域)
需要指定输入的区域位置大小

 <textarea cols="100" rows="5">    // 表示5行100列的区域可以输入内容，该元素没有value属性

4.1.4 示例及效果图如下

效果图

效果图代码如下：

<form action="" method="get">
			<table align="center">
				<caption>
					<h1>注册</h1></caption>
				<tr>
					<td align="right">用户名：</td>
					<td><input type="text" name="username" value="bluesky" /></td>
				</tr>
				<tr>
					<td align="right">密码：</td>
					<td><input type="password" name="password" /></td>
				</tr>
				<tr>
					<td align="right">确认密码：</td>
					<td><input type="password" name="confirmpwd" /></td>
				</tr>
				<tr>
					<td align="right">性别：</td>
					<td>
						<input type="radio" name="sex" value="男" />男
						<input type="radio" name="sex" value="女" checked="checked" />女
					</td>
				</tr>
				<tr>
					<td align="right">爱好：</td>
					<td>
						<input type="checkbox" name="hobby" value="篮球" checked="checked" />篮球
						<input type="checkbox" name="hobby" value="足球 " />足球
						<input type="checkbox" name="hobby" value="乒乓球 " />乒乓球
						<input type="checkbox" name="hobby" value="羽毛球 " />羽毛球
					</td>
				</tr>
				</tr>
				<tr>
					<td align="right">上传头像：</td>
					<td>
						<input type="file" name="upload" />
					</td>
				</tr>
				</tr>
				<tr>
					<td align="right">居住地：</td>
					<td>
						<select name="city">
							<option value="北京">北京</option>
							<option value="上海" selected="selected">上海</option>
							<option value="广州">广州</option>
							<option value="杭州">杭州</option>
						</select>
					</td>
				</tr>
				</tr>
				<tr>
					<td align="right">个人介绍：</td>
					<td>
						<textarea cols="100" rows="5">
			     </textarea>
					</td>
				</tr>
				</tr>
				<tr>
					<td></td>
					<td align="center">
						<input type="submit" value="注册" />
						<input type="reset" value="重置" />
					</td>
				</tr>
			</table>
</form>

第五节 HTML框架标签

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的缺点：
1. 开发人员必须同时跟踪更多的HTML文档
2. 很难打印整张页面

5.1 frameset

框架结构标签，把body删掉，使用framset代替body
框架结构标签（<frameset>）定义如何将窗口分割为框架
- 每个frameset定义了一系列行或列
- rows/columns的值规定了每行或每列占据屏幕的面积
实例1

<!--上下分割  上面20%,下面剩余部分-->
	<frameset rows="20%,*">
		<frame name="frame1" src="top.html">
		<frame name="frame2" src="bottom.html" />
		
	</frameset>

实例2

<!--左右分割-->
	
	<frameset cols="20%,*">
		<frame name="frame1" src="left.html" />
		<frame name="frame2" src="right.html" />
	</frameset>

5.2 frame

框架标签
frame标签定义了放置在每个框架中的 HTML 文档。

5.3 基本的注意事项

不能将<body></body>标签与<frameset></frameset>标签同时使用
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在<frame>标签中加入：noresize="noresize"
frameset的属性frameborder="1|0|yes|no"表示是否有边框border="1"表示边框的粗细bordercolor表示边框颜色

5.4 效果图及源代码示例

效果图

源代码示例：

top.html

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">

	</head>
	<body bgcolor="red">
		<h1>HTML的框架标签</h1>
	</body>
</html>

left.html

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	</head>
	<body bgcolor="#FFA600">
		<a href="http://www.baidu.com">官网</a><br/>
		<a href="https://www.java.com/zh_CN/">JAVA官网</a><br/>
		<a href="http://www.oracle.com">Oracle官网</a><br/>
	</body>
</html>

right.html

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <title>Title</title>
	</head>
	<body bgcolor="#00FFFF">
		<h1>正文内容</h1>
	</body>
</html>

content.html

<!--1.框架标签不能和body同时出现
	2.frameset: border去除框架标签的框 ，示例：border="0"
			         border="10px" bordercolor="yellow"
	3.frame框大小不变：两种情况: 
		   第一种：border ="0"
		   第二种： noresize="noresize"  不改变大小
	 备注:scrolling是否显示滚动条
			    yes  显示
			    no   不显示
			    auto  如果内容高度超过屏幕高度直接显示滚动，  
	4. frame 是框，内容使用src来填充，
			 定位显示到指定位置：  使用name属性
		例如：
			点击left.html的标签跳转内容显示在right.html		    
			 1.给right.html的frame添加name属性，方便定位。
			 2.在left.html中使用target目标定位，根据name名查找
		-->
	<frameset rows="200,*" border="10px" bordercolor="yellow">
		<frame src="top.html" scrolling="yes" noresize />
		<frameset cols="200,*">
			<frame src="left.html" scrolling="yes" noresize />
			<frame src="right.html" name="content" scrolling="yes" />
		</frameset>
	</frameset>

第六节 HTML的其它标签和特殊字符

6.1 其它标签

        <!--该网页的关键字-->
		<meta name="keywords" content="keyword1,keyword2,keyword3">
		<!--该网页的描述-->
		<meta name="description" content="this is my page">
		 <!--该网页的编码-->
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">  html4.01
		 <!--页面自动跳转,2秒后跳转到百度-->
		<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
		 <!--该网页的编码-->
         <meta charset="UTF-8">  html5
        <!-- href：引入css文件的地址-->
		<link rel="stylesheet" type="text/css" href="./styles.css">
		<!--src：js的文件地址-->
		<script type="text/javascript" src=""></script>

6.2 特殊字符

代码	功能
`<`	小于号
`>`	大于号
`&`	与字符
`"`	引号
`®`	己注册
`©`	版权
`™`	商标
` `	空格

效果图如下：

总结

Html: HyperText Markup Language 超文本标记语言，作用:制作网页
基本结构:

<!DOCTYPE html>
<html>
	<head>
		<mete charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

基本标签：
1. 结构标签：html head title body
2. 排版：p br hr
3. 标题：h1-h6
4. 容器：div span
5. 列表：ul ol dl
6. 表格：table
7. 图片：img
8. 超链接：a
9. 格式化标签
表单标签：form
1. action：表单提交的服务器地址
2. method：提交方式 get post
3. enctype：编码类型
表单元素
- input
  type: text、password、radio、checkbox、button、submit、reset、image、file、hidden、email
- select：下列列表
- textarea：文本域
框架标签
- frameset
  rows、cols
- frame
内联框架：iframe
其他标签
meta、link、script
特殊字符

作业题

实现一个调查问卷,要求尽可能的使用上所学过的各种标签

面试题

DOCTYPE声明的作用是什么？

声明位于位于HTML文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

HTML5的Doctype是，现在的浏览器都支持这个写法，不需要再像HTML4一样区分三种Doctype（严格、松散、框架）了。因为HTML4基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型，而HTML5 不基于 SGML，因此不需要引用DTD，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

作者：李轻舟
链接：https://www.jianshu.com/p/aed37c091ac4
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

锚点的作用是什么？如何创建锚点？

锚点是文档中某行的一个记号，类似于书签，用于链接到文档中的某个位置。当定义了锚点后，我们可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
在使用<a>元素创建锚点时，需要使用name属性为其命名，代码如下所示：

<a name=”anchorname1”>锚点一</a>

然后就可以创建链接，直接跳转到锚点，代码如下所示：

<a href=”#anchorname1”>回到锚点一</a>

————————————————
版权声明：本文为CSDN博主「泠泠在路上」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012396955/article/details/53909390

表单向服务器提交数据有几种方式？这些方式有什么区别？

将表单数据发送给服务器的常用方式有两种：Get和Post。

浏览器发送给服务器的HTTP请求分为：请求头（header）和请求主体（body）两部分。
其中，必须包含头部分，用于指定发送请求的方式、目的地以及其他关键信息；
而主体是可选的。
在头数据和主体数据之间用一个空白行来隔开。
比如，需要发送请求到页面GetStockPrice.php，且需要附带数据Symbol=MSFT。那么如果使用Get方式发送数据，则简化后的请求数据内容如下所示：
GET /Trading/GetStockPrice.aspx?Symbol=MSFT HTTP/1.1
Host: localhost
如果使用Post方式发送数据，则简化后的请求数据内容如下所示：
POST /Trading/GetStockPrice.aspx HTTP/1.1
Host: localhost
Content-Type: application/x-www-form-urlencoded
Content-Length: 11
Symbol=MSFT

由此可见，两种方式的区别主要在于发送数据方式不同。
使用Get方式向服务器发送表单数据时，表单数据将附加在URL属性的末端；采用POST方法发送数据时，数据会放置在主体中发送。

————————————————
版权声明：本文为CSDN博主「泠泠在路上」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u012396955/article/details/53909936

本文链接：https://blog.csdn.net/qq_42646672/article/details/103772583

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

稀疏编码的数学基础与理论分析-程序员宅基地

文章浏览阅读290次，点赞8次，收藏10次。1.背景介绍稀疏编码是一种用于处理稀疏数据的编码技术，其主要应用于信息传输、存储和处理等领域。稀疏数据是指数据中大部分元素为零或近似于零的数据，例如文本、图像、音频、视频等。稀疏编码的核心思想是将稀疏数据表示为非零元素和它们对应的位置信息，从而减少存储空间和计算复杂度。稀疏编码的研究起源于1990年代，随着大数据时代的到来，稀疏编码技术的应用范围和影响力不断扩大。目前，稀疏编码已经成为计算...

EasyGBS国标流媒体服务器GB28181国标方案安装使用文档-程序员宅基地

文章浏览阅读217次。EasyGBS - GB28181 国标方案安装使用文档下载安装包下载，正式使用需商业授权, 功能一致在线演示在线API架构图EasySIPCMSSIP 中心信令服务, 单节点, 自带一个 Redis Server, 随 EasySIPCMS 自启动, 不需要手动运行EasySIPSMSSIP 流媒体服务, 根..._easygbs-windows-2.6.0-23042316使用文档

【Web】记录巅峰极客2023 BabyURL题目复现——Jackson原生链_原生jackson 反序列化链子-程序员宅基地

文章浏览阅读1.2k次，点赞27次，收藏7次。2023巅峰极客 BabyURL之前AliyunCTF Bypassit I这题考查了这样一条链子：其实就是Jackson的原生反序列化利用今天复现的这题也是大同小异，一起来整一下。_原生jackson 反序列化链子

一文搞懂SpringCloud，详解干货，做好笔记_spring cloud-程序员宅基地

文章浏览阅读734次，点赞9次，收藏7次。微服务架构简单的说就是将单体应用进一步拆分，拆分成更小的服务，每个服务都是一个可以独立运行的项目。这么多小服务，如何管理他们？(服务治理注册中心[服务注册发现剔除])这么多小服务，他们之间如何通讯？这么多小服务，客户端怎么访问他们？(网关)这么多小服务，一旦出现问题了，应该如何自处理？(容错)这么多小服务，一旦出现问题了，应该如何排错?(链路追踪)对于上面的问题，是任何一个微服务设计者都不能绕过去的，因此大部分的微服务产品都针对每一个问题提供了相应的组件来解决它们。_spring cloud

Js实现图片点击切换与轮播-程序员宅基地

文章浏览阅读5.9k次，点赞6次，收藏20次。Js实现图片点击切换与轮播图片点击切换<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/ja..._点击图片进行轮播图切换

tensorflow-gpu版本安装教程（过程详细）_tensorflow gpu版本安装-程序员宅基地

文章浏览阅读10w+次，点赞245次，收藏1.5k次。在开始安装前，如果你的电脑装过tensorflow，请先把他们卸载干净，包括依赖的包（tensorflow-estimator、tensorboard、tensorflow、keras-applications、keras-preprocessing），不然后续安装了tensorflow-gpu可能会出现找不到cuda的问题。cuda、cudnn。..._tensorflow gpu版本安装

随便推点

物联网时代权限滥用漏洞的攻击及防御-程序员宅基地

文章浏览阅读243次。0x00 简介权限滥用漏洞一般归类于逻辑问题，是指服务端功能开放过多或权限限制不严格，导致攻击者可以通过直接或间接调用的方式达到攻击效果。随着物联网时代的到来，这种漏洞已经屡见不鲜，各种漏洞组合利用也是千奇百怪、五花八门，这里总结漏洞是为了更好地应对和预防，如有不妥之处还请业内人士多多指教。0x01 背景2014年4月，在比特币飞涨的时代某网站曾经..._使用物联网漏洞的使用者

Visual Odometry and Depth Calculation--Epipolar Geometry--Direct Method--PnP_normalized plane coordinates-程序员宅基地

文章浏览阅读786次。A. Epipolar geometry and triangulationThe epipolar geometry mainly adopts the feature point method, such as SIFT, SURF and ORB, etc. to obtain the feature points corresponding to two frames of images. As shown in Figure 1, let the first image be and th_normalized plane coordinates

开放信息抽取(OIE)系统（三）-- 第二代开放信息抽取系统(人工规则, rule-based, 先抽取关系)_语义角色增强的关系抽取-程序员宅基地

文章浏览阅读708次，点赞2次，收藏3次。开放信息抽取(OIE)系统（三）-- 第二代开放信息抽取系统(人工规则, rule-based, 先关系再实体)一.第二代开放信息抽取系统背景第一代开放信息抽取系统(Open Information Extraction， OIE， learning-based, 自学习, 先抽取实体)通常抽取大量冗余信息，为了消除这些冗余信息，诞生了第二代开放信息抽取系统。二.第二代开放信息抽取系统历史第二代开放信息抽取系统着眼于解决第一代系统的三大问题: 大量非信息性提取（即省略关键信息的提取）、_语义角色增强的关系抽取