web前端第二天

简介: web前端第二天

3.5 表格标签

什么是表格标签?

表格标签一般用来显示具有二维属性的数据。

表格涉及到的标签都有:table:它是用来创建表格的

thead:它表示表格的头部部分 tbody:他表示表格主体部分

tfoot:他表示表格底部

Thead,tbody,tfoot的优点:

  • 如果使⽤了这三个标签,那么无论标签的顺序是怎样他都会按照 head,body,foot的顺序来显示
  • 在页面加载的时候这三个标签会将数据分批显示,提高显示效率。


tr:它的作用是用来创建⼀个表格行

td:它的作用是用来创建⼀个行内的单元格

colspan:它是用来进行列的合并,合并的顺序是从左向右进行合并。

rowspan:它是用来进行行的合并,合并的顺序是从上到下

让我们来看看下面这几行代码

<table border="1" width = 600>
 <tr>
 <td>⽤户姓名</td>
 <td>⽤户id</td>
 <td>⽤户性别</td>
 <td>⽤户昵称</td>
 </tr>

HTML中的特殊字符:

注意:以运算符&开头,以分号运算符;结尾。重点记住 &nbsp &lt &gt。HTML 中不能使用小于号 “<” 和大于号 “>”特殊字符,浏览器会将它们作为标签解析,若要正确显示,在 HTML 源代码中使用字符实体


border-collapse:设置行和单元格的边是否合并

概述:border-collapse是设置表格的行<tr>或<td>之间是否留有距离的样式,<tr>与<td>之间的距离,在表格里可以通过border="xxx"与 cellspacing="xxx"来实现。换句话说,当border-collapse设置为collapse时,表格自身的border与cellspacing属性便没有作用了。


语法:border-collapse : separate | collapse


取值:


separate : 默认值。边框独立(标准HTML)


collapse : 相邻边被合并


功能一


让 table 的 border 属性指定的边框看起来不那么粗大,在前面文章中已经介绍。


功能二


让 td 边框重合


cellpadding 是边框与其内容的间隙大小;


cellspacing 是边框与边框之间的间隙大小;

3.6 超链接标签(*)

超链接是HTML重要的组成之⼀,通过超链接可以跳转到其他⽹⻚。通常实现超连接的标签是a。

1、链式的语法格式

<a href="跳转目标链接" target="目标窗口的弹出方式"> 文本或图像 </a>

<a>标签里的a是单词anchor的的缩写,意为:锚。


  • 文字超链接
属性 作用
herf 用于需要跳转的页面链接,(必须属性)当标签应用herf属性时,它就拥有了超链接的功能
target 用于指定链接页面的打开方式,其中_self(当前页面打开)为默认值,_blank为在新窗口中的打开方式


  • 锚链接

通过创建⼀个锚链接,可以实现跳转到对应id的标签位置(成为锚点)

页面内的锚链接


<a name="frist"></a>    /*定义锚点名称frist*/
<a href="#frist"></a>    /*跳转到frist位置*/

页面间的锚链接

例如:从Frist.html页面中转入Second.html页面中并且将位置定到second所在的位置。

先在second.html定义一个名为frist的锚点。

<a name="second"></a>

在Frist.html页面中设置锚链接。


<a href="Second.html#second"></a>


  • 图片超链接

图⽚超链接就是在a标签中填写img标签,通过点击图⽚实现跳转的⽬的。


<a href="code.html" target="_blank">


<img src="1.jpg" alt=" ">


</a>

  • 热区超链接(拓展)

在同⼀张图片上划分出多个区域 不同的区域指向不同的跳转链接。 通过map和area进行区域的划分,并在area的href填⼊要跳转的页面内的链接,从而实现跳转。


3.7 列表标签

  • 有序列表ol
<html lang="zh">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 </head>
 <body>
 <h1>有序列表</h1>
 <!-- 有序列表通过 type属性进⾏ 列表序号的设置 有 1,a,A ,i,I -->
 <!-- 通过 start属性 来确定起始序号是什么数字 -->
 <!-- reversed是⼀个布尔型属性 控制列表的倒序输出 当起始序号⼩于⼦项的数⽬时,⽆论序号是什么
类型⼀旦⼩于零时序号将以数字的形式输出-->
    <ol type="a" start="1" reversed = "reversed">
     <li>我是⼀个⼦项1</li>
     <li>我是⼀个⼦项2</li>
     <li>我是⼀个⼦项3</li>
     <li>我是⼀个⼦项4</li>
     <li>我是⼀个⼦项5</li>
     <li>我是⼀个⼦项6</li>
    </ol>
 </body>
</html>

有序列表的作用

  • 无序列表ul

