2024-03-11,12(HTML,CSS)

1.HTML的作用就是在浏览器摆放内容。

2.HTML基本骨架

head:网页头部,是给浏览器看的代码,例如CSS

body:网页主体,是给用户看的代码,例如图片,文字。

title:网页标题

3.标签的两种关系

父子关系:嵌套

兄弟关系:并列

4.<h1>标题在网页中只能用一次,<h2-6>没有次数限制,段落标签<p>,<br>换行标签,<hr>水平线标签

5.文本格式化标签,为文本添加特殊格式,用于突出重点

6.图像标签<img src=" ">,title:鼠标悬停显示信息,alt:没加载出图片的显示信息

7.文件路径:. 当前文件夹,.. 上一级文件夹  / 进入文件

8.超链接标签<a href = " ">,target="_blank"跳转的时候打开新窗口

9.音频标签<audio src = " ">,视频标签<video src = "" >

10.网页制作思路:从上至下,先整体在局部,逐步分析制作

分析内容,写代码,保存,刷新浏览器,看效果

11.列表,表格,表单

不同场景,不同选择

12.列表:布局内容排列整齐的区域。

无序列表:布局排列整齐,不需要按照规定顺序的区域。

标签:ul嵌套li,ul是无序列表,li是列表条目

<ul>里面只能由li,li里面可以有任何内容

13.有序列表:布局排列整齐的需要规定顺序的区域

标签:ol嵌套li,ol是有序列表,li是列表条目

<ol>里面只能由li,li里面可以有任何内容

14.定义列表

标签:dl嵌套dt和dd,dl是定义列表,dt是定义列表的标题,dd是定义列表的描述或者详情。

dl里面只能由dt和dd,dt和dd里面可以有任何东西

15.表格:类似excel,用来展示数据

标签:<table>嵌套tr,tr嵌套td/th

单元格也是可以合并的:跨行跨列都行

合并单元格步骤:

1)明确合并的目标

2)保留最左最上的单元格,添加属性(属性取值是数字,数字表示要合并的单元格数量)

        跨行合并:保留最上的单元格,添加属性rowspan

        跨列合并:保留最左的单元格,添加属性colspan

3)删除其他单元格

16.表单

作用:收集用户信息

使用场景:登录页面,注册页面,搜索区域

<input标签>,type属性不同,则功能不同

input标签的占位文本:就是提示信息给用户需要输入什么

下拉菜单:

标签:select嵌套option,select是下拉菜单整体,option是下拉菜单的每一项

17.文本域标签

用于多行输入文本的表单控件

标签:textarea

18.基础选择器作用:找标签

19.CSS定义

层叠样式表(Cascading Style Sheets,缩写为CSS),是一种样式表语言,用来描述HTML文档的呈现(美化内容)

书写位置:title标签下方添加style双标签,style标签里面书写CSS代码

CSS引入方式:

内部样式表:学习使用:CSS代码写在<style>标签里面

外部样式表:开发使用

        CSS代码写在单独的CSS文件中.css

        在HTML使用<link标签引入

行内样式表:配合JavaScript使用

20.CSS的选择器

标签选择器:查找标签,设置样式

        使用标签名作为选择器,选中同名标签设置相同的样式。

类选择器(常用):查找标签,差异化的设置标签的显示效果。一个类选择器可以给不同的标签使用

        步骤:

                定义类选择器  .类名(有个.)

                使用类选择器  标签添加 class = “类名”(没有.)

id选择器:

        作用:查找标签,差异化设置标签的显示效果

        场景:id选择器一般配合Javascript使用,很少用来设置CSS样式

        步骤:

                定义id选择器  #id名

                使用id选择器  标签添加id = “id名”

        同一个id选择器在一个页面中只能使用一次

通配符选择器:

        作用:找到所有标签,设置相同的样式

        通配符选择器:*,不需要调用,浏览器自动查找页面所有标签,设置相同的样式

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

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

相关文章

Midjourney绘图欣赏系列(十一)

