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

news2024/11/25 8:18:14

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选择器在一个页面中只能使用一次

通配符选择器:

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

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

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

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

相关文章

Redis中set,zset

集合类型set中的数据是无序的&#xff0c;不能重复的 SET SADD key value [value....] 将一个或者多个元素添加到集合set中&#xff0c;重复的元素是无法进行添加的 返回值为添加成功的数字smembers key 获取set中所有的元素&#xff0c;返回元素的顺序是无序的sismember key…

React Hooks 那些事儿

翻了波之前写的文章还有笔记&#xff0c;发现关于前端的文章并不多&#xff08;好歹也划水做过点前端开发&#xff09;。巧了&#xff0c;最近没什么好话题可写&#xff0c;做下 React Hooks 学习笔记吧。 Effect Hook 不得不说 Hook 的出现降低了我们在 React 中处理副作用&…

【漏洞复现】SpringBlade error/list SQL 注入漏洞

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

定时执行专家 —— 让工作更高效,生活更便捷

在现代社会&#xff0c;高效的时间管理已经成为我们工作和生活中不可或缺的一部分。为了实现这一目标&#xff0c;我们经常会借助各种工具和软件来辅助我们完成定时任务。今天&#xff0c;我要为大家介绍一款功能强大、操作简便的定时任务执行软件——《定时执行专家》。这款软…

上海计算机学会 2023年11月月赛 丙组T5 推箱子(数学 思维 排序)

第五题&#xff1a;T5推箱子 标签&#xff1a;排序、数学、思维题意&#xff1a;给定 t t t组数据&#xff0c;每组数据给定长度为 n n n的字符串&#xff0c; 表示箱子&#xff0c; _ \_ _表示空格&#xff0c;求把箱子都推到一起&#xff08;即两两箱子之间没有空格&#…

idea+maven+tomcat+spring 创建一个jsp项目

概述&#xff1a;我真服了&#xff0c;这个垃圾学校还在教jsp&#xff0c;这种技术我虽然早会了&#xff0c;但是之前搞的大多都是springboot web类型的&#xff0c;这里我就复习一下&#xff0c;避免以后忘记这种垃圾技术 第一步&#xff1a;创建maven项目 第二步&#xff1a…

Leetcode 3.12

leetcode hot 100 链表1.两两交换链表中的节点2.随机链表的复制3.排序链表 链表 1.两两交换链表中的节点 两两交换链表中的节点 1.必须要设置一个dummy (temp) 结点2.保存第二个节点3.先让第一个节点指向第三个节点4.再让第二个节点指向第一个节点5.最后让dummy指向第二个节点…

基于深度学习的番茄叶片病害检测系统(含UI界面、yolov8、Python代码、数据集)

项目介绍 项目中所用到的算法模型和数据集等信息如下&#xff1a; 算法模型&#xff1a;     yolov8 yolov8主要包含以下几种创新&#xff1a;         1. 可以任意更换主干结构&#xff0c;支持几百种网络主干。 数据集&#xff1a;     网上下载的数据集&#x…

宏景eHR downlawbase SQL注入漏洞复现

0x01 产品简介 宏景eHR人力资源管理软件是一款人力资源管理与数字化应用相融合,满足动态化、协同化、流程化、战略化需求的软件。面向复杂单组织或多组织客户,支持流程,B/S架构。特别适合集团化管理和跨地域使用的产品,融合了最新的互联网技术和先进的人力资源管理理念和实…

浏览器与服务器通信过程(HTTP协议)

目录 1 概念 2 常见的 web 服务器有 3 浏览器与服务器通信过程 3.1 DNS 3.2 URL 4 HTTP请求方法和应答状态码 4.1 HTTP请求报文段实例 4.2 HTTP请求方法 5 HTTP应答报头和应答状态 5.1 HTTP的应答报头结构 5.2 HTTP的应答状态 1 概念 浏览器与 web 服务器在应用层通…

【DAY11 软考中级备考笔记】数据结构 查找和排序

数据结构 查找和排序 3月12日 – 天气&#xff1a;晴 1. 顺序查找 顺序查找就是简单的从头一个一个的进行比较&#xff0c;注意它的平均查找长度 2. 折半查找 折半查找和二叉排序树一致&#xff1a; 优点&#xff1a;查找效率很高 缺点&#xff1a;要求必须是循序存储并且表中…

UVC 设备框架在 Linux 4.15 内核的演变

1. 概述 发现之前的uvc框架和现在的还是有一些差别的&#xff08;比如从videobuf 过渡到videobuf2&#xff09;&#xff0c;写个blog记录一下&#xff0c;方便以后查询&#xff0c;我的内核版本&#xff1a;Linux 4.15 UVC&#xff08;USB Video Class&#xff09;设备框架是…

Shadertoy内置函数系列 - mod 取模运算

mod函数返回x % 3的结果 先看一个挑战问题题目&#xff1a; Create a pattern of alternating black and red columns, with 9 columns of each color. Then, hide every third column that is colored red.The shader should avoid using branching or conditional statemen…

jeecg 项目 springcloud 项目有一个模块 没加载进来 只需要 把这个模块放到 可以加载到模块的位置 刷新依赖

springcloud 项目有一个模块 没加载进来 只需要 把这个模块放到 可以加载到模块的位置 刷新依赖

docker+elasticsearch

一&#xff0c;环境准备&#xff1a;安装docker&#xff08;往期文章&#xff09; 二&#xff0c;elasticsearch简介&#xff1a; 用于储存数据 三&#xff0c;部署&#xff1a; 1&#xff09;&#xff0c;拉取镜像 使用本作者提供的java17镜像 2&#xff09;&#xff0c;…

刷题日记——01字符串、非素数个数(厦门大学机试)

题目1——01字符串 分析 经过拆解找规律&#xff0c;发现是两个斐波那契 那么代码就好写了呀 #include <stdio.h>unsigned long long f(int n){if(n0||n1){return n;}return (f(n-1)f(n-2))%2333333; }int main(){int n;scanf("%d",&n);printf("%…

服务器段的连接端口和监听端口编程实现

new ServerSocket(int)是开启监听端口&#xff0c;并不是连接端口。真正的连接端口是随机开辟的空闲端口&#xff0c;当连接创建完成后&#xff0c;监听关口可以继续等待下一次连接请求&#xff0c;处于空闲等待状态。 编程实现方式 1 、主线程一直处于阻塞等待状态&#xff0c…

【功能大全】手机短信验证码一键注册登录流程

目录 发送验证码 注册登录 用户表设计 ​编辑申请腾讯云短信与密钥 找到云短信服务 开通腾讯云短信服务 ​编辑​​​​​创建短信签名 ​编辑​编辑创建短信正文模版​编辑​编辑 等待审核 测试短信​编辑 SDK密钥创建 SpringBoot集成腾讯云短信 pom中导入腾讯云短…

Unity 显示MeshRenderer的渲染层级

Unity 显示MeshRenderer的渲染层级 前言源码MeshRendererInspectorSkinnedMeshRendererInspector 参考 前言 Mesh Renderer和Skinned Mesh Renderer组件默认不显示Order&#xff0c;找了个工具显示一下。 源码 下面两个代码放入Editor文件夹中 MeshRendererInspector Me…

互联网高频面:输入URL按下回车后,中间发生了什么

题目 输入URL按下回车后&#xff0c;中间发生了什么 这个问题其实是计算机网络里面很经典的一个问题&#xff0c;不能去死机硬背&#xff0c;很考察对网络架构和通信原理的理解&#xff0c;也是各个互联网大厂喜欢考察的面试题。 一些图片参考了小林的计算机网络面经 从输入…