前端学习记录3-HTML

列表

无序列表ul-li

表格与无序列表的区别

有序列表ol-li
自定义列表dl-dt-dd

表单

input控件
select列表控件
表单label标签

在label标签中最好不要使用for和id方法

textarea控件
form表单域(写上述内容必要的基础要不你写完了这东西没地提交)

列表

布局、让页面布局整齐规范，跟表格相似但可组合的自由度很高(表格存放数据最好不用他布局)

无序列表ul-li

<ul></ul> 中只可以嵌套 <li></li>
直接在<ul>标签中输入其他标签或者文字不被允许
(可以写但是出了问题不好改所以就别写)

<li></li>中可以使用任何标签
最好别写样式用CSS 原因在于html中的样式
在不同浏览器中可能会显示的不同所以不用

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>无序列表使用ul->li</title>
</head>
<body><ul><li>火龙果</li><li>波罗蜜</li><li>香蕉</li><li>西瓜</li></ul>
<body>
</head>

火龙果
波罗蜜
香蕉
西瓜

表格与无序列表的区别

表格是形成了一个一个固定的单元格
单元格在本质上不好改变形式

而无序列表<ul></ul>是形成了一个一个的可操作的元素容器

为了可控性大部分的新闻类视图的网页元素使用此方法来做产品商城这样的网站中
所有商品的布局代码也基本属于<ul></ul>来制作

有序列表ol-li

<ol></ol>和<ul></ul>相似在用法上基本相同

但是主要的区别是在ol有序列表中
所有的元素内容是已经排序好的有基本的存储序列 (可操作性相对ul低)

因为标识缘故有序列表ol通常用在有明确等级性的项目上
例如下图的排序但是也同样存在问题在内容发生改变的时候不好改
该这个位置不仅需要调整CSS 还需要调整相应位置排序而无序列表可以不改代码
但是不改代码也不太好是吧

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>有序列表使用</title>
</head>
<body><ol><li>中国</li><li>俄罗斯</li><li>美国</li><li>英国</li></ol>
<body>
</head>

中国
俄罗斯
美国
英国

自定义列表dl-dt-dd

<dl></dl>中嵌套<dt></dt> <dd></dd>

<dt></dt>标签类似语言内作为父类的对象 <dd></dd> 作为子类
<dd></dd> 标签内的内容是作为解释<dt></dt>存在的

意思就是<dt></dt>内容包含<dd></dd>内容

自定义列表通常用在明确性继承性上的项目上

例如产品商城主页中的帮助中心
下方对应出现跟帮助中心有关的账户管理购物指南订单操作内容
此处使用自定义列表<dl></dl>帮助中心写入<dt></dt>
账户管理购物指南订单操作写入<dd></dd>
同样服务支持下级所属的售后政策自助服务相关下载这些内容同样跟上述操作相同

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>自定义列表使用</title>
</head>
<body><dl><dt>北京市</dt>	<dd>昌平区</dd><dd>海淀区</dd><dd>大兴区</dd><dd>等等区...</dd><dt>山东省</dt><dd>菏泽市</dd><dd>青岛市</dd><dd>烟台市</dd><dd>等等市...</dd></dl>
<body>
</head>

北京市: 昌平区; 海淀区; 大兴区; 等等区...
山东省: 菏泽市; 青岛市; 烟台市; 等等市...

表单

使用目的是把信息记录提交给服务端的数据库中或是其他相关内容控制

完整表单(简单来说)
元素	作用
表单控件(表单元素)	实际需要用户操作的部分
提示信息	给用户做提示
表单域	把所有数据提交至后台

input控件

<input type="属性" value="" name="">

常用元素
type属性值	具体表现形式
text	单行文本输入框
password	密码输入框(显示样式默认为 ········ (一个点) 表示输入字符)
radio	单选按钮
checkbox	复选按钮
button	普通按钮(没有具体的含义)
submit	提交按钮(提交在form表单域中输入的内容)
reset	重置按钮(重置在form表单域中输入的内容)
image	图像样式提交按钮(提交在form表单域中输入的内容)
file	文件域(上传照片用的是这玩意上传计算机内存在的可上传文件)
元素名	元素值	意义
name	自定义	控件名称()
value	自定义	input控件默认文本值
size	正整数	input控件显示宽度
checked	checked	定义控件默认被选中的项
maxlength	正整数	控件允许输入最多的字符数