Midjourney介绍 Midjourney 是生成式人工智能的一个很好的例子&#xff0c;它根据文本提示创建图像。它与 Dall-E 和 Stable Diffusion 一起成为最流行的 AI 艺术创作工具之一。与竞争对手不同&#xff0c;Midjourney 是自筹资金且闭源的&#xff0c;因此确切了解其幕后内容尚不…

超简单的html+css魔幻霓虹灯文字特效

超简单的htmlcss魔幻霓虹灯文字特效&#xff0c; 效果如下 动态效果&#xff0c;自行查看&#xff0c;创建一个空白的html文件&#xff0c;将下面代码拷贝进去&#xff0c;双击html文件运行即可 <!DOCTYPE html> <html lang"zh-CN"> <head><…

基于Redis实现分布式锁、限流操作(基于SpringBoot)的实现

基于Redis实现分布式锁、限流操作——基于SpringBoot实现 本文总结了一种利用Redis实现分布式锁、限流的较优雅的实现方式本文原理介绍较为通俗&#xff0c;希望能帮到有需要的人本文的demo地址&#xff1a;https://gitee.com/rederxu/lock_distributed.git 一、本文基本实现…

测试用例的设计(2)

目录 1.前言 2.正交排列(正交表) 2.1什么是正交表 2.2正交表的例子 2.3正交表的两个重要性质 3.如何构造一个正交表 3.1下载工具 3.1构造前提 4.场景设计法 5.错误猜测法 1.前言 我们在前面的文章里讲了测试用例的几种设计方法,分别是等价类发,把测试例子划分成不同的类…

第九节:揭开交互的秘密:如何制作原型图

交互设计与用户体验(上) 一、交互、原型的概念及关系 1、什么是交互? 交互(interaction)是指用户与产品之间的互动,即用户输入(input),产品对应给出反馈(Feedback)或输出(Output)的过程。简单可以理解为【交流和互动】。我们把任何两个系统之间的交互都可以看做【对…

P4513 小白逛公园 习题笔记(线段树维护区间最大连续子段和)

传送门https://www.luogu.com.cn/problem/P4513本文参考了董晓老师的博客 这道题着实想了很长时间&#xff08;新手&#xff09;&#xff0c;只能想到一个O&#xff08;mn&#xff09;的dp普通写法&#xff0c;那么遇上区间修改问题改怎么操作呢。答案很明显&#xff0c;线段树…

JVM垃圾收集算法

标记清除算法 1先把垃圾对象标记出来 2然后再进行挨个清除 缺点&#xff1a; 1.清除后的内存空间是不连续的碎片&#xff0c; 2.效率也不高&#xff08;相对于复制算法&#xff0c;复制算法是一次性清除&#xff0c;标记清除是挨个清除&#xff09; 复制算法&#xff08;适…

图论(蓝桥杯 C++ 题目 代码 注解)

目录 迪杰斯特拉模板&#xff08;用来求一个点出发到其它点的最短距离&#xff09;&#xff1a; 克鲁斯卡尔模板&#xff08;用来求最小生成树&#xff09;&#xff1a; 题目一&#xff08;蓝桥王国&#xff09;&#xff1a; 题目二&#xff08;随机数据下的最短路径&#…

基于EasyCVR视频技术的流媒体视频融合与汇聚管理系统建设方案

流媒体视频融合与汇聚管理系统可以实现对各类模块化服务进行统一管理和配置等操作&#xff0c;可实现对应用服务的整合、管理及共享&#xff0c;以标准接口的方式&#xff0c;业务平台及其他第三方业务平台可以方便地调用各类数据&#xff0c;具有开放性和可扩展性。在流媒体视…

前后端链条产生的跨域问题

环境&#xff1a; vitevue3 .net 6 vsstudio2022C# asp .net core webapi 看别的up说这个第一条报错是因为&#xff1a;后端没有允许跨域导致的 解决办法: 1.在后端添加允许跨域 Program.cs //添加跨域策略builder.Services.AddCors(options >{options.AddPolicy(…

