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基础(从入门开始)①的文章介绍,毕竟综合性复习和学习是更会加深印象的哟!!!