按道理来说name是必须写的因为有后台交互的问题

使用radio单选按钮时必须要定义name 控件名才能实现真正的单选

checked属性可使用在复选和单选中使用

button普通按钮控件必须有 value值才能在浏览器中显示具体内容
submit 提交按钮若不写value值默认带提交两个字

具体使用方法:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表单</title>
</head>
<body>用户名:<input type="text" name="username" value="请输入用户名"><br>昵称:<input type="昵称" name="user id" value="请输入昵称"><br>密码:<input type="password" name="password"><br><!-- 使用radio单选按钮时 必须要定义name 控件名 才能实现真正的单选 -->性别:<input type="radio" name="sex">	男<input type="radio" name="sex">女<br>爱好:<input type="checkbox" name="hobby">睡觉<input type="checkbox" name="hobby">搞姑娘<input type="checkbox" name="hobby">玩游戏<input type="checkbox" name="hobby">旅游<br><!-- checked属性 可使用在复选和单选中使用 --><input type="checkbox" name="userpaper" checked="checked">同意<a href="#">服务条款</a>和<a href="#">隐私权相关政策</a><br><!-- button普通按钮控件必须有 value值才能在浏览器中显示具体内容submit 提交按钮 若不写value值 默认带提交两个字--><input type="button" name="get duanxin" value="获取短信验证码"><br><input type="submit" name=""><br><input type="submit" name="submit" value="确认注册"><input type="reset" name="reset" value="重置内容"><br><!-- 图片按钮 --><input type="image" name="zhuce" src="images/button.png"><br><!-- 文件域，在页面上传内容时使用 -->上传头像:<input type="file" name="touxiang">
</body>
</html>

select列表控件

使用目的是节约开发成本因为此控件中内容很多

基本的使用是 <select></select>嵌套<option></option>
使用selected="selected" 可以控制默认选中项

这个东西说实话可以与定位系统结合
（比如手机里让你填报位置信息哪个东西浏览器如果已经获取了你的位置此处可以不让用户自己选择提高用户体验）

但是<select></select>与<ul></ul>比相对来说使用<ul></ul>更多

因为这个控件的样式不好修改在CSS中

对于有需求的通常使用<ul></ul>来模拟<select></select>列表
没有美化需求的可以这么写但是也最好别这么写后边改不好改

具体使用方法:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表单select下拉列表</title>
</head>
<body>选择城市:<select><option>--请选择--</option><option selected="selected">北京市</option><option>天津市</option><option>山东省</option><option>台湾省</option><option>武汉市</option><option>尚未开发太多了别整了</option></select></body>
</html>

表单label标签

用于绑定一个表单元素当点击label标签时，被绑定的表单会自动获得输入焦点

具体使用方法有两种:
一种为直接控制
另一种为for和id控制

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>label</title>
</head>
<body><!-- 直接控制 --><label>用户名:<input type="text" name="username"></label><br><!-- for 和 id 控制 可以说是id找位置 for来调用--><label for="password">密码:</label><input type="password" name="password" id="password"></body>
</html>

在label标签中最好不要使用for和id方法

注意一个问题:
在css中也有向标签中添加id的方法基础选择器中的 id选择器
id作为唯一标识对象在style样式中定义样式后在标签中来调用
同样的这里的id也适用css中定义的样式
因为id在html中的特殊性所以最好不要用for id 方法使用label标签
会造成很多不必要的麻烦直接用就行了

textarea控件

评论的系统可以提使用这个控件 textarea控件

使用控件 cols 可以控制每行输入多少个字符
rows 显示的行数也就是控制高度和宽度
但是实际开发中因为此控件可以随意的拉动从而改变
本身已经定义的 cols和rows 所以使用CSS来控制具体样式
主要是在这用麻烦

具体使用方法:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表单textarea控件</title>
</head>
<body>有什么想说的评论一下吧:<textarea cols="100" rows="10">	</textarea>
</body>
</html>

form表单域(写上述内容必要的基础要不你写完了这东西没地提交)

在一个完整的表单(如用户注册的注册信息)制作完成后
需要有form控件来把整个内容上传到服务器的数据库中

form需要嵌套所有写入的表单控件

