day10 前端技术-HTMLCSS

news2025/1/8 12:07:05

HTML

含义:超文本标记语言,静态网页,用于在浏览器显示数据

双标签:<> </>,开始标签和结束标签同时出现

单标签:



属性名:属性后面的值都加双引号

常用的HTML标签

:文档的根标签 :HTML页面的头部标签

”:页面标题

“”:页面主体部分

”:标题标签

”:段落标签

”:块标签

“”:行内标签


”:换行


”:水平线

超链接和锚点

超链接(一般放在a标签里面)

herf:指定页面跳转页面的地址
#:表示当前页面
target=“_blank”:在新窗口打开

<a href="https:www.baidu.com" target="_blank">百度一下</a>

锚,超链接的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CC3MB3ai-1684854345862)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230408195052514.png)]

列表标签

type:改变前面的形状
style:设置前面的形状是否展示

有序列表(ul)

<ul type="circle" style="list-style: none">
    <li>内容 </li>
</ul>

无序列表(ol)

<ol>
  <li>杨玉环</li>
</ol>

自定义列表(dl)

<dl>
  <dt>四大美女</dt>//表头
  <dd>杨玉环</dd>//表体
</dl>

图片标签

src:指定图片的路径
相对路径:相对于当前HTML页面的路径
../:回到上一级
./:当前目录
一般只改宽度,否则失侦
alt:加载失败后用于描述图片
title:鼠标一上去有提示
<a href="https:www.baidu.com">
    <img src="./imags/7.png" alt="小气" width="100px" title="perfect">
</a>

表格标签

使用

进行描述

一行数据使用标签

表头使用标签

表体使用标签

border:边框的宽度
cellpadding:内边距
cellspacing:外边距
align:设置表格的位置
<table width="70%" border="2" cellpadding="10px" cellspacing="0" align="center">
  <!--表头使用th标签-->
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
    
  <tr align="center">
    <td>熊大</td>
    <td>25</td>
  </tr>
</table>

表单标签

该标签的属性名称较多,切记不能搞混

action:将表单的数据提交到哪里

使用标签

所有的标签都写在该标签之下

子标签使用标签

用于收集信息

type具有多种属性

1.单行文本框:type=“text”,输入的信息显示在框中

2.密码输入框:type=“password”,输入文本以点进行显示

3.单选框:type=“radio”

4.复选框:type=“checkbox”,可以进行多个选择

5.普通按钮:type=“button”,没有效果,可以使用js添加效果

6.注册按钮:type=“submit”,将表单提交到action指定的位置

7.重置按钮:type=“reset”,清空表单数据

8.上传文件:type=“file”,将本地的文件进行上传

9.图像域:type=“image”,使用图片代替提交按钮

标签中的其他标签:

name:指定input标签的属性,否则不能提交数据

value:给input标签赋值初始值

checked:设置单选框和复选框是否一开始就被选中

placehlder:提示信息

select标签

设置下拉框

默认是将option标签之间的文本提交到服务器
multiple:多选
size:一次显示多少个
<select name="address" > <!-- multiple size="5"-->
  <!--selected:默认选中的数据-->
  <option value="1" >重庆</option>
  <option value="2"selected>四川</option>
  <option value="3">广州</option>
</select>

文本域

用户录入多行数据

<textarea name="简介" placeholder="输入文本"></textarea>

lue=“1” >重庆

文本域

用户录入多行数据

<textarea name="简介" placeholder="输入文本"></textarea>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/561987.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

『树莓派云台机器人』02. 电脑连接树莓派 配置开发环境

目录 1. 下载ssh交互工具 Xshell 与XFTP&#xff08;有过相关使用经历的朋友可以跳过这一节内容&#xff09;2. 下载VNC远程控制工具软件3. 连接过程4. Xshell 命令工具5. XFTP 文件传送工具6. 关于联网总结 欢迎关注 『树莓派云台机器人』 博客&#xff0c;持续更新中 欢迎关注…

