HTML实战

HTML实战

标题

  • 标题排版

image.png

img标签路径书写的两种方式:

  1. 绝对路径

    1. 绝对磁盘路径:C:\User…
    2. 绝对网络路径:https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
  2. 相对路径

./ : 当前目录
../ : 上一级目录

宽度和高度
设置一个宽度,高度会等比例缩放
单位:px 或者 %

  • 标题样式

使用css来控制样式

  • 行内样式:对一个标题生效
  • 内嵌样式:写在style标签中,通常写在head标签中
  • 外联样式:写在一个单独的css文件中,通过link来引入

image.png

span 行内标签进行包裹

CSS选择器:

  1. 元素选择器 h1 a span
  2. id选择器
    image.png

image.png

  1. 类选择器
    image.png

优先级: id > 类 > 元素

  • 超链接
    image.png
    image.png

正文

视频、音频

image.png
image.png

css

首行缩进 text-indent : 50px
行高 line-height : 50px

整体布局

盒子模型

image.png

padding:内边距
border:边框区域
margin:外边距区域

div和span标签

  • div标签
    image.png
  • span标签

image.png

表格标签

image.png

表单标签

image.png
image.png

表单项

input
image.png

select和textarea
image.png

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

ARL灯塔vps云服务器安装

前提是vps服务器已经安装好docker 1、下载压缩包到本地 2、解除不能扫描edu等域名的限制 解压docker_arl.zip,打开docker_arl/config-docker.yaml文件 删除掉edu.cn等限制域名(图中已删除) 3、上传至vps云服务器 将docker_arl文件上传到云服务器opt目录下 这里我…

仅使用 Python 创建的 Web 应用程序(前端版本)第08章_商品详细

在本章中,我们将实现一个产品详细信息页面。 完成后的图像如下。 Model、MockDB、Service都是在产品列表页实现的,所以创建步骤如下。 No分类内容1Page定义PageId并创建继承自BasePage的页面类2Application将页面 ID 和页面类对添加到 MultiPageApp 的页面中Page:定义PageI…

12种相关系数汇总,别再以为只有皮尔逊了!

所谓相关关系是指2个或2个以上变量取值之间在某种意义下所存在的规律,其目的在于探索数据集所存在隐藏的关系网,在19世纪80年代,Galton通过研究人类身高遗传问题首次提出了相关的概念,文中指出相关关系可以定义为:一个…

PGsql 解析json及json数组

