Html学习笔记

最新推荐文章于 2022-11-22 11:28:18 发布

zz60708320

最新推荐文章于 2022-11-22 11:28:18 发布

阅读量225

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVA_Web

本文链接：https://blog.youkuaiyun.com/zz60708320/article/details/83310065

JAVA_Web 专栏收录该内容

4 篇文章

订阅专栏

Html（超文本标记语音）

1、Html是通过标签来定义的语言
2、代码不区分大小写
3、由<html>开始</html>结束。里面由头部分<head></head>和体部分<body></body>两部分组成（头部标签最先加载）

操作思想
为了操作数据，都需要对数据进行不同标签的封装，通过标签中的属性对封装的数据进行操作。标签就相当于一个容器。对容器中的数据进行操作，就是在再不断改变容器的属性值。

转义字符：以 & 开始 ; 结束
列表标签：<dl>

 <dl>
       <dt>:上层项目
       	<dd>:下层项目	//dd有自动缩进的效果

有序和无序的项目列表
有序:<ol>
无序:<ul>
无论有序还是无序，条目的封装用的都是<li>，而且他们都有缩进效果
图像标签：<img>
src属性：图片路径；
alt属性：图片说明文字（光标放上去可显示的文字）
图像地图：<map> //仅作了解
应用：当要在图像中选取某一部分连接的时候。如：中国地图每个省所对应的区域。
map标签要和img标签联合使用（点击图片不同区域有不同效果）
表格标签：<table>
标题标签<caption>,给表格提供标题。
表头标签<th>,一般对表格的第一行或者第一列进行格式化，就是粗体显示。
行标签：<tr>
单元格标签：<td>,加载行标签的里面。可以简单理解为先有行，在行中加入单元格。
格式：

    <table border="1" style="width:40%"><!—width值为百分比可以让表格的宽度随浏览器窗口的大小变化——>
        	<caption>表格标题</caption>
        	<tr><!--第一行-->
        		<th>姓名</th>
        		<th>年龄</th>
        	</tr>
        	<tr algin="center"><!--第二行-->
        		<td>张三</td>
        		<td>23</td>
        	</tr>
    </table>

Html中有width等熟悉，而Html5中把 height 或者 width 属性统一放到 style 属性或者CSS中。
※ 做不规则表格时，可用colspan/rowspan属性来进行单元格的合并（用于th、td中）

<th colspan=2>姓名</th>	//合并 2 列
<th rowspan=2>姓名</th>	//合并 2 行

表格默认标签级别(不定义也存在)

<table>
	<tbody>
	</tbody>
</table>

超链接标签：<a>
· 当有了href属性才会有点击效果。
· 如果在href值中没有指定过任何协议（如http），解析时是按照默认的协议来解析该值的，默认为file协议。根据协议的不同，超链接点击将出现不同效果
· 取消默认的点击效果方式:

两种用法：
1、超链接<a href="">

<a href="https://www.baidu.com/" target="_blank">百度</a>
<!--href属性值可以是url，也可以是本地文件。target属性是指定在哪个窗口或者帧中打开。-->

2、定位标记（锚）<a name="">
一般在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷。
注意：定位标记要和超链接结合使用才有效。

<a name="标记">标记位置</a>
<p>......<!--很多空行以至于网页过长的效果-->
<a href="#标记"> 返回标记位置</a>
注意：使用定位标记时一定在href值开始加入#标记符，否则会启动文件协议。

框架标签 : <frameset>
注：框架标签不可以放到<body>，一般为了代码的可读性，会到<head>和<body>之间。

<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>
<!--为frame起名字，是为了方便操作，可用超链接的target属性指定某个frame为打开窗口-->
该效果为上下两层（上30%，下70%），下层再分为左右两层（左30%，右70%）

画中画标签:<iframe>

<iframe src="">画中画没显示，因为浏览器不支持iframe标签，此时显示该文字</iframe>
框架标签现在不常用，布局常用div+css+table。

