HTML【常用的标签】、CSS【选择器】

embedded/2024/10/18 18:26:39/

day45

HTML

继day44，w3cschool

常用的标签

k) 表格

表格由 table 标签来定义。每个表格均有若干行（由 tr 标签定义），每行被分割为若干单元格（由 标签定义）。字母 td指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
完整的表格：

html"><!--border设置边框: cellspacing="20px" ：规定单元格之间的空白; cellpadding="5px" ：规定单元格边沿与其内容的空白th：定义表头
-->
<table border="1" cellspacing="20px" cellpadding="5px"><thead> ---- 表头<tr><th>Header</th></tr>	</thead><tbody> --- 表内容<tr><td>Data</td></tr>	</tbody>			<tfoot> -- 表末尾<tr><td>Data</td></tr></tfoot>
</table>

常用：

table - 表格【存在，才有方框格子】
border设置边框【1表示一个像素，px省去了】
tr - 行

  th - 列（加粗、居中）td - 列（向左对齐）

案例1：采用表格来展示学员数据

html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table border="1" width="300px"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>小白</td><td>女</td><td>27</td></tr><tr><td>小黑</td><td>女</td><td>23</td></tr><tr><td>大雷</td><td>女</td><td>25</td></tr><tr><td>小化</td><td>女</td><td>24</td></tr></table></body>
</html>

运行：
表格1

案例2：模拟计算器表格

跨行和跨列的单元格

Colspan:可横跨的列数

Rowspan：可横跨的行数

html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><!--rowspan="2" -- 占2行colspan="2" -- 占2列-->	<table border="1" width="300px" height="400px"><tr><th>C</th><th>-></th><th>+</th><th>-</th></tr><tr><th>7</th><th>8</th><th>9</th><th>*</th></tr><tr><th>4</th><th>5</th><th>6</th><th>/</th></tr><tr><th>1</th><th>2</th><th>3</th><th rowspan="2">=</th></tr><tr><th colspan="2">0</th><th>.</th></tr></table></body>
</html>

运行：
计算器表格

l) 表单

HTML 表单用于收集用户输入

元素定义 HTML 表单： 
html"><form> 
form elements
</form>

HTML 表单包含表单元素。

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

input：组件type属性text、password、radio【name属性相同情况下单选】、checkbox、file不同代表不同
submit【按钮，value设置按钮上的字】、image图片按钮、reset、button
默认选中checked
普通按钮扩展：onclick单击事件绑定一个函数【弹窗alert】

select：【下拉列表】option里写下拉内容
textarea：【文本域】注意：br会显示换行
可以设置只读属性、宽高、style设置固定大小【样式】

html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form>输入框：<input type="text" /><br />密码框：<input type="password"/><br />单选框：<input type="radio" name="xxx"/><input type="radio" name="xxx"/><input type="radio" name="xxx"/><br />多选框：<input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><input type="checkbox" /><br />上传文件：<input type="file" /><br />下拉列表：<select><option>aaa</option><option>bbb</option><option>ccc</option><option>ddd</option><option>eee</option></select><br />文本域：<textarea style="css language-css">resize: none;" cols="20" rows="5" readonly="readonly">高山流水</textarea><br /><input type="submit" value="提交按钮" /><!--将表单数据提交给服务器--><input type="image" src="../img/星空一花.jpg" width="30px"/><!--和提交按钮的功能一致--><input type="reset" value="重置按钮" /><!--将表单数据重置，就类似于清除--><input type="button" value="普通按钮" onclick="fun01()"/><button onclick="fun02()">普通按钮</button></form><script type="text/javascript">function fun01(){//弹框alert("山好");}function fun02(){//弹框alert("水好");}</script></body>
</html>

普通按钮可以自定义样式；函数相当于java中的方法；绑定单机事件

运行：点击按钮触发
表单1

案例： 提交数据

action=“服务器地址” 设置服务器地址
method=“post” 设置请求方式（get/post）
get：服务器地址?键=值&键=值
post：服务器地址 + 数据包
注意：post请求的安全级别比get请求更高，所以表单传输大概率会选择post请求

注意：表单里的数据要想传给服务器，表单组件必须有name属性
做实验代码时用get好查看【地址那里可以看结果值】

