首页 > 其他分享 >Web_DAY2

Web_DAY2

时间:2022-08-17 13:55:40浏览次数:53  
标签:Web 表格 标签 单元格 DAY2 label 合并 属性

列表标签

无序列表最常用,有序列表偶尔用,自定义列表底部导航用

无序列表

 <h3>我承诺</h3>
 <ul>
 	<li>年满18岁,单身</li>
    <li>抱着严肃的态度</li>
    <li>真诚寻找另一半</li>
</ul>

特点:每一项前默认显示圆点标识
注意:

  • ul标签只允许包含li标签
  • li标签可以包含任意内容

有序列表(较少使用)

<ol>
    <li>text</li>
</ol>

特点:每一项前默认显示序号

自定义列表

场景:网页底部导航
标签组成:

标签名 说明
dl 表示自定义列表整体
dt 表示自定义列表主题
dd 表示自定义列表的针对主题的每一项内容

注意:

  • dd前默认缩进

表格标签

表格基本标签

标签名 说明
table 表格整体,包裹tr
tr 表格每行,包裹td
td 表格单元格,包裹内容

相关属性:

属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度

表格标题和表头单元格标签

标签名 名称 说明
caption 表格大标题 顶部居中
th 表头单元格 加粗居中

表格结构标签

场景:让表格的内容结构分组,突出表格的不同部分(头部、主体、底部),使语义更加清晰
结构标签:

标签名 名称
thead 表格头部
tbody 表格主体
tfoot 表格尾部

合并单元格

合并单元格步骤:

  1. 明确合并哪几个单元格

  2. 通过左上原则,确定保留谁删除谁

    • 上下合并→只保留最上的,删除其他
    • 左右合并→只保留最左的,删除其他
  3. 给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

    属性名 属性值 说明
    rowspan 合并单元格个数 跨行合并,垂直合并
    colspan 合并单元格个数 跨列合并,水平合并

注意:只有同一个结构标签中的单元格才能合并,不能跨thead、tbody、tfoot

综合案例

<table border="1" width=240>
    <caption><b>INFORMATHON</b></caption>
    <thead>
        <tr>
            <th>number</th>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody height=40>
        <tr>
            <td>1</td>
            <td><b>xiaoyu</b></td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>2</td>
            <td>miamia</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">gooooooooooooooooooooood!</td>
        </tr>
    </tfoot>
</table>

表单标签

input系列标签

input标签可以通过type属性值的不同,展示不同效果

属性值 常用属性
text placeholder 提示用户输入内容的文本
password placeholder 提示用户输入内容的文本
radio name 有相同name属性值的单选框为一组,一组中只能同时有一个被选中
checkbox checked 默认选中
file multiple 多文件选择
submit value 按钮名
reset value 按钮名
button value 按钮名

注意点:

  • 如果需要实现submit、reset、button按钮功能,需要配合form标签使用
  • form使用方法:用form标签把表单标签一起包裹起来即可
<input type="submit" value="submit">
<input type="reset" value="reset">
<input type="button" value="useless">

button按钮标签

type属性值:submit、reset、button(类似input)
button是双标签,更便于包裹其他内容:文字、图片等

<button type="submit">submit</button>
<button type="reset">reset</button>
<button type="button">useless</button>

select下拉菜单标签

select标签:下拉菜单的整体
option标签:下拉菜单的每一项(selected属性:下拉菜单默认选中)

<select>
    <option>fuzhou</option>
    <option>beijing</option>
    <option>shanghai</option>
    <option selected>xiamen</option>
</select>

textarea文本域标签

常见属性:

  • cols:规定了文本域内可见宽度
  • rows:规定了文本域内可见行数

label标签

场景:常用于绑定内容与表单标签的关系
标签名:label
使用方法①:

  1. 使用label标签把内容(如:文本)包裹起来
  2. 在表单标签上添加id属性
  3. 在label标签的for属性中设置对应的id属性值

使用方法②:

  1. 直接使用label标签把内容(如:文本)和表单标签一起包裹起来
  2. 把label标签的for属性删除即可
<input type="radio" name="gender" id="boy"><label for="boy">boy</label>
<label><input type="radio" name="gender" checked>girl</label>

字符实体

如果在html代码中同时并列出现多个空格、换行、缩进等,最终浏览器只会解析出一个空格

空格实体名称:&nbsp

标签:Web,表格,标签,单元格,DAY2,label,合并,属性
From: https://www.cnblogs.com/exungsh/p/16594923.html

相关文章

  • Javaweb09-请求跳转项目 分页条件查询 + 增删改 + 邮件登录
    1、Jar包<properties><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><maven.compiler.source>1.7</maven.compiler.source><maven......
  • tomcat 文件夹映射到 web页面
    修改文件:Tomcat8.5\conf\server.xmldocBase:本地文件路径(注意斜杠方向)path网页路径(值:/a对应:http://localhost:8080/a/)<Contextpath="/a"docBase="G:\webapp"......
  • web敏感文件泄露
    FROM:博客1博客21、版本管理软件造成的泄露(1)Git关键文件git在初始化项目的时候,会在项目的根目录(可用gitrev-parse--show-toplevel查看)创建一个名为.git的隐藏文......
  • 如何绑定 Webhook 推送
    近几年Webhook在前后端对接的开发模式中变得越来越流行,我们能用事件描述的事物越多,Webhook的作用范围也就越大。Webhook作为一个轻量的事件处理应用,正变得越来越实用。......
  • web入门(信息收集)
    From:https://blog.csdn.net/i_kei/article/details/109605874https://blog.csdn.net/weixin_52805837/article/details/1118272051、web1打开网页源码即可得到flag2......
  • 还在为如何编写Web自动化测试用例而烦恼嘛?资深测试工程师手把手教你Selenium 测试用例
    原文链接本文节选自霍格沃兹测试开发学社内部教材编写Selenium测试用例就是模拟用户在浏览器上的一系列操作,通过脚本来完成自动化测试。编写测试用例的优势:开源,免......
  • Docker部署WebDav服务
    问题分析最近在用学校机房中的服务器搭建一个文件共享服务,前期使用了宝塔面板一键搭建了FTP服务器,使用一切正常。但是最近在使用其观看存储的视频文件时播放体验并不友......
  • 2022-08-15 day28 第一小组 王鸣赫
    目录Mysql数据库数据库Mysql基本操作表SQL语言SQL分类DCL(数据库控制语言)创建用户给用户授权撤销授权查看权限删除用户DDL(数据定义语言)创建表数据类型整型浮点型字符串类型......
  • 2022-08-16 day29 第一小组 王鸣赫
    目录DQL数据库查询语言单表查询基本查询基本语法别名条件控制按条件表达式筛选:逻辑运算符模糊查询:排序特点常见函数字符函数数学函数日期函数分组函数分组查询分页查询多表......
  • webRTC构建-Linux版
    linux下构建webRTC#!/bin/bashset-exu__CURRENT__=`pwd`__DIR__=$(cd"$(dirname"$0")";pwd)cd${__DIR__}start_time=$(date-u'+%Y-%m-%dT%H:%M:%SZ')star......