Web前端系列技术之HTML基础（从入门开始）②

Web前端系列技术之HTML基础（从入门开始）②

在经历了两天的HTML语言学习中，脑海中逐渐对整个HTML语言的基础用法有了一定的了解。其实在我个人看来，HTML存在的目的就是为了组建出一个大体的网页骨架，为网页的制作起到一个铺垫的作用，就它本身而言，是没有任何灵魂和实际交互效果的。
但是它就是独一无二的不可缺乏，而组成这一骨架的便是所要牢记的HTML的各类标签，这也是Java系列技术之HTML基础（从入门开始）①中所提及到的。
而今天所要介绍的就是它更为重要的列表标签 、表格标签 、图片标签 、超链接标签 、表单标签及其内部的元素标签。

---

---

六、列表标签

列表标签主要分为三种，分别是无序列表 、有序列表 、定义列表
注意：
①无序列表主要被用来设计为网页的导航栏；
②有序列表一般采用数字（默认）或字母作为顺序；
③定义列表并不常用，也只有在某些高级效果中会用到，基本上《在线论坛》上面会用到；

1.无序列表标签

无序列表：列表符号一般采用黑色原点（实心圆），不可以通过type属性改变；
其type属性值为：disc(实心圆)、circle(空心圆)、square(实心正方形) 三种；
注意：
①ul元素的子元素只能是li,不能是其他元素；
②ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加

<!--无序列表-->
<ul>
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ul>
<ul type="circle">
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ul>

2.有序列表标签

有序列表（ordered-list）：一般采用数字（默认）或字母作为顺序；
其type属性值为：1、a、A、i（小罗马）、I（罗马）
注意：
①ul元素的子元素只能是li,不能是其他元素；
②ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加

<!--有序列表-->
<ol type="1">
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ol>
<ol type="a">
	<li>列表项</li>
	<li>列表项</li>
	<li>列表项</li>
</ol>

3.定义列表标签（不常用）

定义列表：名词和描述，定义列表用的少，通常在某些高级效果中会用到，基本上在线论坛上面会用到
dl:定义一个定义列表。
dt:定义标题（列表项）
dd：对标题的说明和解释
注意：
①dt与dd是同级
②一个dt可以用多个dd来解释。
③dd是解释上面最近的一个dt。

<!--定义列表-->
<dl>
	<dt>名词</dt>
	<dd>描述</dd>
</dl>

---

七、表格标签

表格目前常被用于展示数据，但在此之前，很多前端开发中也将表格作为一种布局使用，但是现在被 “浮动布局” 和 “定位布局” 给替代了（这里涉及到DIV+CSS）

1.表格基础标签

表格各类标签：table(表格) 、tr(行) 、td(单元格) 、captain(表格标题)。
table标签的属性： cellspacing为外边框间距，cellpadding为内边框间距
注意：
①th标签和td标签的区别：效果会加粗和居中；
②th标签用于表头单元格，td标签用于普通单元格；
③表格【最完整的结构】语义化体现： thead(用于包裹表头)、tbody(用于包裹表格内容)、tfoot(用于包裹表尾最后一行)（不过一般情况该标签可不用）

<!--基础表格-->
<table border="1" cellspacing="20" cell cellpadding="20">
	<caption>表格的标题</caption>
	<thead>
	<tr>
		<th>第1行第1列</th>
		<th>第1行第2列</th>			
		<th>第1行第3列</th>
	</tr>
	</thead>
			
	<tbody>
	<tr>
		<td>第2行第1列</td>
		<td>第2行第2列</td>
		<td>第2行第3列</td>
	</tr>
	</tbody>
			
	<tfoot>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	</tfoot>
</table>

其样式如下图所示：

2.表格合并属性

表格主要的合并属性分为：colspan(可以理解为跨越的列数)、rowspan(可以理解为跨越的行数)
注意：
①不同的标签区域内是无法进行跨域合并的，这里就是因为tbody与tfoot标签导致出现了跨域问题，所以不能合并；
②因为一般表格都没有tfoot标签，所以可以通过删除来处理不能合并的问题；

<!--合并表格-->
<table border="1" cellspacing="20" cell cellpadding="20">
	<caption>表格的标题</caption>
	<thead>
		<tr>
			<th colspan="3">第1行第1列</th> 
		</tr>
	</thead>
			
	<tbody>
		<tr>
			<td rowspan="2">第2行第1列</td>
			<td>第2行第2列</td>
			<td>第2行第3列</td> 
		</tr>
				
		<tr>
			<td>第3行第2列</td>
			<td>第3行第3列</td>
		</tr>
	</tbody>
</table>

其样式如下图所示：

---

八、图片标签

图片格式一般有两种：一种是位图，一种是矢量图。
**位图：**由像素点组成的图片，放大图片/缩小图片，图片会失真 ，常见位图格式：jpg 、png 、gif ；
①jpg： 处理大面积色调图片，颜色丰富的复杂图片，但是体积大，不支持透明格式；
②png： 是一种无损格式，体积小，支持透明格式，但是不适合存储颜色丰富的图片；
③gif： 效果最差，但是可以制作动画，也就是gif动图；

图片标签的主要写法为 <img /> ，其三个属性分别是：src 、alt 、title ；
src： 指定图片路径；
alt： 用于图片描述，提供给搜索引擎看的（必选）；
title： 用于图片描述，提供给用户看的（必选）；
注意：
①图片两种路径：①绝对路径、②想对路径
②绝对路径：为电脑中的完整路径 （并不常用）；
③相对路径：图片相对与页面的路径（./当前目录，…/上一级目录，…/…/ ） ；
④服务器的分隔符都是 " / " ；

<!--图片-->
<div>
	<img width="250px" src="./img/微信图片_20220703153654.jpg" alt="给搜索引擎看的" title="给用户看的" />  