生成式人工智能服务安全基本要求实务解析

本文尝试明晰《基本要求》的出台背景与实践定位&#xff0c;梳理《基本要求》所涉的各类安全要求&#xff0c;以便为相关企业遵循执行《基本要求》提供抓手。 引言 自2022年初以来&#xff0c;我国陆续发布算法推荐、深度合成与生成式人工智能服务相关的规范文件&#xff0c;…

ARM学习(25)链接装载高阶认识

ARM学习&#xff08;25&#xff09;链接装载高阶认识 1、例子引出 笔者先引入几个编译链接的例子来介绍一下&#xff1a; 声明无效&#xff1a;declared implicitly&#xff1f;&#xff0c;属于编译错误还是链接错误&#xff1f; 编译阶段的错误&#xff0c;属于编译错误&am…

【C++教程从0到1入门编程】第八篇:STL中string类的模拟实现

一、 string类的模拟实现 下面是一个列子 #include <iostream> namespace y {class string{public: //string() //无参构造函数// :_str(nullptr)//{}//string(char* str) //有参构造函数// :_str(str)//{}string():_str(new char[1]){_str[0] \0;}string(c…

【数据分享】2008-2022年全国范围逐年NO2栅格数据(免费获取)

空气质量数据是在我们日常研究中经常使用的数据&#xff01;之前我们给大家分享了2000-2022年全国范围逐年的PM2.5栅格数据、2013-2022年全国范围逐年SO2栅格数据、2013-2022年全国范围逐年CO栅格数据和2000-2022年全国范围逐年PM10栅格数据&#xff08;可查看之前的文章获悉详…

力扣--深度优先算法/回溯算法47.全排列 Ⅱ

思路分析&#xff1a; 使用DFS算法进行全排列&#xff0c;递归地尝试每个可能的排列方式。使用 path 向量保存当前正在生成的排列&#xff0c;当其大小达到输入数组的大小时&#xff0c;将其加入结果集。使用 numvisited 向量标记每个数字是否已经被访问过&#xff0c;以确保每…

科技助力床垫升级,康姿百德实体店品质有保障

在现代社会的快节奏生活中&#xff0c;高质量的睡眠已成为许多人追求的目标。睡眠质量不仅影响着我们的日常生活和工作效率&#xff0c;而且直接关系到身体健康。康姿百德床垫&#xff0c;作为市场上的优选产品&#xff0c;致力于为消费者提供舒适、健康的睡眠体验&#xff0c;…

ArcGIS学习(十七)基于GIS平台的水文分析

ArcGIS学习(十七)基于GIS平台的水文分析 本任务我们来学习”如何结合ArcGIS做水文分析?” 首先要说明的是,这个任务的水文分析是以ArcGIS工具视角来讲的。而水文分析也是“水文学”这个更大的概念下的一个分析方法。 水文学中研究最多的是水文循环,水文循环是一个物理过程…

Ansible介绍以及功能

ansible功能 批量执行远程命令,可以对远程的多台主机同时进行命令的执行 批量安装和配置软件服务&#xff0c;可以对远程的多台主机进行自动化的方式配置和管理各种服务 编排高级的企业级复杂的IT架构任务, Ansible的Playbook和role可以轻松实现大型的IT复杂架构 提供自动化…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Stepper)

步骤导航器组件&#xff0c;适用于引导用户按照步骤完成任务的导航场景。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 仅能包含子组件StepperItem。 接口 Stepper(value?: { index?…

基于ARMA-GARCH模型探究股价的日历效应和节假日效应【思路+代码】

目录 1. 模型定义1.1 ARMA-GARCH模型1.2 引入节假日效应的虚拟变量的新模型1.3 引入日历效应的虚拟变量的新模型 2. 实证部分2.1 准备工作2.2 引入节假日效应虚拟变量的模型建立和结果分析2.3 引入节假日效应和日历效应的虚拟变量的模型建立和结果分析 3. 结语 本文介绍了ARMA-…