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

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

智能推荐

vue引入原生高德地图_前端引入原生地图-程序员宅基地

文章浏览阅读556次，点赞2次，收藏3次。由于工作上的需要，今天捣鼓了半天高德地图。如果定制化开发需求不太高的话，可以用vue-amap，这个我就不多说了，详细就看官网 https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install然而我们公司需要英文版的高德，我看vue-amap中好像没有这方面的配置，而且还有一些其他的定制化开发需求，然后就只用原生的高德。其实原生的引入也不复杂，但是有几个坑要填一下。1. index.html注意，引入的高德js一定要放在头部而_前端引入原生地图

ViewGroup重写大法（一）-程序员宅基地

文章浏览阅读104次。本文介绍ViewGroup重写，我们所熟知的LinearLayout，RelativeLayout，FrameLayout等等，所有的容器类都是ViewGroup的子类，ViewGroup又继承View。我们在熟练应用这些现成的系统布局的时候可能有时候就不能满足我们自己的需求了，这是我们就要自己重写一个容器来实现效果。ViewGroup重写可以达到各种效果，下面写一个简单的重写一个Vi..._viewgroup 重写

Stm32学习笔记，3万字超详细_stm32笔记-程序员宅基地

文章浏览阅读1.8w次，点赞279次，收藏1.5k次。本文章主要记录本人在学习stm32过程中的笔记，也插入了不少的例程代码，方便到时候CV。绝大多数内容为本人手写，小部分来自stm32官方的中文参考手册以及网上其他文章；代码部分大多来自江科大和正点原子的例程，注释是我自己添加；配图来自江科大/正点原子/中文参考手册。笔记内容都是平时自己一点点添加，不知不觉都已经这么长了。其实每一个标题其实都可以发一篇，但是这样搞太琐碎了，所以还是就这样吧。_stm32笔记

CTS(13)---CTS 测试之Media相关测试failed 小结（一）_mediacodec框架 cts-程序员宅基地

文章浏览阅读1.8k次。Android o CTS 测试之Media相关测试failed 小结（一）CTSCTS 即兼容性测试套件，CTS 在桌面设备上运行，并直接在连接的设备或模拟器上执行测试用例。CTS 是一套单元测试，旨在集成到工程师构建设备的日常工作流程（例如通过连续构建系统）中。其目的是尽早发现不兼容性，并确保软件在整个开发过程中保持兼容性。CTS 是一个自动化测试工具，其中包括两个主要软件组件：CTS tra..._mediacodec框架 cts

chosen.js插件使用，回显，动态添加选项-程序员宅基地

文章浏览阅读4.5k次。官网：https://harvesthq.github.io/chosen/实例化$(".chosen-select").chosen({disable_search_threshold: 10});赋值var optValue = $(".chosen-select").val();回显1.设置回显的值$(".chosen-select").val(“opt1”);2.触发cho..._chosen.js

C++ uint8_t数据串如何按位写入_unit8_t 集合赋值 c++-程序员宅基地

文章浏览阅读1.9k次。撸码不易，网上找不到，索性自己写，且撸且珍惜！void bitsWrite(uint8_t* buff, int pos, int size, uint32_t value){ uint32_t index[] = { 0x80000000, 0x40000000, 0x20000000, 0x10000000, 0x8000000, 0x4000000, 0x2000000, 0x1000000, 0x800000, 0x400000, 0_unit8_t 集合赋值 c++

随便推点

Javaweb框架思维导图_javaweb框架图-程序员宅基地

文章浏览阅读748次。javaweb知识点_javaweb框架图

adb的升级与版本更新_adb iptabls怎么升级-程序员宅基地

文章浏览阅读1.1w次，点赞3次，收藏16次。adb是没有自动升级的命令的，如果想要更新adb的版本，我们可以在网上找到自己想要的版本进行更新给大家提供几个版本https://pan.baidu.com/s/1yd0dsmWn5CK08MlyuubR7g&shfl=shareset 提取码: 94z81、下载解压后我们可以找到下面几个文件，并复制2、找到adb安装的文件夹下的platform-tools文件夹，我这里是..._adb iptabls怎么升级

微信苹果版删除所有的聊天记录的图文教程_mac微信怎么删除聊天列表-程序员宅基地

文章浏览阅读3.8k次。很多用户可能都知道怎么在Windows系统上删除微信的聊天记录，那么苹果电脑上的微信软件怎么删除所有的聊天记录呢？下面小编就专门来给大家讲下微信mac版删除所有的聊天记录的图文教程。点击后会弹出提示窗口，点击这里的确认按钮就可以将其清理掉了。在这里选择要清理的数据，然后点击下方右边的清理按钮就行了。在mac上打开微信后，点击左下角的横线图标。然后再点击这里的管理微信聊天数据按钮。打开了设置窗口，点击上方的“通用”。在这里点击下方的前往清理按钮。点击弹出菜单里的“设置”。_mac微信怎么删除聊天列表

【报错笔记】数据类型转换时报错：Request processing failed；nested exception is java.lang.NumberFormatException:..._request processing failed; nested exception is jav-程序员宅基地

文章浏览阅读7.7k次。数据类型转换时报错：Request processing failed;nested exception is java.lang.NumberFormatException:For input String “20151512345”报错原因：数字格式异常，接着后面有 For input string: “201515612343” 提示，这就告诉我们你当前想把 “201515612343” 转换成数字类型时出错了。解决方案：使用2015151612343这个数字太大了，所以直接使用string_request processing failed; nested exception is java.lang.numberformatexcepti

qml 自定义消息框_Qt qml 自定义消息提示框-程序员宅基地

文章浏览阅读387次。版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本文链接：https://blog.csdn.net/a844651990/article/details/78376767Qt qml 自定义消息提示框QtQuick有提供比较传统的信息提示框MessageDialog，但是实际开发过程并不太能满足我们的需求。下面是根据controls2模块中..._qml 自定义 messagedialog

Redis.conf 默认出厂内容_默认出厂的原始redis.conf文件全部内容-程序员宅基地

文章浏览阅读599次。# Redis configuration file example.## Note that in order to read the configuration file, Redis must be# started with the file path as first argument:## ./redis-server /path/to/redis.conf # Note on units: when memory size is needed, it is pos._默认出厂的原始redis.conf文件全部内容