前端-HTML学习

server/2024/9/22 6:26:09/

HTML页面标签设计

html"><div style="width: 50%;height: 100%;border-radius:15px;border: black thin solid;padding-top: 5px;">盒子标签</div><!--div盒子标签属性width:宽height:高background-color:背景色border-radius:边框圆角border:边框(颜色 细线 实线)padding-top 上边距-->
<form>form表单
</form><table border="0" style="width: 100%;"><!--表格标签--><!--表格的行<tr>标签,列标签<td>,<td>的属性align:水平方向 left right center  --><tr><td><input type="password" required placeholder="密码"style="width: 90%;border-radius:4px;height: 25px;"/></td></tr>
<!--input:文本框的required属性:表示该文本框必填input:文本框的placeholder属性是未输入前,文本框默认值input:文本框的style属性 是样式 包括字体大小、颜色、边距input:文本框的type属性字体相关:font-size:设置字体大小。font-family:设置字体类型。font-weight:设置字体粗细,如bold、normal等。font-style:设置字体样式,如italic、normal等。颜色相关:color:设置文本颜色。background-color:设置背景颜色。布局相关:width:设置元素的宽度。height:对于<textarea>元素,可以设置其高度;对于<input type="text">等,通常不直接设					 置高度,而是通过其他方式(如padding、line-height等)间接影响。margin:设置元素的外边距。padding:设置元素的内边距。边框相关:border:设置元素的边框样式,可以简写为border: width style color;。border-width、border-style、border-color:分别设置边框的宽度、样式和颜色。文本对齐和缩进:text-align:对于<textarea>元素,可以设置文本的对齐方式,如left、center、right。但请          		   注意,<input>元素通常不支持text-align属性。text-indent:主要用于<p>等块级元素,对<input>和<textarea>不适用。其他:display:设置元素的显示方式,如block、inline、inline-block等。但请注意,对于<input>				  和<textarea>元素,其display属性通常被浏览器默认处理,不建议直接修改。input:文本框的type属性type="text"  文本框<input type="text" required placeholder="用户名" style="width: 90%;border-							radius:4px;height: 25px;"/>type="password" 密码框<input type="password" required placeholder="密码"style="width: 90%;border-						 radius:4px;height: 25px;"/>type="radio" 单选框<input name="sex" type="radio" checked/>男 &nbsp;&nbsp;type="checkbox" 多选框<input type="checkbox" checked/>游泳<input type="checkbox"/>读书type="submit" 提交按钮type="file" 文件域type="image" 图片按钮type="email" 邮箱框type="url" 网址框type="number" 数字框type="range" 滑块placeholder 文本框的提示内容设置required 非空select:下拉框textarea:多行文本域--></table>
html">内联框架<a
<iframe name="mainframe" width="800px" height="150px" scrolling="yes" onresize="onresize()" src="login.html"/>
html">一基础标签
1:<html>:网页标签
2:<head>:头部(网页标题等信息)
3:<body>:主体(网页的所有内容)
4:<title>标签:网页标题(在浏览器窗口标题栏显示)
5:<meta>标签:网页信息摘要
6:<h1></h1><h6>:标题标签(一段文字的标题,由大道小)
7:<p>段落标签(一段文字的内容)段落之间会有一段距离
8:<br/>换行标签(!!没有结束标签)行与行之间比较紧凑
9:<hr/>水平线标签(!!没有结束标签)
10:字体样式<strong>...</strong>字体加粗<em>...</em>字体倾斜
11:注释<!-- 注释内容 -->
12:特殊符号特殊符号	 字符实体	空格	  &nbsp;	大于号(>)  &gt;	        小于号(<)  &lt;	        引号(")	  &quot;(成对出现)	  版权符号@  &copy;	         
13:图像标签<img src="path" alt="text" title="text"  width="x"  height="y" />src:图片的地址  alt:图像替代文字  title:鼠标悬停提示文字  width:宽度  height:高度
14:链接标签<a href="path" target="目标窗口位置">链接文本或图像</a>href:链接路径   target:链接在那个窗口打开(常用值:_self【自身】、_blank【新建】)①:面间链接从一个页面链接到另外一个页面   ②:锚链接: A页面甲位置到A页面的乙位置在页面乙位置:<a name="名字" >目标乙的位置</a>在页面甲位置:<a href="#名字">甲位置</a>    A页面甲位置到B页面的乙位置  在页面乙位置:<a name="名字" >目标乙的位置</a>在页面甲位置:<a href="页面.html#名字">甲位置</a> ③:功能性链接:二:列表:数据的一种展示形式
1:无序列表(各个列表项之间没有顺序级别之分)<ul type="">:列表声明<li>桔子</li>:每个类表项的起始<li>香蕉</li><li>苹果</li>   </ul>取值	            说明disc	    项目符号显示为实体圆心,默认值square   项目符号显示为实体方心circle   项目符号显示为空心圆2:有序列表(各个列表项之间有顺序之分)<ol type=""><li>桔子</li><li>香蕉</li><li>苹果</li>   </ol>取值	         说明1	   使用数字作为项目符号A/a	   使用大写/小写字母作为项目符号I/i	   使用大写/小写罗马数字作为项目符号
3:定义列表(自定义列表,是标题和注释的结合)<dl>:列表的开始<dt>所属学院</dt>:列表项的起始<dd>计算机应用</dd>:列表项注释的内容<dt>所属专业</dt><dd>计算机软件工程</dd></dl>
三:表格:由指定行和列组成的。<table><tr><td>第1个单元格的内容</td><td>第2个单元格的内容</td>……</tr><tr><td>第1个单元格的内容</td><td>第2个单元格的内容</td>……</tr>   </table><table>属性:边框宽度属性:border<td>属性:属性	          值	        说明alignleft	        左对齐水平对齐方式       center   	居中对齐right	        右对齐valign垂直对齐方式        	 top	       顶端对齐middle	       居中对齐bottom	       底端对齐baseline	       基线对齐<td colspan="n">单元格内容</td>:所跨的列数  <td rowspan="n">&nbsp;</td>:所跨的行数四:框架1:框架:<frameset>适用于整个页面都用框架实现的场合。注意:!!!!!改文档声明:Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">不能有body标签!!!!!<frameset>描述窗口分割<frame>定义放置在每个框架中的HTML页面。<frameset cols="25%,50%,*"  rows ="50%,*" border="5">     <frame src="the_first.html "/>       <frame src="the_second.html "/></frameset>      cols="25%,50%,*" :将页面横向分割3列,1列占总窗口的25%,2列占50%,3列占剩余部分rows="50%,*"     :将页面纵向分割2行,1行占窗口的50%,2行占剩余部分窗口间的关联(触发链接的时候,second.html将在名为firstframe的<frame>部分中显示)框架页面中:<frame src="first.html " name="firstframe"/> 分页面中:<a src="second.html"  target="firstframe">....</a>2:内联框架:<iframe>:适用于将部分框架内嵌入页面的场合。<iframe src="引用的页面地址" name="框架名称" width="框架宽度" height="框架高度"framborder="边框粗细" scrolling="是否出现滚动条"  noresize="是否可以调整框架窗口大小"<a href="third.html" target="mainFrame">下边显示第三页</a><br /><iframe name="mainFrame" width="800px" height="150px" scrolling="yes" noresize="noresize"  src="subframe/the_second.html" />五:表单<form>:表单创建(其他的标签需在它的里面才能生效)<form method="提交方式"  action="提交地址" >  </form>1:method="post";  【比较安全】提交后,地址栏中的URL信息没有发生变化,不显示表单数据2:method="get";提交后,地址栏中URL信息中清晰的显示出表单提交的数据内容具体表单1:文本框<input type="text"  name="标签的名字"  value="默认值" size="文本框的长度" maxlength="输入数据的长度"/>2:密码框<input type="password"  ......................../>3:单选按钮框(在一组单选框中的name值必须相同,单选功能才生效)<input type="radio" name="gen" value="" checked="checked(默认选项)"/>&nbsp;<input type="radio" name="gen" value=""/>女     4:复选框(在一组复选框中的name值一般取相同,这样可以根据name一次性提交)<input type="checkbox" name="interest" value="sports" checked="checked"/> 运动<input type="checkbox" name="interest" value="talk" />聊天<input type="checkbox" name="interest" value="play"/>玩游戏5:列表框<select name="列表名称" ><option value="可选项的值" selected="selectde"(默认显示)/>一月</option><option value="2" >二月</option><option value="3" >三月</option></select>5.1图片提交按钮(虽然type属性不是submit,但是依然具备提交的功能)<input type="image" src="图片地址" />6:普通按钮<input type="button" name="" value="" onclick="alert(this.value)"/>7:重置按钮<input type="reset" name="" value="重置"/>8:提交按钮<input type="submit" name="" value="提交" />9:多行文本域(不能用css样式的width和height来控制多行文本框的大小)<textarea name="" cols="列的宽度" rows="行数" >内容.....</textarea>10:文件域<form action="" method="post" enctype="multipart/form-data">enctype="multipart/form-data"
:将表单数据分为多部分提交(提交表单的数据包括表单数据和文件数据等多部分内容)     <input type="file" name="" /><input type="submit" name="" value="上传"/>11:隐藏域(不需要展示给用户,但程序调用时要用到的值,写在隐藏域中)1:<input type="hidden" value="000" name="" />12:表单的只读(readonly)与禁用(disabled)设置<input type="text" name="" value="admin" readonly="readonly"/> <input type="submit" name="" value="提交" disabled="disabled" />13:语义化的表单(结构合理,代码简洁)①:域的定义:将表单元素放到域中,浏览器就会以特殊的方式显示他们<fieldset></fieldset>②:域标题:给设置的域设置一个标题<legend></legend>③:表单元素的标注:增强鼠标的可用性<label for="表单元素的id" >标注的文本</label><input type="radio" name="" id="表单元素id"/>

http://www.ppmy.cn/server/120158.html

相关文章

工业一体机在汽车零部件工厂ESOP系统中的关键作用

在当今竞争激烈的汽车市场中&#xff0c;汽车零部件工厂的高效生产和严格质量控制至关重要。而工业一体机在汽车零部件工厂的 ESOP&#xff08;电子标准化作业程序&#xff09;系统中发挥着关键作用。 一、汽车零部件工厂面临的挑战 汽车零部件的生产过程复杂且要求严格&#…

springboot每次都需要重设密码?明明在springboot的配置中设置了密码

第一步&#xff1a;查看当前的密码是什么&#xff1f; 打开redis-cli.exe&#xff0c;输入config get requirepass&#xff0c;查看当前的密码是什么&#xff1f; 接着&#xff0c;修改redis的配置文件&#xff0c;找到redis的安装目录&#xff0c;找到相关的conf文件&#x…

leetcode练习 二叉树的最大深度

给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;3提示&#xff1a; 树中节点的数量在 [0, 104] 区间内。-100 …

【iOS】KVC的学习

【iOS】KVC的学习 文章目录 【iOS】KVC的学习前言KVC定义KVC设值KVC取值KVC使用keyPathKVC处理异常处理nil异常 KVC的一些应用修改动态的设置值实现高阶的消息传递 小结 前言 笔者简单学习了有关与KVC的相关内容&#xff0c;这里写一篇博客简单介绍一下相关内容。 KVC 定义 KV…

OpenCV特征检测(4)检测图像中的角点函数cornerHarris()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 Harris 角点检测器。 该函数在图像上运行 Harris 角点检测器。类似于 cornerMinEigenVal 和 cornerEigenValsAndVecs&#xff0c;对于每个像素 (…

SpringBoot 消息队列RabbitMQ 消息确认机制确保消息发送成功和失败 生产者确认

介绍 有Publisher Confirm(成功)和Publisher Return(失败)两种确认机制。开启确机制认后&#xff0c;在MQ成功收到消息后会返回消息给生产者。 消息投递到了MQ &#xff0c;但是路由失败。此时会通过PublisherReturn返回路由异常原因&#xff0c;然后返回ACK&#xff0c;告知…

卡牌抽卡机小程序:市场发展下的创新

今年以来&#xff0c;卡牌成为了行业中的黑马&#xff0c;在国内迅速流行&#xff0c;成为消费者的心头好。小小的卡牌创下了百亿的市场规模&#xff0c;发展前景巨大&#xff01; 不过&#xff0c;随着卡牌市场的不断增长&#xff0c;市场发展也需要进行创新。线上抽卡机小程…

【MySQL】在MySQL中STR_TO_DATE()

1.在MySQL中STR_TO_DATE() 在MySQL中&#xff0c;STR_TO_DATE() 函数用于将字符串转换为日期格式。这个函数非常有用&#xff0c;当你需要将文本数据转换为可由MySQL日期和时间函数处理的格式时。 1.1 语法 STR_TO_DATE() 函数的基本语法如下&#xff1a; STR_TO_DATE(date…