元素	属性值	具体解释
action	url地址	把内容上传后端服务器存储地址
method	get/post	设定表单的数据提交方式	我还没学大概有个了解从表象上判断get方式容易泄露信息因为使用get提交方式所有的表单信息会出现在浏览器的地址栏中 post提交方式没有这个问题具体的情况等我学了我再解释
name	最好是服务器中对应数据库的表名	//我猜的等我学完我把这改了	指定提交的表的名称区分提交的内容跟具体的数据库如何存放信息有关系	//我猜的等我学完我把这改了

综合表单所有基本内容单纯实现个注册: 请忽略css瞎弄俩不标准

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>用户注册页</title><!-- 别搭理我 --><style type="text/css">tr {height: 40px;}</style>
</head><body>
<!-- 没服务器弄个空地址 --><form action="" method="get" name="create"><table align="center" width="600" cellspacing="20"><thead><caption><h3 style="color: gray;">搞颜色交友网站，来宝贝展示一下</h3></caption></thead><tbody><tr><td>性别</td><td><input type="radio" name="sex" value="男"><img src="images/man.jpg"><input type="radio" name="sex" value="女"><img src="images/women.jpg"></td></tr><tr><td>生日</td><td ><select><option>--请选择年--</option><option>1990</option><option>1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option><option>1996</option><option>1997</option><option>1998</option><option>1999</option><option>2000</option><option>年太多了整这么多年干啥</option></select><select><option>--请选择月--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select><select><option>--请选择日--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option><option>日他娘的也忒多了就这样吧</option></select></td></tr><tr><td>您的位置</td><td>				<input type="text" name="loaction" value="北京" style="color: gray;"></td></tr><tr><td>婚姻状况</td><td><input type="radio" name="marriage" value="未婚" checked="checked">未婚<input type="radio" name="marriage" value="离异">离异<input type="radio" name="marriage" value="丧偶">丧偶</td></tr><tr><td>学历</td><td>				<input type="text" name="Education" value="本科" style="color: gray;"></td></tr><tr><td>月薪</td><td>				<input type="text" name="Salary" value="10K" style="color: gray;"></td></tr><tr><td>择偶类型</td><td><input type="checkbox" name="Spouse type" value="萝莉型">萝莉型<input type="checkbox" name="Spouse type" value="御姐型">御姐型<input type="checkbox" name="Spouse type" value="顾家型">顾家型<br><input type="checkbox" name="Spouse type" value="鲜肉型">鲜肉型<input type="checkbox" name="Spouse type" value="大叔型">大叔型<input type="checkbox" name="Spouse type" value="暖男型">暖男型</td></tr><tr><td>自我简介</td><td><textarea cols="50" rows="5"></textarea></td></tr><tr><td></td><td><input type="checkbox" name="User notice" checked="checked" value="yes">我同意<a href="#">注册条款</a>和<a href="#">隐私收集政策</a></td></tr><tr><td></td><td><input type="image" name="create submit" src="images/btn(1).png"></td></tr><tr><td></td><td><a href="登陆.html">已有账户,立即登陆</a></td></tr><tr><td colspan="2"><h3>本人遵守以下承诺</h1><ul><li style="color: gray;">年满十八周岁</li><li style="color: gray;">恋爱情况未单身</li><li style="color: gray;">遵循认真严肃态度</li><li style="color: gray;">寻找真心相爱另一半</li></ul></td></tr></tbody></table></form></body>
</html>

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