html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><form action="服务器地址" method="get">账号：<input type="text" name="username" placeholder="请输入账号..." /><br />密码：<input type="password" name="password" placeholder="请输入密码..." /><br />性别：<input type="radio" name="sex" value="man" checked="checked"/>男<input type="radio" name="sex" value="woman"/>女<br />爱好：<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球<input type="checkbox" name="hobbies" value="basketball"/>篮球<input type="checkbox" name="hobbies" value="shop"/>购物<br />城市：<select name="city"><option value="beijing">北京</option><!--设置value：数据库唯一标识--><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shengzheng">深圳</option><option value="chengdu" selected="selected">成都</option><option value="chongqing">重庆</option><option value="dongguan">东莞</option></select><br /><input type="submit" value="注册" /></form></body>
</html>

运行：点击注册后，虽然现在找不到文件，但可以查看get格式显示
提交表单

补充说明：常见名词的解释

WWW：万维网（world wide web），它是提供网站相关服务，人们可以通过万维网服务进行网上聊天、网上冲浪、网购、搜索资料、查看天气、查看新闻、交友聊天等。

W3C：万维网联盟创建于1994年.是Web技术领域最具权威和影响力的国际中立性技术标准机构。我们学的html、css等标准都是由此机构主导制定。
HTTP：超文本传输协议（HTTP，HyperText Transfer Protocol），也就是浏览器和服务器端的网页传输数据的约束和规范。

CSS

CSS 概述
• CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素
• 是为了解决内容与表现分离的问题
• 多个样式定义可层叠为一
• 样式通常存储在样式表中

理解：内容与样式一起写会难处理，即分离

选择器

选择器，选择你所需要修饰的HTML元素

通配符选择器

通配符选择器 – *

style【head标签里面】*{}

html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">css">*{color: red;}</style></head><body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>用良心做教育</p><p>做真实的自己</p><span>匠心育人</span><span>初心至善</span></body>
</html>

运行：
通配符选择器

基本选择器

基本选择器：
标签选择器：p、h。。。。。。
类选择器：【.开头】class属性标记
ID选择器：【#开头】id属性标记

标签选择器
html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">css">/** 知识点：基本选择器 -- 标签选择器*/p{color: red;}</style></head><body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>用良心做教育</p><p>做真实的自己</p><span>匠心育人</span><span>初心至善</span></body>
</html>

运行：
标签选择器

类选择器
html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">css">/** 知识点：基本选择器 -- 类选择器* 注意：类选择器使用.开头*/.myclass{color: red;}</style></head><body><h1 class="myclass">一级标签</h1><h2>二级标签</h2><h3 class="myclass">三级标签</h3><h4>四级标签</h4><h5 class="myclass">五级标签</h5><h6>六级标签</h6><p>用良心做教育</p><p>做真实的自己</p><span>匠心育人</span><span>初心至善</span></body>
</html>

运行：
类选择器

ID选择器
html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">css">/** 知识点：基本选择器 -- ID选择器* * 注意：* 		id选择器使用#开头* 		id唯一，不能重复*/#myid{color: red;}</style></head><body><h1 id=myid>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>用良心做教育</p><p>做真实的自己</p><span>匠心育人</span><span>初心至善</span></body>
</html>

运行：
ID选择器

三种基本选择器的优先级

ID选择器 > 类选择器 > 标签选择器

html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">css">p{color: red;}.myclass{color: green;}#myid{color: blue;}</style></head><body><p id="myid" class="myclass">用良心做教育</p></body>
</html>

运行：
基本选择器的优先级别

群组选择器

群组选择器【就是选择器组合作用】

html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">css">/** 知识点：群组选择器*/h1,p,span{color: red;}</style></head><body><h1>一级标签</h1><h2>二级标签</h2><h3>三级标签</h3><h4>四级标签</h4><h5>五级标签</h5><h6>六级标签</h6><p>用良心做教育</p><p>做真实的自己</p><span>匠心育人</span><span>初心至善</span></body>
</html>

运行：
群组选择器

派生选择器

通过依据元素在其位置的上下文关系来定义样式

派生选择器：
后代选择器
子代选择器【直系】
相邻兄弟选择器【作用在后者】