无序列表使用标签ul创建 子项同样为li标签

<body>
 <h1>⽆序列表</h1>
 <!-- type⽤来控制序号形式,circle表示空⼼圆 disc表示实⼼圆 square表示⽅块 默认是disc-->
 <ul type="square">
 <li>哈哈</li>
 <li>嘿嘿</li>
 <li>哈哈</li>
 </ul>
 </body>

  • 数据列表dl

数据列表由dl标签创建,其中子项有dt和dd标签,dt表示标题,dd表示对应的子项

<body>
<!-- 数据列表允许多个⼩标题的出现,并且跟ol和ul⼀样可以通过css来改写样式 -->
      <h1>数据列表</h1>
      <dl>
      <dt>热搜</dt>
      <dd>这是一个数据列表</dd>
      <dd>这是一个数据列表</dd>
      <dd>这是一个数据列表</dd>
      </dl>
  </body>

3.8表单标签

表单标签目前会学习三个标签 input,select,textarea,这三个标签写在form标签中。


一个表单有三个基本组成部分:

  1. 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
  2. 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
  3. 表单按钮:包括提交按钮、复位按钮和一般按钮
    <body>
    <h1>用户注册</h1>
    <form action="url地址" method="get" name="表单名称" enctype="">
    用户姓名:<input type="text" name="username" id="6" value="cmy" ><br>
    用户密码:<input type="password" name="username" id=""><br>
    用户性别:<input type="radio" name="sex" id="" value="1" />男
     <input type="radio" name="sex" id="" value="2" />女
     <input type="radio" name="sex" id="" value="3" />跨性别<br>
    用户爱好:
     <input type="checkbox" name="fav" id="" value="1" />唱
     <input type="checkbox" name="fav" id="" value="1" />跳
     <input type="checkbox" name="fav" id="" value="1" />rap
    用户头像:<input type="file" name="avatar"><br>
    </form>
  </body>


1、action在表单收集到信息后,需要将信息传递给服务器进行处理,action属性用于指定接收并处理表单数据的服务器程序的url地址。

2、method用于设置表单数据的提交方式,其取值为get或post。

      Get 明文传输,数据量相对较少,不是很安全

       Post 非明文传递,有请求体,数据量相对较大,较安全获取数据用get,发送数据用post

3、name用于指定表单的名称,以区分同一个页面中的多个表单。



input标签是⼀个输入型标签,他有20多种类型可供选择,每种类型对应不同的输⼊形式,是表单标签中最重 要的元素。 而select标签它是⼀个下拉框,供用户选择其中的子项,当multipule存在时它将以列表的形式出现。Textarea它是⼀个多行⽂本输⼊框,可以进行相对复杂的⽂本格式输入。


使用multiple属性,就可以不限制单次上传文件个数,实现下拉复选效果。

相关文章
|
2天前
|
前端开发 安全 数据安全/隐私保护
杨校老师课堂之WEB前端HTML2
杨校老师课堂之WEB前端HTML
16 0
|
2天前
|
XML 移动开发 前端开发
杨校老师课堂之WEB前端HTML1
杨校老师课堂之WEB前端HTML
21 0
|
1天前
|
前端开发 搜索推荐 JavaScript
Web前端网站(二)- 主页
页面星空是可动的哦~~~毒药水特效的颜色搭配,文字渐变的动态效果,图片360度旋转展示特效等等等;每一次的按钮点击都是满满的惊艳 ~ ~ ~
18 4
Web前端网站(二)- 主页
|
1天前
|
存储 前端开发 搜索推荐
Web前端网站(一) - 登录页面及账号密码验证
页面背景动态是烟花和文字特效与缓缓下落的雪花相结合,在登录表单的旁边还有五个白色光圈以不规则的方式环绕,当鼠标靠近时,会发出彩色的光芒~~~
19 1
Web前端网站(一) - 登录页面及账号密码验证
|
5天前
|
前端开发 JavaScript 开发工具
Web前端开发学习资料:深度探索与开发实践
Web前端开发学习资料:深度探索与开发实践
9 3
|
5天前
|
缓存 前端开发 JavaScript
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
17 1
|
10天前
|
前端开发 JavaScript 测试技术
web前端语言框架:探索现代前端开发的核心架构
web前端语言框架:探索现代前端开发的核心架构
19 4
|
2天前
|
编解码 前端开发 JavaScript
WEB前端响应式布局之BootStarp使用
WEB前端响应式布局之BootStarp使用
13 0
|
2天前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
11 0
|
5天前
|
前端开发 JavaScript 安全
Web前端开发中的三大主流框架
Web前端开发中的三大主流框架