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

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

智能推荐

JVM在线分析-解决问题的工具一(jinfo,jmap,jstack)_jmap 在线分析-程序员宅基地

文章浏览阅读807次。扩展。_jmap 在线分析

台式计算机cpu允许温度,玩游戏cpu温度多少正常（台式电脑夏季CPU一般温度多少）...-程序员宅基地

文章浏览阅读1.1w次。随着炎热夏季的到来，当玩游戏正爽的时候，电脑突然死机了，自动关机了，是不是有想给主机一脚的冲动呢？这个很大的原因是因为CPU温度过高导致的。很多新手玩家可能都有一个疑虑，cpu温度多少以下正常？有些说是60，有些说是70，到底多高CPU温度不会死机呢？首先我们先看看如何查看CPU的温度。下载鲁大师并安装，运行鲁大师软件，即可进入软件界面，并点击温度管理，即可看到电脑各个硬件的温度。鲁大师一般情况下..._台式机玩游戏温度多少正常

小白自学Python日记 Day2-打印打印打印！_puthon打印任务收获-程序员宅基地

文章浏览阅读243次。Day2-打印打印打印！我终于更新了！（哭腔）一、最简单的打印最最简单的打印语句： print(“打印内容”)注意：python是全英的，符号记得是半角下面是我写的例子：然后进入power shell ，注意：你需要使用cd来进入你保存的例子的文件夹，保存时名字应该取为xxx.py我终于知道为什么文件夹取名都建议取英文了，因为进入的时候是真的很麻烦！如果你没有进入正确的文件夹..._puthon打印任务收获

Docker安装：Errors during downloading metadata for repository ‘appstream‘:_"cenerrors during download metadata for repository-程序员宅基地

文章浏览阅读1k次。centos8问题参考CentOS 8 EOL如何切换源？ - 云服务器 ECS - 阿里云_"cenerrors during download metadata for repository \"appstream"

尚硅谷_谷粒学苑-微服务+全栈在线教育实战项目之旅_基于微服务的在线教育平台尚硅谷-程序员宅基地

文章浏览阅读2.7k次，点赞3次，收藏11次。SpringBoot+Maven+MabatisPlusmaven在新建springboot项目引入RELEASE版本出错maven在新建springboot项目引入RELEASE版本出错maven详解maven就是通过pom.xml中的配置，就能够从仓库获取到想要的jar包。仓库分为：本地仓库、第三方仓库(私服)、中央仓库springframework.boot:spring-boot-starter-parent:2.2.1.RELEASE’ not found若出现jar包下载不了只有两_基于微服务的在线教育平台尚硅谷

java 实现数据库备份_java数据备份-程序员宅基地

文章浏览阅读1k次。数据库备份的方法第一种：使用mysqldump结合exec函数进行数据库备份操作。第二种：使用php+mysql+header函数进行数据库备份和下载操作。下面 java 实现数据库备份的方法就是第一种首先我们得知道一些mysqldump的数据库备份语句备份一个数据库格式：mysqldump -h主机名 -P端口 -u用户名 -p密码 --database 数据库名 ..._java数据备份

随便推点

Discuz!代码大全-程序员宅基地

文章浏览阅读563次。1.[ u]文字：在文字的位置可以任意加入您需要的字符，显示为下划线效果。2.[ align=center]文字：在文字的位置可以任意加入您需要的字符，center位置center表示居中，left表示居左，right表示居右。5.[ color=red]文字：输入您的颜色代码，在标签的中间插入文字可以实现文字颜色改变。6.[ SIZE=数字]文字：输入您的字体大小，在标签的中间插入文..._discuzcode 大全

iOS NSTimer定时器-程序员宅基地

文章浏览阅读2.6k次。iOS中定时器有三种，分别是NSTimer、CADisplayLink、dispatch_source，下面就分别对这三种计时器进行说明。一、NSTimerNSTimer这种定时器用的比较多，但是特别需要注意释放问题，如果处理不好很容易引起循环引用问题，造成内存泄漏。1.1 NSTimer的创建NSTimer有两种创建方法。方法一：这种方法虽然创建了NSTimer，但是定时器却没有起作用。这种方式创建的NSTimer，需要加入到NSRunLoop中，有NSRunLoop的驱动才会让定时器跑起来。_ios nstimer

Linux常用命令_ls-lmore-程序员宅基地

文章浏览阅读4.8k次，点赞17次，收藏51次。Linux的命令有几百个，对程序员来说，常用的并不多，考虑各位是初学者，先学习本章节前15个命令就可以了，其它的命令以后用到的时候再学习。1、开机物理机服务器，按下电源开关，就像windows开机一样。在VMware中点击“开启此虚拟机”。2、登录启动完成后，输入用户名和密码，一般情况下，不要用root用户..._ls-lmore

MySQL基础命令_mysql -u user-程序员宅基地

文章浏览阅读4.1k次。1.登录MYSQL系统命令打开DOS命令框shengfen，以管理员的身份运行命令1：mysql -u usernae -p password命令2：mysql -u username -p password -h 需要连接的mysql主机名(localhost本地主机名)或是mysql的ip地址（默认为：127.0.0.1）-P 端口号（默认：3306端口）使用其中任意一个就OK,输入命令后DOS命令框得到mysql>就说明已经进入了mysql系统2. 查看mysql当中的._mysql -u user

LVS+Keepalived使用总结_this is the redundant configuration for lvs + keep-程序员宅基地

文章浏览阅读484次。一、lvs简介和推荐阅读的资料二、lvs和keepalived的安装三、LVS VS/DR模式搭建四、LVS VS/TUN模式搭建五、LVS VS/NAT模式搭建六、keepalived多种real server健康检测实例七、lvs持久性工作原理和配置八、lvs数据监控九、lvs+keepalived故障排除一、LVS简介和推荐阅读的资料学习LVS+Keepalived必须阅读的三个文档。1、《Keepalived权威指南》下载见http://..._this is the redundant configuration for lvs + keepalived server itself

Android面试官，面试时总喜欢挖基础坑，整理了26道面试题牢固你基础！(3)-程序员宅基地

文章浏览阅读795次，点赞20次，收藏15次。AIDL是使用bind机制来工作。java原生参数Stringparcelablelist & map 元素需要支持AIDL其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。下图是我进阶学习所积累的历年腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题，博主还把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节。