后代选择器
html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">css">/** 知识点：派生选择器/上下文关系选择器 -- 后代选择器*/ul a{color: red;}</style></head><body><ul><li><a href="#">超链接1</a></li><li><a href="#">超链接2</a></li><li><a href="#">超链接3</a></li></ul><ul><li><a href="#">超链接4</a></li><li><a href="#">超链接5</a></li><li><a href="#">超链接6</a></li><li><a href="#">超链接7</a></li></ul><a href="#">超链接8</a><a href="#">超链接9</a><a href="#">超链接10</a></body>
</html>

运行：
后代选择器

子代选择器
html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">css">/** 知识点：派生选择器/上下文关系选择器 -- 子代选择器*/li>a{color: red;}</style></head><body><ul><li><a href="#">超链接1</a></li><li><a href="#">超链接2</a></li><li><a href="#">超链接3</a></li></ul><ul><li><a href="#">超链接4</a></li><li><a href="#">超链接5</a></li><li><a href="#">超链接6</a></li><li><a href="#">超链接7</a></li></ul><a href="#">超链接8</a><a href="#">超链接9</a><a href="#">超链接10</a></body>
</html>

运行：
子代选择器

相邻兄弟选择器
html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">css">/** 知识点：派生选择器/上下文关系选择器 -- 相邻兄弟选择器* * 注意：效果作用在后者*/a+a{color: red;}</style></head><body><ul><li><a href="#">超链接1</a></li><li><a href="#">超链接2</a></li><li><a href="#">超链接3</a></li></ul><ul><li><a href="#">超链接4</a></li><li><a href="#">超链接5</a></li><li><a href="#">超链接6</a></li><li><a href="#">超链接7</a></li></ul><a href="#">超链接8</a><a href="#">超链接9</a><a href="#">超链接10</a></body>
</html>

运行：
相邻兄弟选择器

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。
例子 1
如果您希望把包含标题（title）的所有元素变为红色，可以写作：
*[title] {color:red;}

例子 2
与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：
a[href] {color:red;}

例子 3
还可以根据多个属性进行选择，只需将属性选择器链接在一起即可。
例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：
a[href][title] {color:red;}

其中属性+值【进一步限制作用范围】

html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">css">/** 知识点：属性选择器* * 单个属性：* 		input[placeholder]{color: red;}* * 单个属性+值：* 		input[placeholder="请输入账号..."]{color: red;}* * 多个属性：* 		input[name][placeholder]{color: red;}* * 多个属性+值：* 		input[name="name"][type="text"]{color: red;}*/input[placeholder="请输入账号..."]{color: red;}</style></head><body><form action="服务器地址" method="get">账号：<input type="text" name="username" placeholder="请输入账号..." /><br />密码：<input type="password" name="password" placeholder="请输入密码..." /><br />确认密码：<input type="password" name="repassword" /><br />姓名：<input type="text" name="name" /><br />性别：<input type="radio" name="sex" value="man" checked="checked"/>男<input type="radio" name="sex" value="woman"/>女<br />爱好：<input type="checkbox" name="hobbies" value="football" checked="checked"/>足球<input type="checkbox" name="hobbies" value="basketball"/>篮球<input type="checkbox" name="hobbies" value="shop"/>购物<br />城市：<select name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option><option value="shengzheng">深圳</option><option value="chengdu" selected="selected">成都</option><option value="chongqing">重庆</option><option value="dongguan">东莞</option></select><br /><input type="submit" value="注册" /></form></body>
</html>

运行：以单个属性+值为例
属性选择器

伪类

CSS 伪类用于向某些选择器添加特殊的效果。

锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

注意：颜色网上搜