创建测试数据 drop table if exists json_test; create table json_test as select 111 as id, {"nodes":{"1692328028076":{"nodeId":"1692328028076","nodeName":"测试表1","nodeType":"DATACO…

报错“MySql配置文件已损坏,请联系技术支持”的解决方法

目录 第一步 打开控制面板,选择管理工具,再选择事件查看器 第二步 在【应用程序】里找到这条报错,记下来文件内容。我自己的来源是“MsiInstaller” 第三步 winR组合键,输入regedit打开注册表 第四步 根据前面报错的文件名定位…

【网页设计期末】咖啡商城网页代码

本文资源:咖啡商城网页代码htmlCSSJavaScript_前端-CSDN问答 1.题目要求 用HTMLCSSJavaScript创建网站项目 说明:制作首页、登录页、列表页。要求: 1、首页页面结构:logo,导航,轮播,商品列表(九宫格结构, 每一格均含图…

如何过有「松弛感」的生活?

最近网上有一个词很流行,叫做「松弛感」。最早的出处似乎是这么一条微博:博主见到一家人出门旅游,行李全部被退回,空手抵达目的地,竟然没人紧张和生气,而是重新安排好行李后继续开心聊天,全程非…

Vue3使用setup-extend简化组件名写法

如果我们在Vue3中要使用setup的语法糖,就需要使用两个script标签,一个用于设置组件的name属性,一个用于编写setup中的代码。如下: 但是我们有觉得光是因为一个name属性就多写一个script标签有点麻烦了。 因此我们可以使用插件来进…

会话技术复习笔记

一.登录校验的需求 什么是登录校验? 所谓登录校验,指的是我们在服务器端接收到浏览器发送过来的请求之后,首先我们要对请求进行校验。先要校验一下用户登录了没有,如果用户已经登录了,就直接执行对应的业务操作就可以…

iOS 面试 Swift基础题

一、Swift 存储属性和计算属性比较: 存储型属性:用于存储一个常量或者变量 计算型属性: 计算性属性不直接存储值,而是用 get / set 来取值 和 赋值,可以操作其他属性的变化. 计算属性可以用于类、结构体和枚举,存储属性只能用于类和结构体。存储属性可…

爬虫学习笔记-get请求获取豆瓣电影排名多页数据★★★★★

1. 导入爬虫需要使用的包 import urllib.request import urllib.parse 2.创建请求函数 def create_request(page): # 定义不变的url部分 base_url https://movie.douban.com/j/chart/top_list?type5&interval_id100%3A90&action& # 根据规律定义data拼接url …

倒排索引的构建与查询

倒排索引是信息检索的重要技术,本文将基于中文短信数据(数据集可在本文所附资源处下载或点击此处链接下载),编程构建倒排索引并实现布尔查询。 1. 功能设计 用户输入查询,按下回车键,如果该查询作为单独的…

宏景eHR FrCodeAddTreeServlet SQL注入漏洞

免责声明:文章来源互联网收集整理,请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该…

微信小程序|摇骰子

目录 简介设计与功能需求确定用户界面设计确定摇骰子动画效果确定随机数生成算法编码实现实现摇骰子动画测试与优化进行功能测试进行性能测试说明简介 制作一个摇骰子小程序是一个有趣且具有挑战性的项目。通过这个项目,你可以学习如何运用编程技术来模拟骰子的摇动和结果显示…

Linux的bash命令语法

可用点 #!/bin/bash # 文件要以上面开始,.sh结尾的文件不需要# 赋权文件可执行权限 chmod x <fileName># 获取java jar包启动的进程id ps -ef | grep *.jar | grep -v grep | awk {print $2}shell变量 变量命令规则&#xff1a; 只能包含字母、数字、下划线&#xff1…

麒麟系统—— openKylin 安装 mongodb

麒麟系统—— openKylin 安装 mongodb 一、准备工作1. 确保麒麟系统 openKylin 已经安装完毕。 二、下载解压 MongoDB二、增加环境变量三、配置MongoDB创建数据目录创建日志文件运行 四、加入到服务中 MongoDB是一款高性能、开源的NoSQL数据库&#xff0c;因其灵活的数据结构、…

基于DistFlow潮流的配电网故障重构MATLAB程序

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 简介 程序采用适用于辐射状网络的DistFlow潮流模型&#xff0c;可输入任意故障线路编号&#xff0c;得到优化重构结果。程序加入了辐射状和连续状约束&#xff0c;保证网络连通性和辐射性&#xff0c;改换成…

Linux CPU 负载说明

一、背景 工作中我们经常遇到CPU 负载高&#xff0c;CPU负载高意味着什么&#xff1f; CPU的负载是怎么计算的&#xff1f; top指令中的各个指标代表什么含义&#xff1f; 二、CPU 负载计算方法 在系统出现负载问题&#xff0c;通常会使用uptime和top确认负载&#xff0c;这两…

15、Kafka ------ SpringBoot 整合 Kafka (自动配置类 KafkaAutoConfiguration 源代码剖析)

目录 SpringBoot 整合 Kafka 的自动配置及源代码剖析Spring Boot 为 Kafka 提供的自动配置KafkaAutoConfiguration Kafka自动配置类源码解析1、自动配置类&#xff1a;KafkaAutoConfiguration 注解解析2、自动配置类&#xff1a;KafkaAutoConfiguration 配置的 bean1、KafkaTem…

2024 年, Web 前端开发趋势

希腊哲学家赫拉克利特认为&#xff0c;变化是生命中唯一不变的东西。这句话适用于我们的个人生活、行业和职业领域。 尤其是前端开发领域&#xff0c;新技术、开发趋势、库和框架不断涌现&#xff0c;变化并不陌生。最近发生的一些事件正在改变开发人员构建网站和 Web 应用的方…