htmlcss基础

html

组成

<!--跟标签-->
<html><!--头标签--><head><!--网页的标题标签--><tltle>测试html</title></head><!--体标签--><body><font color="yellow" size="7">测试体</font></body>
</html>

VSCODE

常用插件

  • open in brower:用浏览器 快捷打开并预览html文件
  • path intellisense:路径自动补全与提示
  • npm intellisense:require 三方文件时路径与文件名提示补全
  • auto rename tag:修改html标签,修改一个另一个自动同步修改
  • css peek:按住ctrl+左键点击class类名可以快速定位到样式表位置,快速修改

使用vscode注意

  • 设置vscode的文件自动保存
  • 快捷键
    alt+shift+向上/下键:复制一行代码
    alt+向上/下键:移动
    ctrl+d:删除

基础标签

标签描述
h1-h6定义标题
font定义文本的字体、字体尺寸、字体颜色
b定义粗体文本
i定义斜体文字
u定义文本下划线
center定义文本居中
p定义段落
br定义换行
hr定义水平线

特殊符号

<: &lt
>: &gt
@: &copy

图片、音频、视频标签

标签描述
img定义图片
audio定义音频
video定义视频

img:定义图片

  • src:规定显示图像的url
  • height:定义图像的高度
  • width:定义图像的宽度

aduio:定义音频,支持mp3,wav,ogg

  • src:规定音频的url
  • controls:显示播放控件

video:定义视频,支持mp4,webm,ogg

  • src:规定视频url
  • controls:显示播放控件

超链接标签

标签描述
a定义超链接,用于链接到另一个资源
href:指定访问资源的url
target:指定打开资源的方式
		_self:默认值,当前页面打开_blank:空白页面打开

列表标签

标签描述
ol定义有序列表
ul定义无序列表
li定义列表项

ol和ul标签均有type属性

表格标签

标签描述
table定义表格
tr定义行
td定义单元格
th定义表头单元格

table:定义表格

  • border:规定表格边框的宽度
  • width:规定表格的宽度
  • cellspacing:规定单元格之间的空白

tr:定义行

  • align:定义表格行的内容对齐方式

td:定义单元格

  • rowspan:规定单元格可横跨的行数
  • colspan:规定单元格可横跨的列数

布局标签

标签描述
div定义html文档中的一个区域部分,经常与css一起使用,用来布局网页
span用于组合行内元素

表单标签

标签描述
form定义表单
input定义表单项,通过type属性控制输入形式
label为表单项定义标注
selcet定义下拉列表
option定义下拉列表的列表项
textarea定义文本域

form表单标签常见属性:

  1. action:将收集的数据提交到具体后台服务器地址
  2. method:提交数据到后台的方式(get/post)

表单项

:表单项,通过type属性控制输入形式

type取值描述
text默认值,单行输入
password密码
radio单选按钮
checkbox复选框
file文件上传按钮
hidden隐藏的输入字段
submit提交按钮,把表单数据发送给服务器
reset重置按钮
button可点击按钮

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

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

相关文章

Python酷库之旅-第三方库Pandas(012)

目录 一、用法精讲 28、pandas.HDFStore.keys函数 28-1、语法 28-2、参数 28-3、功能 28-4、返回值 28-5、说明 28-6、用法 28-6-1、数据准备 28-6-2、代码示例 28-6-3、结果输出 29、pandas.HDFStore.groups函数 29-1、语法 29-2、参数 29-3、功能 29-4、返回…

Python环境配置PyCharm