表单标签：<form>
表单标签是最常用的标签，用于与服务器端的交互（注意，实际开发时每个标签都必须含name（键）和value（值）属性）。
<input>: 输入标签：接收用户输入的信息
其中type属性指定输入标签的类型
1）文本框 text。输入的文本信息直接显示在框中。
2）密码框 password。输入的文本一圆点或者星号的形式显示。
3）单选框 radio（checked="checked"为默认选中）。如：性别选择
（通常需用分组，即指定name属性，相同的name属性为一个分组，一个分组只可选定某一个单选框）
4）复选框 checkbox。如：兴趣选择
5）隐藏字段 hidden。在页面不显示，但在提交时随其他内容一起提交
6）提交按钮 submit。用于提交表单的内容（提交服务端）
7）重置按钮 reset。用于清空用户已输入内容
均可通过value属性自定义按钮文字。
8）选择文件 file：用与选择本地文件
9）图片组件 image：点击图片可以提交表单内容（即图片按钮）
10）按钮 button：通过onclick注册点击事件

<select>:下拉菜单（每个下拉菜单控件都需要结合option标签使用,通过selected="selected"默认选定option）

<select name="city">
				<option value="null">--请选择--</option>
				<option value="GD">广东</option>
				<option value="FJ">福建</option>
				</select>

<textarea>:文本区域

表单格式化
例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="">
	<table>
		<caption>注册</caption>
		<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="man">男</input>
				<input type="radio" name="sex" value="woman">女</input>
			</td>
		</tr>
		<tr>
			<td>爱好：</td>
			<td>
				<input type="checkbox" name="hoy" value="basketball">篮球</input>
				<input type="checkbox" name="hoy" value="football">足球</input>
				<input type="checkbox" name="hoy" value="PPball">乒乓球</input>
			</td>
		</tr>
		<tr>
			<td>城市：</td>
			<td>
				<select name="city">
					<option>--请选择--</option>
					<option value="SZ">深圳</option>
					<option value="GZ">广州</option>
					<option value="JM">江门</option>
				</select>
			</td>
		</tr>
		<tr>
			<td>
				<input type="submit" value="注册"/>
			</td>
			<td>
				<input type="reset" value="重置"/>
			</td>
		</tr>
	
	</table>
	</form>
</body>
</html>

form与服务端的交互
form的属性：
）action：指定服务器端的位置。
）method：get / post
不填默认为 get
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）

如果在客户端进行增强型校验（只要有一个组件内容是错误的，是无法继续提交的。只有全对才可以提交）
问：服务端接收数据后，还需要校验吗？
答：要，为了安全性（客户端可以直接在地址栏输入数据提交，也可通过超链接绑定url提价，还可以修改url源码进行提交）

问：如果服务端做了增强型的校验，客户端还要校验码？
答：要，因为要提高用户的上网体验效果，减轻服务器端的压力（客户端与服务器端发送数据需要时间）

头标签

头标签都放在<head></head>头部分之间。包括title、base、meta、link
<title>:指定浏览器的标题栏显示的内容
<base>:href属性：指定网页中所有超级链接的目录。注意值的结尾处一定要用 / 表示目录。只能作用域相对路径的超链接文件。
<meta>:name属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。
http-equiv属性：模拟HTTP协议的响应消息头。

例:<meta http-equiv="refresh" content="3;url=http://www.sina.com.cn"/>
表示打开此页面3秒后自动转到新浪页面。

<link>:rel属性：描述目标文档与当前文档的关系。
type属性：文档类型
media：指定目标文档在哪种设备上起作用

其他小标签
<b>：加粗
<i>：斜体
<u>：下划线
<sub>：下标
<sup>：上标
<marquee>：动画标签
<pre>:保留文本在代码中的格式

XHTML和XML

XHTML是可扩展的超文本语言，与HTML相比代码结构更为严谨，是基于XML的一种应用。
XML：是可扩展标记语言
与HTML区别：
HTML标签都是固定的，XML标签是可以自定义的。
XML是对数据信息的描述；HTML是数据显示的描述。
XML代码规定的更为严格

div、span、p标签

div、span标签无具体含义，用于封装区域
p标签标示一个段落
· div标签后有换行
· span标签后有空格
· p标签前有空行
标签分为两大类
1、块级标签（元素）：标签结束后都有换行：div、p、dl、table、title…
2、行内标签（元素）：标签结束后没有换行：font、span、img、input…