首页 > 其他分享 >02HTML+CSS

02HTML+CSS

时间:2024-07-26 20:17:21浏览次数:13  
标签:表格 02HTML 标签 表单 按钮 input 列表 CSS

今天下午学习了列表,表格和表单。

列表:

列表分为无序列表,有序列表,定义列表。无序列表没有加样式,界面显示出来前面都是一个点,有序列表显示是带有数字1,2,3的列表,而定义列表,可以给出列表的标题和内容。一般来说,我们用到无序列表多,也是重点。

无序列表格式:父标签<ul><li></li></ul>,里面是子标签li,用来放置每一行的内容。

有序列表格式:与无序列表只有一个区别就是把ul换成ol。

定义列表:相对来说麻烦一些,所有东西包裹在<dl></dl>中,在这里面有<dt></dt>里面存放列表的标题,<dd><dd>里面存放内容。

 

表格:

基本使用:表格的主要格式为<table></table>,在里面有<tr></tr>这个是表格中的每一行,每一行中还有th和td,<th></th>这个是一列的标题,自带这加粗和剧中,<td></td>是表格中具体写内容的地方。table上面可以加属性,border="1"是让表格的边框显示出来,不加则边框不会显现出来。

结构标签:结构标签是给浏览器看到,加上对人的观看没影响,只是电脑更清楚结构。结构标签有<thead>来加到第一行上,表示这是头,<tbody>加到内容上,表示里面都是表格的内容,<tfoot>表示表格的结尾。一般来说是不需要加上这些东西的。

合并单元格:表格中存在相同的数据,我们可以将表格合并,采取原则是保留左上的数据,会在表格中的左或上的数据中加入rowspan="数字",colspan="数字"。然后将重复的表格删掉。数字表示合并几行或几列数据。

 

表单:

input基本使用:格式为 <input type="类型">,类型有text:文本框,password:密码框,radio:单选框,checkbox:复选框,file:上传文件。

占位文本:input的属性,可以让表单中提示用户干什么,placeholder=“内容”。

单选框:要想实现单选框只能选择一个的功能,需要给input中设置相同的name=“ ”值,才可以,另外加入checked的属性,可以让进入页面时默认选择这个值。

上传多个文件:需要在input属性中加入multiple。

多选框:默认选择的加入属性和单选框相同。

下拉菜单:标签为 <select><option selected>河北</option></select>selectd表示默认选择的菜单值为河北。

文本域:可以让用户输入大片的文字,同时也可以换行,标签为<textarea>

lable标签:可以扩大用户的点击范围,有两种方式,一种直接把表单用lable标签包裹起来,一种是给表单添加一个id值,lable标签有一个相同的for值。就可以实现。

按钮:

    <form action="">         账号:<input type="text">         <br><br>         密码:<input type="password">         <br><br>         <button type="submit">提交</button>         <button type="reset">重置</button>         <button type="button">普通按钮</button>     </form> 按钮要想生效,需要被包裹在form表单中,同时按钮有三个状态,分别是提交,重置,普通按钮。什么也不写默认是提交按钮。 无语义:无语意标签<div>可以换行,<span>不换行。 字符实体:就是想要界面显示出特殊的符号,像空格,<,>等,不会被HTML当作标签,可以用&nbsp;代替空格,&lt;代替小于号,&gt;代替大于号。  

 

标签:表格,02HTML,标签,表单,按钮,input,列表,CSS
From: https://www.cnblogs.com/Lyh3012648079/p/18326177