PyCharm Community设置: A 网络连接 File-Settings-Tools-Web Browsers and Preview-看情况吧[全部删除&#xff0c;换成本地浏览器即可] B Interpreter File-Settings-Project-Python Interpreter-Add Interpreter-System Interpreter-选择 C 系统变量 把B中下载的Pytho…

【从零开始实现stm32无刷电机FOC】【理论】【3/6 位置、速度、电流控制】

目录 PID控制滤波单独位置控制单独速度控制单独电流控制位置-速度-电流串级控制 上一节&#xff0c;通过对SVPWM的推导&#xff0c;我们获得了控制电机转子任意受力的能力。本节&#xff0c;我们选用上节得到的转子dq轴解耦的SVPWM形式&#xff0c;对转子受力进行合理控制&…

JVM之垃圾回收算法详解

垃圾回收算法 Java是如何实现垃圾回收的呢&#xff1f;简单来说&#xff0c;垃圾回收要做的有两件事&#xff1a; 1、找到内存中存活的对象 2、释放不再存活对象的内存&#xff0c;使得程序能再次利用这部分空间 [本质上后续所有的垃圾回收算法&#xff0c;都是在前两种算法的基…

深入解析 StratoVirt 的 vCPU 拓扑(SMP)配置与实现

CPU 拓扑用来表示 CPU 在硬件层面的组合方式&#xff0c;本文主要讲解 CPU 拓扑中的 SMP&#xff08;Symmetric Multi-Processor&#xff0c;对称多处理器系统&#xff09;架构&#xff0c;CPU 拓扑还包括其他信息&#xff0c;比如&#xff1a;cache 等&#xff0c;这些部分会在…

免费下载工具 -- Free Download Manager(FDM) v6.24.0.5818

软件简介 Free Download Manager (FDM) 是一款免费的功能强大的下载管理软件&#xff0c;适用于多种操作系统&#xff0c;包括 Windows、macOS、Android 和 Linux。这款软件的特色在于它快速、安全且高效的下载能力。它可以下载各种热门网站的影片&#xff0c;支持 HTTP/HTTP…

【生成式对抗网络】GANs在数据生成、艺术创作,以及在增强现实和虚拟现实中的应用

一、GANs在数据生成中的应用 生成对抗网络&#xff08;Generative Adversarial Networks, GANs&#xff09;在数据生成领域具有显著的应用价值。GANs通过生成器&#xff08;Generator&#xff09;和判别器&#xff08;Discriminator&#xff09;两个相互竞争的神经网络&#x…

【7.29-1800】

B. Missing Subsequence Sum 题意&#xff1a;构造一个长度不超过 25 的序列&#xff0c;保证任意子集的和的集合为 { x ∣ 1 ≤ x < k a n d k < x ≤ n } \{x|1\leq x<k ~and ~ k<x\leq n\} {x∣1≤x<k and k<x≤n} 【不会解决空缺的问题&#xff0c;看…

Vatee万腾平台:创新科技,驱动未来

在科技日新月异的今天&#xff0c;每一个创新的火花都可能成为推动社会进步的重要力量。Vatee万腾平台&#xff0c;作为科技创新领域的佼佼者&#xff0c;正以其卓越的技术实力、前瞻性的战略眼光和不懈的探索精神&#xff0c;驱动着未来的车轮滚滚向前。 Vatee万腾平台深知&am…

Linux基本命令的使用示例

目录 1实现效果&#xff1a;在downloads目录下创建1个空文件夹empty&#xff0c;创建1个空文件lake.txt&#xff0c;输入任意数据保存后退出 2实现效果&#xff1a;搜索包含关键字"泉眼"的行 3实现效果&#xff1a;重命名文件夹empty为full&#xff0c;复制文件cc…

AngularJS API 深入解析

AngularJS API 深入解析 AngularJS,作为一个强大且灵活的JavaScript框架,自从其诞生以来,就一直是前端开发者构建复杂Web应用的首选工具。本文将深入探讨AngularJS的API,帮助读者理解其核心功能和工作原理。 AngularJS简介 AngularJS由Google开发,并于2010年发布。它是…

Vue3项目如何使用npm link本地测试组件库

一、组件库操作 1、在组件库项目中先运行npm run lib&#xff0c;其效果如下 2、在组件库项目中在运行npm link&#xff0c;其效果如下 会创建一个全局的软连接指向本地的组件库 二、Vue3项目使用 1、在项目中运行 npm link 组件名称&#xff08;即&#xff1a;组件库packag…

ChatGPT提问提示指南PDF下载经典分享推荐书籍

ChatGPT提问提示指南PDF&#xff0c;在本书的帮助下&#xff0c;您将学习到如何有效地向 ChatGPT 提出问题&#xff0c;以获得更准确和有用的回答。我们希望这本书能够为您提供实用的指南和策略&#xff0c;帮助您更好地与 ChatGPT 交互。 ChatGPT提问提示指南PDF下载 无论您是…

swiftui给视图添加边框或者只给某个边设置border边框

直接使用border()就可以给一个视图添加边框效果&#xff0c;但是这种边框会给所有的边都设置上。 border()里面也可以添加属性.border(.blue, width: 5)这种就是设置颜色和宽度。 设置圆角边框 Text("1024小神").padding().cornerRadius(20).overlay(RoundedRectang…

代码随想录算法训练营第16天|513. 找树左下角的值、112. 路径总和、106.从中序与后序遍历序列构造二叉树

打卡Day16 1.513. 找树左下角的值2.112. 路径总和扩展113. 路径总和 II 3.106.从中序与后序遍历序列构造二叉树扩展105. 从前序与中序遍历序列构造二叉树从前序与后序遍历序列构造二叉树&#xff1f; 1.513. 找树左下角的值 题目链接&#xff1a;513. 找树左下角的值 文档讲解…

17.分频器设计拓展练习-任意分频通用模块

(1)Verilog代码&#xff1a; module divider_n(clk,reset_n,clk_out);input clk;input reset_n;output clk_out;wire clk_out1;wire clk_out2;wire [9:0]n;wire m;assign n 9;assign m n % 2;divider_even divider_even_inst(.clk(clk),.reset_n(reset_n),.n(n),.en(!m),.cl…

jQuery Mobile 实例:构建响应式移动网页的实践指南

jQuery Mobile 实例:构建响应式移动网页的实践指南 引言 在移动互联网时代,构建能够在各种设备上良好运行的网页应用至关重要。jQuery Mobile 是一个基于 jQuery 的轻量级移动框架,它允许开发者创建一个在智能手机、平板电脑和桌面电脑上均能流畅运行的响应式网站。本篇文…

【C++】一种优雅的枚举定义的代替技巧

枚举类型 比如&#xff0c;做事件触发系统。一般会用枚举类型&#xff0c;定义事件&#xff1a; enum {EventRoleLevelUp 1, // 玩家等级升级事件EventTaskComplete 2, // 任务完成事件 };在看 https://github.com/alecthomas/entityx 代码时&#xff0c;发现一种更为优…

QT程序异常结束解决方法

在用QT开发第三方SDK的时候&#xff0c;刚开始是运行正常的&#xff0c;但是重装系统之后再次运行程序总是出现&#xff1a;程序异常结束。 以下方法尝试无效&#xff0c;但不失为一种排查方法&#xff1a; 重新安装QT&#xff1b;检查Qt Creator配置&#xff0c;编译器位数和…

下载Windows版本的pycharm

Python环境搭建 第一步下载安装python 等待安装完成 验证python是否安装成功 Python开发工具安装部署 JetBrains: Essential tools for software developers and teams PyCharm: the Python IDE for data science and web development 下载社区版本的PyCharm 双击打开下载好的…