PoseiSwap IDO在Bounce上启动在即,如何参与?

目前&#xff0c;Nautilus Chain 生态基本完成测试&#xff0c;并即将在不久上线主网。PoseiSwap 作为 Nautilus Chain 上的首个 DEX&#xff0c;也即将面向市场并上线正式版本。我们看到&#xff0c; PoseiSwap 也正式发布了新的市场进程&#xff0c;基于其治理代币 POSE 的 I…

转辙机介绍

简介 转辙机是指用以可靠地转换道岔位置&#xff0c;改变道岔开通方向&#xff0c;锁闭道岔尖轨&#xff0c;反映道岔位置的重要的信号基础设备&#xff0c;它可以很好地保证行车安全&#xff0c;提高运输效率&#xff0c;改善行车人员的劳动强度。 分类 01、转辙机按动作时…

如何做出有价值的知识管理文档?

知识管理文档是企业中重要的资产&#xff0c;它可以帮助企业员工更好地理解业务流程、产品功能、标准操作等信息。如何做出有价值的知识管理文档&#xff0c;满足员工知识需求&#xff0c;提高工作效率&#xff0c;本文将探讨以下几个方面&#xff1a; 一、制定有效的知识管理…

jsp网上鞋城系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java 网上鞋城系统 是一套完善的web设计系统&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5 开发&#xff0c;数据库为Mysql&#xff0c;使用j…

建议熟知:2023谷歌新搜索规则!

谷歌作为全球最大的搜索引擎之一&#xff0c;不断更新和调整其搜索算法和规则&#xff0c;以提供更精准、高质量的搜索结果。2023年&#xff0c;谷歌搜索将迎来一系列新的搜索规则&#xff0c;同时&#xff0c;AI工具的快速发展也为谷歌搜索带来了全新的应用场景和可能性。 这…

基于Go开发PaaS平台1

Go开发PaaS平台核心功能 代码仓库地址GitHub - yunixiangfeng/gopaas 1 云原生PaaS平台介绍 随着云计算的发展&#xff0c;越来越多的企业逐步的把IT资源迁移到云上。PaaS平台作为基础设施基座&#xff0c;可以帮助企业快速构建功能丰富的容器云平台&#xff0c;提升交付效率…

应用在智能手表中监测温度的数字红外接近检测模块

智能手表是将手表内置智能化系统、搭载智能手机系统而连接于网络而实现多功能&#xff0c;能同步手机中的电话、短信、邮件、照片、音乐等。显示方式包括指针、数字、图像等。随着对于健身、运动的高度关注&#xff0c;以及大众购买力的增强&#xff0c;智能手表这个可穿戴设备…

SpringCloud 性能优化

Springcloud的性能问题 Springcloud 原始的配置&#xff0c;性能是很低的&#xff0c;大家可以使用Jmeter测试一下&#xff0c;QPS不会到50。要做到高并发&#xff0c;需要做不少的配置优化&#xff0c;主要的配置优化有以下几点&#xff1a; Feign 配置优化hystrix配置 优化…

《水经注地图服务》地图服务与通用设置说明

&#xff08;本文首发于“水经注GIS”公号&#xff0c;关注公号免费领取地图数据&#xff09; 《水经注地图服务》&#xff08;WeServer&#xff09;是一款可快速发布全国乃至全球海量卫星影像的地图发布服务产品&#xff0c;该产品完全遵循OGC相关协议标准&#xff0c;是一个基…

在 Linux 中如何使用 HAProxy、Nginx 和 Keepalived 进行负载均衡?

在现代网络应用中&#xff0c;负载均衡是提高性能和可靠性的关键因素之一。通过将请求分发到多个服务器上&#xff0c;负载均衡可以确保请求被合理地处理&#xff0c;并避免单点故障。 在 Linux 环境下&#xff0c;常用的负载均衡解决方案包括 HAProxy、Nginx 和 Keepalived。…

Vue3全家桶之数据管理