相关文章

  • 01HTML+CSS
    今日正式开始学习前端,学习内容有1.标签的写法:标签分为单标签和双标签,其中他们都是由尖括号组成<>,例如:加粗标签<strong></strong>,倾斜标签<em></em>,下划线标签<ins></ins>,删除线标签<del></del>。2.HTML的基本骨架:HTML主要由<HTML></HTML>组成,在这里面有<head></head&g......
  • 可以捕捉高动态范围成像的的AR0521SR2C09SURA0-DP2、AR0522SRSM09SURA0-DP2、AR0821CS
    AR0521SR2C09SURA0-DP2、AR0522SRSM09SURA0-DP2、AR0821CSSC18SMEA0-DPBR图像传感器——明佳达1、AR0521SR2C09SURA0-DP2是一款1/2.5英寸CMOS数字图像传感器,带有2592(H)×1944(V)有效像素阵列。它能在线性或高动态范围模式下捕捉图像,且带有卷帘快门读取,其中包含了复杂......
  • 前端练习<Html&CSS>——悬浮抽卡片(附完整代码及实现效果)
    这个小练习来源于b站up小K师兄,大家可以通过下面的链接学习哦~up讲的非常详细。写一个好玩的悬浮抽卡片效果~先看一下效果:1.鼠标没有放置到card上2.鼠标放到card上,所有card呈角度散开 3.单击选中某一张卡片,卡片上浮高亮,其他卡片变暗 HTML部分<html> 标签定义了整个H......
  • CSS样式--续写
    哥们上课听到啥写啥,不做无意义的笔记。---驴言一刻今天写常见的一些样式规划,例如字体的,页面的,浮动的这些。(都是css样式,不是标签)字体样式:这个是在页面编写中会经常用到的一类样式。例如字体的加粗、大小、变细、颜色变化、斜体、字体类型等等。字体加粗/变细:font-weight在c......
  • 一篇文章讲清楚html css js三件套之html
    目录HTMLHTML发展史HTML概念和语法常见的HTML标签: HTML调试错误信息分析HTML文档结构HTML5的新特性结论HTMLHTML是网页的基础,它是一种标记语言,用于定义网页的结构和内容。HTML标签告诉浏览器如何显示网页元素,例如段落、标题、列表、链接、图片和表格等。HTML发......
  • 探索WebKit的CSS表格布局:打造灵活的网页数据展示
    探索WebKit的CSS表格布局:打造灵活的网页数据展示CSS表格布局是一种在网页上展示数据的强大方式,它允许开发者使用CSS来创建类似于传统HTML表格的布局。WebKit作为许多流行浏览器的渲染引擎,提供了对CSS表格布局的全面支持。本文将深入探讨WebKit如何实现对CSS表格布局的支持,......
  • 一行CSS解决难倒工程师两天的问题!
    遇到了一个非常奇怪的问题。首页用swiper实现了几个栏目的选项卡,然后在推荐栏,是滚动加载的瀑布流。出现了一个问题,在移动端(PC上不会),左右滑动切换栏目的时候,swiper卡住了,如果上下滑动的时候,稍稍有一点倾斜,也会触发swiper的左右滑动,但是会滑到一半卡住!swiper这样一个成熟的组件,不......
  • 前端必修技能:高手进阶核心知识分享 - CSS 选择器
    前端必修技能:高手进阶核心知识分享-CSS选择器CSS(层叠样式表)提供了多种选择器,用于选择要应用样式的HTML元素。CSS选择器用于选择你想要的元素的样式的模式。看了上面的图,你发现就算你不知道选择器名字叫什么,属于哪一种,但不知不觉的,你其实已经习惯了其中的很多种选择器......
  • WebKit的文本装饰艺术:CSS Text Decoration全解析
    WebKit的文本装饰艺术:CSSTextDecoration全解析CSS文本装饰(TextDecoration)是一组用于美化和增强网页文本表现的属性,它们可以为文本添加下划线、上划线、线删除和强调标记等效果。WebKit作为许多现代浏览器的渲染引擎,对CSS文本装饰的支持非常全面。本文将深入探讨WebKit对......
  • nginx 代理eureka后css/js/fonts无法访问
    nginx代理eureka后css/js/fonts无法访问,页面没有样式server{listen80;server_nameyour_domain.com;location/eureka{proxy_passhttp://eureka_server_ip:8761;proxy_set_headerHost$host;proxy_set_headerX-Real-IP$remo......