html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">css">/** 知识点：锚伪类* 理解：监听超链接的各种状态（未访问、已访问、鼠标悬停、鼠标按下）*/a:link {color: #FFCCFF}		/* 未访问的链接 */a:visited {color: #66FF66}	/* 已访问的链接 */a:hover {color: #33FFFF}	/* 鼠标移动到链接上 */a:active {color: #000033}	/* 选定的链接 */</style></head><body><a href="http://www.jd.com">京东</a></body>
</html>

运行： 未访问>选中>点击未松开鼠标>访问后返回
锚伪类

样式的优先级

​ 知识点：样式的优先级别
​ 分类：
​ 内部样式表
​ 外部样式表
​ 行内样式表
​
​ 优先级别：
​ 行内样式 > 内部样式或外部样式（内外部样式表要看加载顺序）
​
​ 理解：
​ 为什么行内样式最优先呢？
​ 因为行内样式最后加载

注意：【…/退回上一级，同级才能获取】
内外部样式【加载顺序，即哪个在前面】，行内样式在两者之后

html"><!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><!--外部样式表--><link rel="stylesheet" type="text/css" href="../../css/new_file.css"/><!--内部样式表--><style type="text/css">css">p{color: red;}</style></head><body><!--行内样式--><p style="css language-css">color: blue;">用良心做教育</p></body>
</html>外部样式css/new_file.css
p{color: green;
}

运行：
样式的优先级别

小结

HTML 常用的标签

CSS选择器


http://www.ppmy.cn/embedded/39846.html

相关文章

推荐全网最全的AI小白进阶指南

推荐全网最全的AI小白进阶指南

1. 引言 您想学习人工智能&#xff1f;但不知道如何开始&#xff0c;也不知道从哪里开始&#xff1f;互联网上的资源总是丰富多彩&#xff0c;质量参差不齐&#xff0c;往往容易看花眼而无从下手。 鉴于此&#xff0c;本文重点推荐一些个人收集的还不错的一些资源供大家学习参…
阅读更多...
网络安全专业岗位详解+自学学习路线图

网络安全专业岗位详解+自学学习路线图

很多网安专业同学一到毕业就开始迷茫&#xff0c;不知道自己能去做哪些行业&#xff1f;其实网络安全岗位还是蛮多的&#xff0c;下面我会介绍一些网络安全岗位&#xff0c;大家可以根据自身能力与喜好决定放哪个方向发展。 渗透测试/Web安全工程师 主要是模拟黑客攻击&#…
阅读更多...
gpt_academic的使用——含一键安装和接入其他API以及本地模型

gpt_academic的使用——含一键安装和接入其他API以及本地模型

https://github.com/binary-husky/gpt_academic/releases/ https://github.com/binary-husky/gpt_academic/wiki 安装
阅读更多...
2016-2021年全国范围的2.5m分辨率的建筑屋顶数据

2016-2021年全国范围的2.5m分辨率的建筑屋顶数据

一、论文介绍 摘要&#xff1a;大规模且多年的建筑屋顶面积&#xff08;BRA&#xff09;地图对于解决政策决策和可持续发展至关重要。此外&#xff0c;作为人类活动的细粒度指标&#xff0c;BRA可以为城市规划和能源模型提供帮助&#xff0c;为人类福祉带来好处。然而&#xf…
阅读更多...
微服务架构中的挑战及应对方式：Outbox 模式

微服务架构中的挑战及应对方式：Outbox 模式

使用 Outbox 模式保持微服务数据一致性 在一个由许多小型服务组成的系统中保持数据一致性是困难的&#xff0c;因为它们分散在各处。以下是一些常见问题以及如何处理它们的方法&#xff1a;当服务发送消息时&#xff0c;同时更新数据库和发送消息是棘手的问题。 在微服务中发出…
阅读更多...
uniapp video 层级覆盖

uniapp video 层级覆盖

层级覆盖 cover-view组件 我这里做了个判断 监听全屏时隐藏按钮 根据项目需求自行更改
阅读更多...
Dockerfile 和 Docker Compose

Dockerfile 和 Docker Compose

Dockerfile 和 Docker Compose 是 Docker 生态系统中两个重要的组成部分&#xff0c;它们分别服务于不同的目的&#xff0c;但共同协助开发者和运维人员高效地管理和部署容器化应用。 Dockerfile Dockerfile 是一个文本文件&#xff0c;包含了构建 Docker 镜像所需的一系列指…
阅读更多...
macos安装mysql一直卡在安装成功那个页面选项的解决办法

macos安装mysql一直卡在安装成功那个页面选项的解决办法

问题描述&#xff1a; 我安装的是比较新的版本8.0.37&#xff0c;安装过程中一直卡在安装那个选项上&#xff0c;且页面提示安装成功了&#xff0c;但就是死活不往下面的配置选项那一步走。 解决办法&#xff1a; 1.首先清理掉之前的mysql sudo rm -rf /usr/local/mysql2.然…
阅读更多...
最新文章

Copyright @ 2022~2023