我们都知道Vue框架是通过数据驱动的&#xff0c;所以数据的重要性不言而喻&#xff0c;那么有哪些数据需要管理又是如何进行管理的呢&#xff1f;本节我们就来聊一聊Vue3中的数据管理。 哪些数据需要管理&#xff1f; 在我们的前端项目中&#xff0c;都会有哪些数据呢&#x…

Imagination推出IMG CXM最小GPU,为家庭娱乐带来无比便捷的用户界面

全新IMG CXM GPU核兼容RISC-V并原生支持全HDR&#xff0c;帮助数字电视及整个消费市场降低成本 中国北京 - 2023年5月23日 - Imagination Technologies推出全新IMG CXM GPU系列为对成本敏感的消费级设备带来无缝的视觉体验。该系列包含原生支持全HDR用户界面的最小GPU。 IMG CX…

全面撤出印度市场,郭台铭终于明白了到底谁成就了富士康

郭台铭创立的富士康迅速发展成为全球最大的代工厂&#xff0c;它也因此成为制造业中的标杆&#xff0c;巨大的成绩让郭台铭开始有点飘飘然&#xff0c;以为富士康的成就完全是他的努力&#xff0c;然而随着手机组装业在印度遭受的挫折&#xff0c;郭台铭或许终于清醒认识到富士…

图的拓扑排序AOV网,有向无环图DAG描述表达式,关键路径AOE网。

一&#xff0c;有向无环图DAG描述表达式 1.DAG 若一个有向图中不存在环&#xff0c;则称为有向无环图&#xff0c;记为DAG。 2.用二叉树描述表达式 3.用DAG描述表达式 用二叉树描述表达式有缺点&#xff0c;有些结点大可不必存储&#xff0c;可以共用。 step1:把各个操作数…

【网络编程】| 搭建控制台通信demo

目录 &#x1f981;TCP通信实现原理&#x1f981;TCP单向通信创建服务端创建客户端 &#x1f981;TCP双向通信创建服务端创建客户端 &#x1f981;创建点对点的聊天应用创建发送消息线程和接收消息线程创建服务端创建客户端 &#x1f981;优化点对点聊天应用 &#x1f981;TCP通…

既然有了IP地址,为什么还需要MAC地址?两者到底有啥区别,深入分析后终于明白了!

在计算机网络中&#xff0c;IP地址和MAC地址是两个最基本的概念。IP地址在互联网中是用于标识主机的逻辑地址&#xff0c;而MAC地址则是用于标识网卡的物理地址。虽然它们都是用于标识一个设备的地址&#xff0c;但是它们的作用和使用场景是不同的。 IP地址是在网络层&#xff…

Windows下安装搭建MQTT服务器

服务器常用的有emqx,还有apache apolle&#xff0c;这里用的是emqx 服务端以及客户端可以使用MQTTnet&#xff08;NuGet包&#xff09; 一、MQTT服务器&#xff08; emqx &#xff09;搭建 1. 下载服务器MQTT Broker 从 https://www.emqx.io/cn/mqtt/public-mqtt5-broker下载…

Wi-Fi 6为啥那么快?

Wi-Fi 6&#xff08;802.11ax&#xff09;是当前最新的无线局域网标准&#xff0c;它带来了许多重要的改进和性能提升。本文将详细介绍Wi-Fi 6的速度和性能&#xff0c;以及与前一代标准相比的差异。 Wi-Fi 6的速度提升 相比于前一代标准&#xff08;Wi-Fi 5或802.11ac&#x…

fNIRS最新研究 | 脑间和脑内耦合对运动同步的差异贡献

导读 人类大脑支持行为的一个基本特征是它在脑区之间建立连接的能力。一种有前景的方法认为&#xff0c;在社交行为中&#xff0c;大脑区域不仅与大脑内的其他脑区建立连接&#xff0c;而且还与互动伙伴的其他脑区协调活动。本文探索脑间和脑内耦合是否对运动同步有不同的贡献…