Java学习笔记-Day43 HTML标签

 
 

一、布局标签

在 html4 中用于布局的标签很少，在 html5 中扩展了部分的布局标签，增加了代码的可读性。
 

1、p标签

 
p标签又被称为段落标签，p是段落（paragraph）的缩写，包裹的内容为一个段落的文字或修饰文字的文字标签，默认自带内边距，是块级元素。

	<p>段落标签p>

 

2、div标签

 
div标签一般配合css对网页内大块区域进行布局，是块级元素。

	<div>div标签div>

 

3、span标签

 
span标签是使用来组合文档中的行内元素，以便使用样式来对它们进行格式化。span标签是内联元素。

	<span>span标签span>

 

二、列表标签

 
列表标签是一组样式相同、功能相同的元素的集合。
 

1、有序列表

 
有序列表用来显示有顺序的列表数据信息，可显示顺序号。

• ol标签：有序列表，是块级元素。

• li标签：列表项，是块级元素。

• type属性：规定列表的项目符号的类型，取值范围：A、a、1、i、Ι。

	<ol type="a">
		<li>员工管理li>
		<li>部门管理li>
		<li>考勤管理li>
	ol>

 

2、无序列表

 
无序列表：用来显示无顺序的列表数据信息，可以设置列表符号。

• ul标签：无序列表，是块级元素。

• li标签：列表项，是块级元素。

• type属性：列表的明细符号类型，取值范围 circle(空心圆)、disc(实心圆)、square(正方形)。

	<ul type="circle">
		<li>员工管理li>
		<li>部门管理li>
		<li>考勤管理li>
	ul>

 

3、自定义列表

 
自定义列表：用来表示一组无序的、具备标题的列表数据。

• dl标签：列表容器标签，是块级元素。

• dt标签：列表标题，是块级元素。

• dd标签：列表内容，是块级元素。

	<dl>
		<dt>标题1dt>
		<dd>内容1dd>
		<dt>标题2dt>
		<dd>内容2dd>
	dl>

 

三、文本标签

 
文本标签：用来修饰小段用于阅读的文字的标签。

文本类标签一般只修饰小段的文字。
文本类标签只能阅读，不能点击。
文本类标签可以提升SEO。
 

1、内联型文本标签

 
（1）u标签：内容默认以下划线方式显示。

	<u>文本标签u>

（2）strong标签：内容默认以加粗的方式显示。

	<strong>文本标签strong>

（3）em标签：内容默认以倾斜的方式显示。

	<em>文本标签em>

 

2、块级文本标签

 
h1—h6：标题文字标签，从h1到h6默认字体大小依次变小。

h标签在搜索引擎搜索时优先级别较高。

当网络不好等原因导致css无法加载时，使用标题标签具备默认样式。

	<h1>标题1h1>
	<h2>标题2h2>
	<h3>标题3h3>
	<h4>标题4h4>
	<h5>标题5h5>
	<h6>标题6h6>

 

四、框架标签

 
iframe标签：该标签可以在当前网页上引入其他网页资源（支持引入非同源网页）。

属性	值	描述
align	Left、Right、Top、Middle、bottom	规定如何根据周围的元素来对齐此框架（不建议使用）
src	URL	规定在iframe中显示的文档的URL
frameBorder	1、0	规定是否显示框架周围的边框
scrolling	Yes 、No、auto	规定是否在iframe中显示滚动条
width/height	像素px或者百分比	定义iframe的宽度/高度

	<iframe src="https://www.sogou.com" width="500px" height="300px" name="ifr" scrolling="yes">iframe>
	<a href="https://www.baidu.com" target="ifr">baidua>
	<a href="https://www.360.com"  target="ifr">360a>

 

 

五、超链接标签

 

1、a标签的使用

 
超链接标签又称为a标签，通过a标签可以访问（链接）到其他网页资源。

	<a href="https://www.baidu.com">百度a>

注意：浏览器会记录访问地址，并按照是否被访问过显示链接。未访问的链接带有下划线且是蓝色的，访问过的链接带有下划线且是紫色的，活动链接带有下划线且是红色的。
 

2、绝对路径与相对路径

 
href的取值可以为绝对路径或者相对路径。
 

2.1、绝对路径

 
绝对路径：完整的网页访问路径，与当前网页位置无关。

域名：映射ip地址的字符，便于记忆。

端口：web服务器的端口，浏览器默认访问端口80。

站点：网络站点的简称，网页资源的根目录，在web服务器中可通过配置缺省此项。
 

2.2、相对路径

 
相对路径：需要访问的网页资源与当前网页资源路径的相对位置。

符号	含义
.	代表目前所在的目录
. .	代表上一层目录
/	web服务器的根目录

	<a href="../body.html">
		使用相对路径访问本域内的网页资源
	a>

 

3、锚点

 
锚点是一种超链接，又叫命名锚记。在网页中的作用是快速定位器。
 
标签id为jump的段落标签：

	<p id="jump">区域内容p>

（1）锚点的声明（点击后迅速定位到网页指定位置）：

	<a href="#jump">锚点a> 