杂物标注流程
杂物标注流程一、安装anaconda 这里推荐安装python3.6，因此对应的anaconda版本就是Anaconda3-5.2.0(python 3.6.5) ，anaconda的历史发行版本。下载地址： https://repo.continuum.io/archive/ 下载完成以后选择一个盘安装即可，注意安装路径中不能出现中文和特殊字符，只能是…...
2024/5/6 19:49:37
【专题讲解】背包问题
引言背包问题可以分为：01背包（优化：倒序）完全背包（优化：正序）多重背包多重背包的优化01背包有 N 件物品和一个容量是 V的背包。每件物品只能使用一次。第 i 件物品的体积是 vi，价值是 wi。求解将哪些物品装入背包，可使这些物品的总体积不超过背包容量，且总价…...
2024/4/14 23:20:48
Windows10 无法打开.exe可执行文件的解决方法
Windows10 无法打开.exe可执行文件的解决方法问题描述：刚刚因为好奇使用福昕PDF编辑器打开.caj文件，但是一打开发现我好像中毒了，这边福昕不断的自动开启，而且可以看到我电脑上的应用都变成了福昕编辑器的图标。然后我还以为是系统出问题了，接着就是重启，但是重启之后发…...
2024/4/17 21:39:37
【String注解驱动开发】你了解@PostConstruct注解和@PreDestroy注解吗？
写在前面在之前的文章中，我们介绍了如何使用@Bean注解指定初始化和销毁的方法，小伙伴们可以参见《【Spring注解驱动开发】如何使用@Bean注解指定初始化和销毁的方法？看这一篇就够了！！》，也介绍了使用InitializingBean和DisposableBean来处理bean的初始化和销毁，小伙伴们…...
2024/4/18 3:35:08
分析网站登录处的加密算法
在某次渗透过程中，碰到了一个登录的网站。于是随便输了个 admin/123456进行登录尝试，准备burp抓包，进行爆破。发现 password 字段进行了加密，粗略一看很像是MD5加密。但是仔细对比，发现123456的MD5值为：e10adc3949ba59abbe56e057f20f883e ，而不是包中的 9f27a19583a386e…...
2024/4/18 1:17:36
QML防止鼠标事件被过滤（窃取）
如果将 MouseArea 放置在筛选 child 鼠标事件的 Item（例如 Flickable、SwipeView ）中，则当父 Item 识别出手势（例如滑动）时，鼠标事件可能会从 MouseArea 中被过滤。如果将 preventStealing 属性设置为 true，则任何 Item 都不会窃取该 MouseArea 的鼠标事件。（注意，一旦…...
2024/4/25 10:51:03
AI：2020年6月北京智源大会顶级大佬邝子平、李开复、陆奇、张亚勤、曹勖文进行云上圆桌论坛：探讨AI与创业
AI：2020年6月北京智源大会顶级大佬邝子平、李开复、陆奇、张亚勤、曹勖文进行云上圆桌论坛：探讨AI与创业目录2020年北京智源大会人顶级大佬邝子平、李开复、陆奇、张亚勤、曹勖文进行云上圆桌论坛：探讨AI与创业2020年北京智源大会顶级大佬邝子平、李开复、陆奇、张亚勤、…...
2024/4/14 23:20:42
不做加减乘除的加法（c++，简单易懂）
实现两个数的加法，但不能用算数运算符。如num1和num2；num1^num2是num1和num2的亦或操作，提取num1有1的位置，num2是0的位置，或num2有1 的位置，num1是0的位置这部分位置在加法中不需要进位。num1&num2是num1和num2的与操作，这部分是提取num1和num2位置上都有1的部分，…...
2024/4/18 0:56:59
Android getColor弃用后的代替方式
通过java代码设置颜色时经常看到getColor()在以后被弃用的提示如图1，只需要将resources替换成ContextCompat.getColor(context，R.id.xx）如：图2btnloding.setBackgroundColor(ContextCompat.getColor(this,R.color.colorAccent));...
2024/4/14 23:20:41
github 1w+stars Pytorch资源大合集，你想要的这里都有
这是阿三的第 62 期分享作者 | 阿三首发 | 程序员遇见GitHub大家好，我是阿三，今天给大家带来的是Pytorch资源大合集。一.Awesome-Pytorch-list在这个仓库中，作者总结了Pytorch方方面面的资源，从NLP到CV到概率统计等等。1. NLP与语音资源（41个）2. CV资源（30个）3.概率与…...
2024/4/14 23:20:41
深度学习中的超参数以及两个重要的超参数——学习率和batch_size
前言在深度学习中有很多参数是我们在训练模型之前自己设定的，我们把这些参数就称为——超参数。其中主要超参数包括了:学习率、batch_size、梯度下降法循环的数量、隐藏层数目、隐藏层单元数目、激活函数的选择等。 1.超参数 2.学习率 3.batch_size1.超参数 1.1 超参数的选择 …...
2024/4/14 23:20:38
Vue 组件 data 为什么必须是函数(分析源码，找到答案)
Vue 组件 data 为什么必须是函数文章目录Vue 组件 data 为什么必须是函数要理解这个问题，得从原型说起3 个栗子理解后在看源码使用 debugger，看下 new vue 发生了什么1. 走到了初始化 vue 的步骤2. 来到 init 方法内部3. 来到 initState 方法4. initData 方法小结new Vue 的…...
2024/4/19 11:07:58
leetcode-三角形最小路径和
给定一个三角形，找出自顶向下的最小路径和。每一步只能移动到下一行中相邻的结点上。相邻的结点在这里指的是下标与上一层结点下标相同或者等于上一层结点下标 + 1 的两个结点。例如，给定三角形： [ [2], [3,4], [6,5,7], [4,1,8,3] ] 自顶向下的最小路径和为 11（即…...
2024/4/14 23:20:36
mysql精选04集（数据库表关系及其优化）
文章目录MYSQL表关系及优化一、外键（Foreign Key）1、**作用：**约束当前表的某列值必须取自于另一张表的主键列值2、**语法：**案例演示3、对已有表增加外键4、删除外键**二、级联操作**1.语法：2.级联操作取值三、E-R模型1、**什么E-R模型 entity - Relationship 模型**2、概…...
2024/4/14 23:20:35
一起学flask(二)——创建第一个flask程序
一、创建flask的应用对象app = Flask(__name__)flask作为轻量级的web框架，不需要像django那样，什么内容都实现在settings、urls或者views里面进行配置。比如应用直接像上面那样创建一个Flask的对象就可以了，传入了魔法属性 "_ _name_ _"的作用是flask会以这个模块…...
2024/4/14 23:20:34
EasyUI之tabs组件
文章目录前言Tabs（选项卡）tabs组件效果图实现代码关闭选项卡总结前言Tree组件实现树形菜单 https://blog.csdn.net/licmi/article/details/106897820.上篇博客做的是一个树形菜单选项卡，今天来完善一下。首先分析需求：浏览器请求index.jsp，看到首页一个选项卡，当点击某…...
2024/4/18 23:03:07
UnityUGUI源码阅读之Graphic
关于Graphic组件Graphic组件是UGUI中比较重要的一个组件它必须要要有 CanvasrRenderer组件以级RectTransform 组件 RectTransform 是用来存储Rect的信息的，锚点，轴心，宽高，缩放，旋转，这个组件几乎所有组件多会使用，除了一些事件层的,比如各种事件处理器， anchoredPos…...
2024/4/20 16:33:03
Spring-Cloud-Gateway 源码解析 —— 过滤器 (4.8) 之 WebClientHttpRoutingFilter
1. 概述本文主要分享 WebClientHttpRoutingFilter 的代码实现。WebClientHttpRoutingFilter ，Http 路由网关过滤器。其根据 http:// 或 https:// 前缀( Scheme )过滤处理，使用基于 org.springframework.cloud.gateway.filter.WebClient 实现的 HttpClient 请求后端 Http 服务…...
2024/4/28 14:08:35
netty入站出站
刚开始看netty入站出站真是个难以理解的问题，总觉得当初设计它的人是不是瓦特了，但是明白之后却发现它有它的道理，需要我们要有一定的理解。in:InboundHandler out:OutboundHandler 上面代码表示为： pipline.addLast(in1).addLast(out2).addLast(in2).addLast(out1);上面这…...
2024/4/20 9:46:48
第一章Python入门
Python介绍简介 Python是一种解释型、面向对象的语言。特点可读性强简洁 Python是由C语言开发，但是不再有C语言中指针等复杂数据类型，Python的简洁性让开发难度和代码幅度大幅下降，开发任务大大简化。面向对象免费和开源可移植性和跨平台 Python会被编译为与操作系统相…...
2024/4/14 23:37:49

前端学习记录3-HTML

前端学习记录3-HTML

列表

无序列表ul-li

表格与无序列表的区别

有序列表ol-li

自定义列表dl-dt-dd

表单

input控件

select列表控件

表单label标签

在label标签中最好不要使用for和id方法

textarea控件

form表单域(写上述内容必要的基础要不你写完了这东西没地提交)

相关文章

最新文章

前端学习记录3-HTML

前端学习记录3-HTML

列表

无序列表ul-li

表格与无序列表的区别

有序列表ol-li

自定义列表dl-dt-dd

表单

input控件

select列表控件

表单label标签

在label标签中最好不要使用for和id方法

textarea控件

form表单域(写上述内容必要的基础 要不你写完了这东西没地提交)

相关文章

最新文章

form表单域(写上述内容必要的基础要不你写完了这东西没地提交)