当前位置: 首页 > news >正文

HTML-JavaWeb

目录

1.标题排版

2.标题样式

​编辑 ​编辑

小结

3.超链接

4.正文排版

​编辑​编辑​编辑5.正文布局

6.表格标签

7.表单标签

8.表单项标签

1.标题排版

● 图片标签 :< img>

· src:指定图像的ur1(绝对路径/相对路径)

· width:图像的宽度(像素/相对于父元素的百分比)

· height:图像的高度(像素/相对于父元素的百分比)

● 标题标签 :< h1> -< h6>

● 水平线标签 :< hr>

1. 标题标签

● 标签 :< h1> ...< /h1>(h1→h6 重要程度依次降低)
● 注意:HTML标签都是预定义好的,不能自己随意定义。

2. 水平线标签 <hr>

3. 图片标签

<img src=" ... " width=" ... " height=" ... ">

● 绝对路径:绝对磁盘路径(D:/xxxx)、绝对网络路径(https://xxxx)
● 相对路径:从当前文件开始查找。(./:当前目录, .. /:上级目录)

2.标题样式

 

小结

1. <span>标签

●<span>是一个在开发网页时大量会用到的没有语义的布局标签

● 特点:一行可以显示多个(组合行内元素),宽度和高度默认由内容撑开

2. CSS选择器

● 元素选择器:标签名 { ... }

●id选择器:#id属性值 { ... }

● 类选择器 :. class属性值 { ... }

● 优先级:id选择器>类选择器>元素选择器

3. CSS属性

● color:设置文本的颜色

●font-size:字体大小 (注意:记得加px)

3.超链接

● 标签:

<a href=" ... "target=" ... ">央视网</a>

● 属性:

href:指定资源访问的url

target:指定在何处打开资源链接

     _self:默认值,在当前页面打开
     _blank:在空白页面打开

4.正文排版

● 视频标签 :< video>

src: 规定视频的url

· controls:显示播放控件

· width:播放器的宽度

· height:播放器的高度

● 音频标签 :< audio>

· src:规定音频的url

controls:显示播放控件

● 段落标签 :< p>

● 文本加粗标签 :< b>/<stroag>

5.正文布局

● 布局标签:实际开发网页中,会大量频繁的使用div和span这两个没有语义的布局标签。

● 标签 :< div> <span>

特点:
● div标签:
● 一行只显示一个(独占一行)

● 宽度默认是父元素的宽度,高度默认由内容撑开

● 可以设置宽高(width、height)

● span标签:
● 一行可以显示多个
● 宽度和高度默认由内容撑开

● 不可以设置宽高(width、height)

6.表格标签

7.表单标签

● 场景:在网页中主要负责数据采集功能,如注册、登录等数据采集。

● 标签 :< form>

● 表单项:不同类型的input元素、下拉列表、文本域等。

● <input>:定义表单项,通过type属性控制输入形式

● <select>:定义下拉列表

● <textarea>:定义文本域

属性:

● action:规定当提交表单时向何处发送表单数据,URL

● method:规定用于发送表单数据的方式。GET、POST

8.表单项标签

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

<select>:定义下拉列表,<option>定义列表项。

<textarea>:文本域

相关文章:

HTML-JavaWeb

目录 1.标题排版 2.标题样式 ​编辑 ​编辑 小结 3.超链接 4.正文排版 ​编辑​编辑​编辑5.正文布局 6.表格标签 7.表单标签 8.表单项标签 1.标题排版 ● 图片标签 :< img> src:指定图像的ur1(绝对路径/相对路径) width:图像的宽度(像素/相对于父元素的百…...

数组-检查数组内是否存在和为7的倍数的子序列

一、题目描述 二、解题思路 这里首先要分辨清楚是子序列还是子数组 原数组&#xff1a;[1,2,3,4,5] 子序列&#xff1a;元素和元素之间相对位置保持不变&#xff0c;但是在原数组中不一定连续&#xff0c;如&#xff1a;[1,3,4]&#xff1b; 子数组&#xff1a;元素元素之间保…...

【图像处理与机器视觉】图像处理概述与像素

什么是数字图像处理 改善图像信息&#xff0c;便于作出解释 方便对图像传输&#xff0c;储存&#xff0c;方便机器理解 什么是数字图像 &#xff08;1&#xff09;模拟图像&#xff1a;连续二维函数 f&#xff08;x&#xff0c;y&#xff09;表示&#xff0c;其中 x&#xf…...

虚函数的性能消耗到底在哪?

虚函数的性能消耗 聊到虚函数的性能开销&#xff0c;大家的第一反应肯定是间接调用上&#xff0c;何为间接调用&#xff1f; 当调用一个虚函数时&#xff0c;实际执行的函数版本是在运行时通过虚函数表&#xff08;virtualtable&#xff09;查找确定的。这个查找过程是一个间接…...

Visual Studio 的使用

目录 1. 引言 2. 安装和配置 2.1 系统要求 2.2 安装步骤 2.3 初次配置 3. 界面介绍 3.1 菜单栏和工具栏 3.2 解决方案资源管理器 3.3 编辑器窗口 3.4 输出窗口 3.5 错误列表 3.6 属性窗口 4. 项目管理 4.1 创建新项目 4.2 导入现有项目 4.3 项目属性配置 5. 代…...

Web前端与App前端:深入剖析两者的异同

Web前端与App前端&#xff1a;深入剖析两者的异同 在数字化时代&#xff0c;前端技术已成为连接用户与数字世界的桥梁。然而&#xff0c;当我们谈及前端时&#xff0c;往往会遇到两个相似的概念&#xff1a;Web前端和App前端。这两者是否完全相同&#xff0c;还是各有千秋&…...

初学者必读:Midjourney AI创作工具的简易使用手册!

在数字化时代&#xff0c;AI的应用不断推动着各个领域的发展。在这些领域中&#xff0c;AI在艺术和设计方面的应用引起了广泛的关注。AI绘画软件作为今年的热门&#xff0c;Midjourney 通过其独特的原理和方便的使用方法&#xff0c;为创作者提供了一个全新的创作逼真绘画的平台…...

使用python绘制一个五颜六色的爱心

使用python绘制一个五颜六色的爱心 介绍效果代码 介绍 使用numpy与matplotlib绘制一个七彩爱心&#xff01; 效果 代码 import numpy as np import matplotlib.pyplot as plt# Heart shape function def heart_shape(t):x 16 * np.sin(t)**3y 13 * np.cos(t) - 5 * np.cos…...

关于锂电池短路测试

了解锂电池短路测试 电池短路试验测试标准有哪些&#xff1f;宏展告诉你 - 哔哩哔哩 (bilibili.com) 电池电芯上架亚马逊美国站认证标准和要求UL1642测试 - 知乎 (zhihu.com) CR123A电池的短路试验: CR123A电池为例_锂锰电池所需通过的安全性能测试_纽扣电池_锂锰电池_松下电…...

排序(前篇)

1.排序的概念及其运用 2.插入排序的概念及实现 3.希尔排序的概念及实现 4.选择排序概念及实现 总代码&#xff08;对比各个排序在大量的数据情况排序所化的时间&#xff09;&#xff1a; 1.排序的概念及其运用 1.1排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使…...

Linux学习笔记(二)

一、Linux文件目录 1.命令&#xff1a;tree -L 1 2.挂载命令&#xff08;例如U盘&#xff0c;需要挂载之后才能访问&#xff09;&#xff1a; mount /dev/cdrom /mnt ls /mnt 3.查看登录信息&#xff1a; last / lastlog 4.修改/查看网络信息 vi /etc/sysconfig/netw…...

Git——pull request详细教程

当我们需要协助其他仓库完成更改时&#xff0c;往往会用到git中的Pull Request操作&#xff0c;从而方便团队的协作管理和代码持续集成。 下面是详细的教程步骤。 一. Fork目标项目 比如说我现在要fork以下Qwen-VL的项目&#xff0c;如图所示&#xff1a; 随后点击Create即可…...

Prompt工程与实践

Prompt工程与实践 一、Prompt与大模型 1.1 大模型的定义 大模型本质上就是一个概率生成模型&#xff0c;该模型的模型参数足够大&#xff0c;并且在训练过程中阅读了非常多的各个领域的语料。这个时候&#xff0c;如果通过一个正确的、有效的指令去引导这个模型&#xff0c;…...

电脑录屏怎么录?7个电脑录屏软件免费版强势来袭,赶快收藏!

电脑录屏怎么录&#xff1f;相信很多小伙伴们都不知道怎么在Windows电脑上录屏吧&#xff1f;在当今社会&#xff0c;随着互联网的快速发展&#xff0c;越来越多的小伙伴们开始通过制作视频内容来分享知识、展示技能或者记录生活。电脑录屏成为了一种简单高效的方式&#xff0c…...

ts: 映射类型

映射类型会携带接口的可选和只读属性 interface User { name: string; age?: number; readonly email: string; } interface User { name: string; age?: number; readonly email: string; } type change<T> {[P in keyof T]: T[P] } type obj change<…...

调出idea解决冲突界面

背景 我对idea使用不熟练&#xff0c;还是习惯用git bash来合并代码&#xff0c;合并爆冲突后&#xff0c;我进入idea准备解决冲突&#xff0c;却发现找不到解决冲突的界面。 解决 右击idea中冲突的文件&#xff0c;将鼠标移动到菜单栏的git上&#xff0c;此时应该出现包含有…...

android studio项目 gradle-xx-bin.zip下载失败或很慢的解决方法

一、环境&#xff1a; gradle官网:https://services.gradle.org/distributions/ IDE: android studio 二、下载并拷贝以下文件 下面已 gradle-8.0 为例&#xff0c;gradle缓存目录为&#xff08;file->settings->Build,Execution…->Build Tools->Gradle查看Gradle…...

Python系列:教你使用PyMySQL操作MySQL数据库

Python系列 PyMySQL操作MySQL数据库 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/qq_2855…...

mysql数据库管理面试题-1

1. 描述MySQL架构及其主要组件&#xff08;例如存储引擎、缓存、优化器等&#xff09;。 MySQL的架构可以分为三层&#xff1a; 客户端层&#xff1a;这是用户和MySQL数据库交互的接口&#xff0c;包括命令行工具、图形化管理工具等。 服务层&#xff1a;这是MySQL的核心部分…...

Linux安装zsh并配置oh-my-zsh

配置oh-my-zsh 查看当前shell安装zsh切换到zsh配置ohmysh 查看当前shell cat /etc/shells# /etc/shells: valid login shells /bin/sh /bin/bash /usr/bin/bash /bin/rbash /usr/bin/rbash /bin/dash /usr/bin/dash安装zsh sudo apt install zsh# /etc/shells: valid login s…...

echarts(6大基础图表)的使用

目录 一、vue2挂载 二、柱状图 2.1、基础柱状图介绍 2.2、标记&#xff1a;最大值\最小值(markPoint)、平均值(markLine) 2.3、显示&#xff1a;数值显示(label)、柱子宽度(barWidth)、横向柱状图 三、折线图 3.1、标记&#xff1a;最大值\最小值(markPoint)、平均值(ma…...

React hooks - forwardRef+useImperativeHandle

forwardRefuseImperativeHandle React.forwardRef用法useImperativeHandle用法第三个参数的用法 React.forwardRef与useImperativeHandle配合使用注意事项 React.forwardRef用法 1.创建一个 能够接受到ref属性的React 组件。 ref 用来获取实例&#xff0c;但函数组件不存在实例…...

MyBatis出现:SQLSyntaxErrorException: Unknown column ‘XXX‘ in ‘field list‘

<update id"updateStudent">update tb_students set stu_name${stuName},stu_gender${stuGender},stu_age${stuAge},stu_tel${stuTel}where stu_num ${stuNum}</update> 本质上来说&#xff0c;是Mybatis使用上的错误&#xff0c;不熟悉&#xff0c;理…...

代码随想录算法训练营Day54 | 392.判断子序列、115.不同的子序列 | Python | 个人记录向

本文目录 392.判断子序列做题看文章 115.不同的子序列做题看文章 以往忽略的知识点小结个人体会 392.判断子序列 代码随想录&#xff1a;392.判断子序列 Leetcode&#xff1a;392.判断子序列 做题 借鉴Day53中1143.最长公共子序列的思路&#xff0c;最后改一下判断逻辑即可。…...

利用oracle默认事务隔离级别(提交读)提升多表联查速度

利用oracle默认事务隔离级别(提交读)提升查询速度) 背景介绍&#xff1a; 数据量大查询缓慢&#xff0c;添加太多条件&#xff0c;使用IN走了全表查询导致查询速度缓慢。 解决方案&#xff1a; 版本一&#xff1a; 新建临时表&#xff0c;在查询是将数据插入到临时表中&#…...

B/S架构+java语言+Mysqladr数 据 库ADR药物不良反应监测系统源码 ADR药物不良反应监测系统有哪些作用?

B/S架构&#xff0b;java语言&#xff0b;Mysqladr数 据 库ADR药物不良反应监测系统源码 ADR药物不良反应监测系统有哪些作用&#xff1f; 药物不良反应(ADR)是指在合格药物以正常用量和用法用于预防、诊断、治疗疾病或调节生理功能时所发生的意外的、与防治目的无关的、不利或…...

Matlab中% note that Wilkinson notation (‘L1~L4~1‘) is used to specify the model

fitrm 函数的输入参数不正确&#xff0c;似乎出错的地方是在定义 fitrm 对象时使用了不正确的参数。 fitrm 函数的语法是这样的&#xff1a; rm fitrm(tbl, model, WithinDesign, withinDesign) 其中&#xff1a; - tbl 是一个表格&#xff0c;包含了待分析的数据。 - mod…...

测试测试测试

一分钟速览新闻点&#xff01; 京东前副总裁蔡磊回应被指装病&#xff1a;没有时间、精力和能力应对 百度沈抖&#xff1a;主力模型免费的原因很朴素&#xff0c;希望大家别再天天拉表格比价格 蚂蚁集团CTO何征宇&#xff1a;蚂蚁一直在努力优化和提高AI的可靠性、经济性和易…...

动态规划专题

leecode 221 class Solution { public:int maximalSquare(vector<vector<char>>& matrix) {int n matrix.size();if (n 0) return 0; // 如果矩阵为空&#xff0c;则直接返回0 int m matrix[0].size();vector<vector<int>> ans(n, vector<i…...

.net8.0与halcon编程环境构建

1.安装vs2022 2.安装h-12.0.exe ,不要勾选复选框 3.vs2022新建wpf应用程序 4.依赖项添加项目应用,选择halcondotnet.dll 5.安装System.Drawing 安装 HalconDotNet 安装 Rti.HDevEngineDotNet 在工具箱 空白处右键 应用halcon.dll WPF控件也应用halcon.dll 6.xaml申明hal…...