（2）跨网页的锚点访问：

	<a href="body.html#jump">跨网页锚点a> 

 
使用id与name声明锚点的区别：在老版本浏览器中最初都是使用name作为锚点位置的声明方式。网页中name属性的取值不唯一，因此造成锚点定位不准，所以后期浏览器都支持使用id作为锚点声明位置。Html5规范中已经声明取消name的锚点声明方式，建议使用id。
 

4、链接到第三方资源

 
在网页中可以通过超链接访问非网页资源，访问的前提是当前系统安装了相关的处理程序。

	<a href="mailto:[email protected]">邮件a>
	<a href="tel:13815132010">电话a>
	<a href="sms:13815132010">短信a>
	<a href="a.mp4">视频a>

 

5、链接的打开方式

 
被访问的网页以哪种方式打开，使用 target 属性设置。
 
target属性的取值范围：

① _blank：在新窗口中打开链接文档

② _self：默认打开方式，在当前浏览器窗口中打开被链接文档。

③ _parent：在父框架中打开被链接文档。

④ _top：在当前网页的最顶层框架中打开被链接文档。

⑤ framename：在指定的框架中打开被链接文档。
 

七、图片标签

 

1、img标签的使用

 
图片标签又称 img 标签，用于在网页上显示图片。

属性值	描述
src	图片路径
width	图片宽度（默认图片实际宽度）
height	图片高度（默认图片实际高度）
alt	在图片无法显示时的代替文本
usemap	把图像设置为客户端图像映射
title	当鼠标悬浮在图片上时显示的文字

	<img src="./img/1.jpg" width="100px" height="100px" title="图片"/>

 

2、src与href的区别

 
src 与 href 的区别：不同标签使用 src 与 href 引用当前网页之外的资源的主要区别如下。

• src（ source ）的值是外部资源的访问路径，在请求src资源时会将其指向的资源下载并应用到当前文档中，此时外部资源作为当前文档的一部分（引入），一般用作非文本引入方式。

• href 表示超文本引用（hypertext reference），在使用href请求外部资源时，会下载外部资源，同时当前网页读取外部资源的内容（引用），一般用作文本引入方式

注意：Link、a标签使用href，其余使用src。
 

九、表格标签

 

1、表格的基本结构

 
表格是以多行、多列来显示信息的方式。

完整表格的组成：
 

2、表格的基本属性

 
表格的标签组成：

（1）table标签：表格标签。

（2）caption标签：表格标题。

（3）thead标签：表头单元格容器。

（4）tbody标签：表体单元格容器。

（5）tfoot标签：表尾单元格容器。

（6）tr标签：表格中的行。

（7）th标签：表头中的单元格。

（8）td标签：表体或表尾单元格。

	
	<table border="1" cellspacing="0" cellpading="10" width="50%">
		<caption><h2>员工信息h2>caption>
		<thead>
			<tr>
				<th>编号th>
				<th>姓名th>
				<th>年龄th>
				<th>性别th>
				<th>职位th>
			tr>
		thead>
		<tbody align="center">
			<tr>
				<td>A001td>
				<td>小明td>
				<td>25td>
				<td>男td>
				<td>开发工程师td>
			tr>
			<tr>
				<td>A002td>
				<td>小雷td>
				<td>26td>
				<td>男td>
				<td>开发工程师td>
			tr>
			<tr>
				<td>A003td>
				<td>小红td>
				<td>27td>
				<td>女td>
				<td>销售人员td>
			tr>
			<tr>
				<td>A004td>
				<td>康康td>
				<td>28td>
				<td>男td>
				<td>开发工程师td>
			tr>
		tbody>
		<tfoot align="center">
			<tr>
				<td colspan="5"><strong>统计：共4人strong>td>
			tr>
		tfoot>
	table>

注意：在表格使用中，可以省略表头thead、tbody、tfoot的声明，此时浏览器将全部的行列都作为tbody的子元素。

表格table的私有属性说明：

（1）border(边框)属性：border=“number”。

（2）background(背景)属性： background =“背景图片”。

（3）bgcolor(背景颜色)属性：bgcolor = “颜色”。

（4）width、height属性：width= “300”height=“200”。
 

3、表格的合并

 
表格的合并包含行合并、列合并。

行合并：学生成绩。

列合并：张三（要去掉下面对应的列）。
 

4、表格对齐方式

 
表格提供的对齐与填充属性：

（1）align:表格的文字水平位置，

元素的属性，可选值包括left、center、right。

（2）valign:表格内文字的垂直位置，元素的属性，valign可选值包括top、 middle、bottom。

（3） cellspacing(间距)属性:设置单元格之间的距离。

（4）cellpadding(填充)属性:设置单元格边框与内容之间的距离
 

十、html语义化

 
html语义化：在使用html编程时，根据内容选择合适的标签（代码语义化），增加可读性与SEO。
 

1、html语义化的优点

 
html语义化的优点：

• 为了在没有CSS的情况下也能呈现出很好地内容结构、代码结构。
• 提高用户体验。
• 有利于SEO。
• 方便其他设备渲染网页。
• 便于团队开发和维护。
   