</div>

其样式如下图所示：

---

九、超链接标签

超链接 一般分为：①文本超链接 、②图片超链接 ；
在超链接中的使用范围中，有一个traget属性特别重要，它主要代表的是超链接窗口的打开方式，其具体值为：
①_self：默认方式，表示在当前窗口打开链接 ；
②_blank：在一个全新的空白窗口打开链接 ；
③ _top：在顶层框架中打开链接(不常用) ；
④ _parent：在当前框架的上一层里打开链接(不常用) ；

1.普通超链接

超链接的链接地址属性为：href；
外部链接：项目以外的网页的站点地址；
内部链接：项目以内的项目地址

<!--普通超链接-->
<a href="http://www.baidu.com" target="_blank">百度一下</a>

2.锚点链接

锚点链接属于内链接的一种；需要注意的点有两个：
①目标元素的id，在同一张html页面中，id值不可以重复；
②标签的href属性指向该id，在id值前面加一个“#”；

<!--锚点链接-->
<a href="#mdlj" target="_self">点击跳跃</a>

---

十、表单

主要作用： 是在浏览器中收集用户的信息，然后提交给服务器来处理的。
主要指的是：文本框、按钮、单选框、复选框和下拉列表；

1.表单标签

表单标签为：<form></form>
其属性常为：
① action：表单提交数据的目的地址；
② enctype：设定对发送数据进行编码；
③ name：规定表单属性名称；
④ target：规定打开窗口位置；
⑤ name：规定表单属性名称；
⑥ target：规定打开窗口位置；

常用属性	value值
action	url
enctype	application/x-www-form-urlencoded:文本/文字【默认】
	multipart/form-data：文件上传
	text-plain：纯文本（邮件）
method	get、post

2.input标签

input标签：<input />；可见；其主要属性为：type；
其属性值及含义如下表所示：

属性值	含义
text	单行文本框
password	密码文本框
radio	单选框
checkbox	多选框
button / submit / reset	按钮
file	文件上传

其中按钮属性中包含了常见的三种按钮：
①普通按钮button： 使用button按钮基本上都是要搭配JavaScript使用的(结合表单使用)；
②提交按钮submit： 发送数据时，name属性值一定要存在，不然无法传输数据(结合表单使用)；
③重置按钮reset： 清除表单里面的数据信息(结合表单使用)；

<h3>单行文本框</h3>
	<input type="text" value="默认值" size="10"/>    
	<!-- size=10代表文本框中可输入的最大字符数 -->
		
<h3>密码文本框</h3>
	<input type="password" value="默认值" size="30"/>
		
<h3>单选框：</h3>
	性别：<input type="radio" value="男" name="sex" checked="checked"/>男<input type="radio" value="女" name="sex" >女
	<!-- checked指的是默认被选中； -->
	<!-- name属性主要是为了确保互斥的作用 -->
		
<h3>复选框：</h3>
	<input type="checkbox" name="fruit" id="" value="苹果">苹果<br/>
	<input type="checkbox" name="fruit" id="" value="葡萄">葡萄<br/>
	<input type="checkbox" name="fruit" id="" value="芒果">芒果
		
<h3>按钮</h3>
	<input style="width: 300px;" type="button" onclick="alert('这是一个弹框')" name="button" id="" value="button"> 普通按钮<br/>
	<!-- 注意方法：οnclick="alert('这是一个弹框')" -->
		
	<form action="http://www.baidu.com" method="GET">
	<!-- 需要用到get方法才能获取数据(结合表单使用) -->
		<input style="width: 300px;" type="submit" name="username" id="" value="submit"> 提交按钮<br/>
	</form>
		
	<input style="width: 300px;" type="reset" name="" id="" value="reset"> 重置按钮<br/>
		
	<input type="file" name="" id="" enctype="multipart/form-data">
	<!-- 必须设置formenctype为multipart/form-data才能将文件上传(结合表单使用) -->
	<!-- 注意：学会input按钮的样式控制 -->
		

其样式如下图所示：

3.多行文本标签

多行文本标签为：<textarea> </textarea>
其属性值主要为：cols：确定列数；rows：确定行数；

<h3>多行文本框</h3>
	<div>
		<textarea name="" id="" cols="60" rows="10">请输入内容</textarea>
	</div>
	

其样式如下图所示：

4.下拉列表标签

下拉列表标签为：<select> </select> 、<option> </option>
其select的属性主要为：multiple(多选) 、size(展示项目数量)(不常用)；
其option的属性主要为：selected(默认选项)；
注意：
①select标签与option标签只有在一起用才能实现下列表的效果；
②select的name属性值和option的value属性值是必不可少的；

<h3>下拉列表</h3>
	<select name="" id="" style="width: 300px;" multiple="multiple">
	<option value="" selected="selected">请输入你所在的城市</option>
	<option value="">北京</option>
	<option value="">上海</option>
	<option value="">广州</option>
	<optgroup>
		<option value="">深圳</option>
		<option value="">杭州</option>
	</optgroup>
</select>
	

其样式如下图所示：

5.隐藏域

作用： 在前台通过表单把用户数据传输到后端服务器，有传输的数据但是不想用户看到，这个时候就需要用到隐藏域

<!--隐藏域-->
<input type="hidden" name="" id="" value="一碗邹"/>

总结

以上就是今天要介绍的内容，在此分享一下，HTML文本的编写，是一定要遵从它自己的格式和规则，我现在所学习的HTML内容任然只是其中一部分，后续会持续完善和更新。感谢关注和支持，我们一起成长！

有兴趣可回顾一下Java系列技术之HTML基础（从入门开始）①的文章介绍，毕竟综合性复习和学习是更会加深印象的哟！！！