2、HTML语义化的注意事项

 
html语义化的注意事项：

• Html编码时要保持父子标签之间一个Tab键的缩进。
• 每标签div和span。
• 在语义不明显时，既一个用于布局的div声明前后都有注释。
• 尽可能少的使用无语义的可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利。
• 不要使用纯样式标签，如：b、font、u等，改用css设置。
• 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式），strong默认样式是加粗（不要用b），em是斜体（不用i）。
• 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td。
• 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在label标签中设置for=someld来让说明文本和相对应的input关联起来。
   

十一、表单标签

 
表单标签的基本作用：封装客户端输入的数据，并通过设定以指定的模式将数据提交给服务器端。
 

1、主要标签

 
form标签：表单标签的父容器，用于设定内部表单标签数据提交地址与提交方式。

输入类型标签：包含多种类型的输入标签，用户通过输入类型标签输入数据。

提交或重置标签。
 

2、标签私有属性

 
form标签私有属性说明：

（1）action属性:设定处理表单数据提交的服务器url地址。

（2）method属性:设定数据传送到服务器的方式，常用的取值。

（3）get请求:声明本次请求的目的是从服务器获取数据。

（4）post请求：声明本次请求的目的是向服务器传送数据。

（5）target属性:规定在何处打开 action URL。

（6）enctype属性：规定在发送到服务器之前应该如何对表单数据进行编码。

 

3、method属性为get或post的区别

• 目的不同。
• 提交方式不同（一个在响应头，一个在响应体）。
• 提交数据长度不同：get：不超过255个字符，post：默认为不受限制。
• 安全性： get信息显示在浏览器地址栏，安全性低。post：作为请求的消息体， 不可见。安全性高。
• 提交数据缓存：get：缓存在浏览器URL历史状态中。 post：不会被浏览器缓存。
   

4、常用的表单标签

 
常用的表单标签：

（1）input：输入类型标签，根据type输入不同展现的输入标签类型不同。

（2）textarea：文本域。

（3）label：标签的文字描述标签。

（4）select/option:下拉框标签。

（5）fieldset： form表单内的部分表单元素的子集合。

（6）legend元素:子集合标题。

（7）button：按钮标签。
 

5、表单标签的通用属性

 

表单标签的通用属性：除具备标签属性之外还具备如下通用属性，同时每个表单标签还有私有属性。

• name：规定表单标签的名称，在提交数据时，以name属性作为检索值。

• disabled:规定禁用当前表单元素。

• readonly：规定表当前表单元素为只读元素。

• value：设定或获取当前表单元素的输入值。

readonly和disabled的区别：

• readonly只针对input(text / password)和textarea有效。

• disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。
   

6、input标签

 
input标签：输入类型标签，根据type输入不同展现的输入标签类型不同。

• text：定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。
• password：定义密码字段。该字段中的字符被掩码。
• radio：定义单选按钮。Name属性相同的radio只能有一个被选中。可以使用checked属性设定radio的默认选中。
• checkbox:定义复选框。
• file：文件输入。
• button：表单中的普通按钮，按钮内容为文字，点击后没有默认行为。
• image：表单中的普通按钮，显示内容为图片，点击后没有默认行为。
• submit：表单中的提交按钮，点击自动将表单内容提交给服务器，可以使用js阻止提交。
• reset：重置表单内容，点击后表单内所有输入元素的值将被重置为网页加载前的状态。

注意：由于input在定义按钮时无法同时显示文字和图片，建议使用button标签定义按钮

	<button type=“submit/reset/button”>
		按钮的文字 
	<button>

 

7、下拉框

 
下拉框：使用select、option标签共同完成下拉框的显示。
 

7.1、select标签

 
select标签：下拉框容器。

私有属性说明
multiple：规定可选择多个选项。
size：规定可见下拉框选项的数量。
 

7.2、option标签

 
option标签：下拉框选项组件。

私有属性说明
selected：规定下拉列表中被选项目的索引号。

<select name="country">
	<option selected disabled>请选择地点option>		
	<option value="China">中国option>
	<option value="Japan">日本option>
select>

 

8、fieldset标签

 
fieldset标签：form表单内的部分表单元素的子集合，浏览器对子集合提供默认样式渲染。

legend标签：子集合标题。

	<form action="body.html" method="get">
		<fieldset>
			<legend>登录legend>
			用户名：<input type="text" name="username" placeholder="请输入用户名"/><br>
			密码：<input type="password" name="password" placeholder="请输入密码" /><br>
			<input type="submit" value="登录" />
			<input type="reset" value="重置" />
			<button type="submit">登录button>
		fieldset>
	form>

 

9、textarea标签

 
textarea标签：设定多行的文本输入控件。

特殊属性说明

cols:规定文本区内的可见宽度。
rows:规定文本区内的可见行数。

	<textarea name="textarea" rows="3" cols="10">
		第一行每行10字
		第二行每行10字
		第三行每行10字
	textarea>

 

10、label标签

 
label标签：输入标签的文字描述标签，可以代替输入标签响应用户的操作。

特殊属性说明

for:输入标签的id属性值。

	<label for="lab">标签：label>