html5 + css3（上）

news2024/11/16 23:52:01

目录

  • HTML认知
    • web标准
    • vscode的简介和使用
    • 注释
    • 标题和段落
    • 换行和水平线标签
    • 文本格式化标签
    • 图片
      • 图片-基本使用
      • 图片-属性
    • 绝对路径
    • 相对路径
    • 音频标签
    • 视频标签
    • 超链接
  • HTML基础
    • 列表
      • 列表-无序和有序
      • 列表-自定义
    • 表格
      • 表格-使用
      • 表格-表格标题和表头单元格
      • 表格-结构标签（了解）
      • 表格-合并单元格
    • 表单
      • 表单-input基本使用
      • 表单-input-占位符
      • 表单-单选功能和默认选中
      • 表单-上传多个文件
      • 表单-按钮-input
      • 表单-按钮button
      • 表单-下拉菜单
      • 表单-文本域
      • 表单-lable标签
    • 语义化标签
      • 1.1没有语义的布局标签-div和span
      • 2.1 有语义的布局标签（了解）
    • 字符实体
    • 综合案例
      • 综合案例-学生信息表
      • 综合案例-表单

HTML认知

web标准

小结：

  • 结构：HTML → 页面元素
  • 表现：CSS → 页面样式
  • 行为：JavaScript → 页面交互的动态效果

vscode的简介和使用

英文状态!→回车（或者tab键），

快速生成骨架，

在这里插入图片描述

注释

ctrl + /

标题和段落

快捷方式：快速修改多个同个字样

1️⃣鼠标左键长按选中想要修改的1，（同个字样就会自动标识出来）

在这里插入图片描述

2️⃣ctrl + d 多选，多按一次d，多选一个字样。（可以看到三个光标同时在闪）

在这里插入图片描述

⭐️标题标签

<h1></h1>

⭐️段落标签

<p></p>

换行和水平线标签

⭐️换行标签

<br>

⭐️水平线标签

<hr>

文本格式化标签

⭐️

标签说明
b加粗
u下划线
i倾斜
s删除线

⭐️

语义：突出重要性的强调语境：

标签说明
strong加粗
ins下划线
em倾斜
del删除线

图片

图片-基本使用

⭐️<img src=" " alt=" ">

图片-属性

⭐️<img src=" " alt=" " title=" ">

title：悬停时显示文本

width：

height：

⭕️如果只设置weight和height其中一个，另一个没设置的会自动等比例缩放（此时图片不会变形）

⭕️如果同时设置weight和height，设置不当会变形

绝对路径

绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。

🍎盘符开头：D:\day01\images\1.jpg

完整的网络地址：https://www.itcat.cn/2018czgw/images/logo.gif（了解）

相对路径

相对路径（常用）：从当前文件开始出发找目标文件的过程

同级目录：当前文件和目标文件在同一目录中

​ 代码步骤：直接写目标文件名字即可

​ 🍎 <img src="目标图片.gif">或<img src="./目标图片.gif">

下级目录：目标文件在下级目录中

​ 代码步骤：文件夹名字/直接写目标文件名字

​ 🍎<img src="images/目标图片.gif">

上级目录：目标文件在上级目录中

​ 代码步骤：…/直接写目标文件名字

​ 🐱…/返回上一级

​ 🍎<img src="../目标图片.gif">

音频标签

⭐️<audio src=" " controls autoplay loop></audio>

属性名功能
src音频的路径
controls显示播放的控件
autoplay自动播放（部分浏览器不支持）
loop循环播放

音频标签目前支持三种格式：MP3、Wav、Ogg

视频标签

⭐️<video src=" " controls autoplay muted loop></video>

属性名功能
src视频的路径
controls显示播放的控件
autoplay自动播放（谷歌浏览器中序配合muted实现静音播放）
loop循环播放

视频标签标签目前支持三种格式：MP4、WebM、Ogg

超链接

⭐️<a href="./目标网页.html">超链接</a>

不知道跳转地址的时候，href的值书写#（空链接）

在这里插入图片描述

链接标签的target属性：

属性名：target

属性值：目标网页的打开形式

取值效果
_self默认值，在当前窗口中跳转
_blank在新窗口中跳转

在这里插入图片描述

HTML基础

列表

列表-无序和有序

无序列表：

标签名说明
ul表示无序列表的整体，用于包裹li标签
li表示陆无序列表的每一项，用于包含每一行的内容

⭕️ul标签中只允许包含li标签

⭕️li标签可以包含任意内容

有序列表：

标签名说明
ol表示有序列表的整体，用于包裹li标签
li表示陆无序列表的每一项，用于包含每一行的内容

⭕️ol标签中只允许包含li标签

⭕️li标签可以包含任意内容

列表-自定义

标签名说明
dl表示自定义列表的整体，用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表的针对主题的每一项内容

dd前会默认显示缩进效果

⭕️dl标签中只允许包含dt/dd标签

⭕️li标签可以包含任意内容

表格

表格-使用

标签名说明
table表格整体，可用于包裹多个tr
tr表格每行，可用于包裹td
td表格单元格，可用于包裹内容

标签的嵌套关系：table > tr > td

表格的相关属性：

属性名属性值效果
border数字边框宽度
width数字表格宽度
height数字表格高度

实际开发时针对样式效果推荐用CSS设置

表格-表格标题和表头单元格

标签名名称说明
caption表格大标题表示表格整体大标题，默认在表格整体顶部居中位置显示
th表头单元格表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

表格-结构标签（了解）

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰。

标签名名称
thead表格头部
tbody表格主体
tfoot表格底部

表格-合并单元格

属性名属性值说明
rowspan合并单元格的个数跨行合并，将多行的单元格垂直合并
colspan合并单元格的个数跨列合并，将多列的单元格水平合并
 <tr>
   <td>小哥哥</td>
   <td rowspan="2">100</td>
   <td>真帅气</td>
 </tr>
 <tr>
   <td>小姐姐</td>
   <!-- <td>99</td> -->
   <td>真漂亮</td>
 </tr>

在这里插入图片描述

<tr>
  <td>总结</td>
  <td colspan="2">郎才女貌</td>
  <!-- <td>郎才女貌</td> -->
</tr>

在这里插入图片描述

在这里插入图片描述

⭕️只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

表单

表单-input基本使用

标签名type属性值说明
inputtext文本框，用于输入单行文本
inputpassword密码框，用于输入密码
inputradio单选框，用于多选一
inputcheckbox多选框，用于多选多
inputfile文件选择，用于之后上传文件
inputsubmit提交按钮，用于提交
inputreset重置按钮，用于重置
inputbutton普通按钮，默认无功能，之后配合js添加功能
文本框：<input type="text">
  <br>
  密码框：<input type="password">
  <br>
  单选框：<input type="radio">
  <br>
  多选框：<input type="checkbox">
  <br>
  上传文件：<input type="file">
  <br>
  提交按钮：<input type="submit">
  <br>
  重置按钮：<input type="reset">
  <br>
  普通按钮：<input type="button">

在这里插入图片描述

表单-input-占位符

属性名说明
placeholder占位符。提示用户输入的文本
  文本框：<input type="text" placeholder="请输入用户名">

在这里插入图片描述

表单-单选功能和默认选中

场景：在网页中显示多选一的单选表单控件

属性名说明
name分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked默认选中

⭕️name属性对于单选框有分组功能

性别：
  <input type="radio" name="sex">男
  <input type="radio" name="sex" checked>女

在这里插入图片描述

表单-上传多个文件

场景：在网页显示文件选择的表单控件

属性名说明
multiple多文件选择
<input type="file" multiple>

在这里插入图片描述

表单-按钮-input

场景：在网页中显示不同功能的按钮表单控件

标签名type属性值说明
inputsubmit提交按钮。点击之后提交数据给后端服务器
inputreset重置按钮。点击之后恢复表单默认值
inputbutton普通按钮。默认无功能，之后配合js添加功能

⭕️如果需要实现以上按钮功能，需要配合form标签使用

⭕️form使用方法：用form标签把表单标签一起包裹起来即可

<form action="">
    用户名：<input type="text">
    <br>
    密码：<input type="password">
    <br>
    <input type="submit">
    <input type="reset">
    <input type="button" value="普通按钮">
  </form>

在这里插入图片描述

表单-按钮button

场景：在网页中显示用户点击的按钮

标签名type属性值说明
buttonsubmit提交按钮。点击之后提交数据给后端服务器
buttonreset重置按钮。点击之后恢复表单默认值
buttonbutton普通按钮。默认无功能，之后配合js添加功能

⭕️谷歌浏览器中button默认是提交按钮

⭕️button标签是双标签，更便于包裹其他内容：文字、图片等

<button>按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮，没有任何功能</button>

在这里插入图片描述

表单-下拉菜单

场景：在网页中提供多个选择项的下拉菜单表单控件

⭐️标签组成：

select标签：下拉菜单的整体

option标签：下拉菜单的每一项

⭐️常见属性：

selected：下拉菜单的默认选中

<select>
    <option>北京</option>
    <option>广州</option>
    <option>上海</option>
    <option selected>深圳</option>
  </select>

在这里插入图片描述

表单-文本域

场景：在网页中提供可输入多行文本的表单控件

⭐️标签名：textarea

⭐️常见属性：

cols：规定了文本域内可见宽度

rows：规定了文本域内可见行数

⭕️右下角可以拖拽改变大小

⭕️实际开发时针对样式效果推荐使用CSS设置

<textarea cols="60" rows="30"></textarea>

在这里插入图片描述

表单-lable标签

场景：常用于绑定内容与表单标签的关系

⭐️标签名：lable

使用方法①（复杂）：

1.使用lable标签把内容（如：文本）包裹起来

2.在表单标签上添加id属性

3.在lable标签的for属性中设置对应的id属性值

 姓名：
  <input type="radio" name="sex" id="man"> <label for="man">男</label>
  <input type="radio" name="sex" id="woman"> <label for="woman">女</label>

使用方法②（简单）：

1.直接使用lable标签把内容（如：文本）和表单标签一起包裹起来

2.需要把lable标签的for属性删除即可

姓名：
  <label>
    <input type="radio" name="sex" id="man"> 男
  </label>
  <label>
    <input type="radio" name="sex" id="woman"> 女
  </label>

在这里插入图片描述

（点字照样选中前面的表单）

语义化标签

学习路径：

1.没有语义的布局标签

2.有语义的布局标签（了解）

1.1没有语义的布局标签-div和span

场景：实际开发网页时会大量频繁的使用到div和span这两个没有语义的标签

div标签：一行只能显示一个（独占一行）

span标签：一行可以显示多个

普通文字
  <div>这是div标签</div>
  <div>这是div标签</div>
  <span>这是span标签</span>
  <span>这是span标签</span>

在这里插入图片描述

2.1 有语义的布局标签（了解）

场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用

标签：

标签名语义
header网页头部
nav网页导航
footer网页底部
aside网页侧边栏
section网页区块
article网页文章

字符实体

常见字符实体：

场景：在网页中展示特殊符号效果时，需要使用字符实体代替

结构：&英文

常见字符实体：

显示结果描述实体名称
空格&nbsp
<小于号&lt
>大于号&gt
&和号&amp
"引号&quot
’撇号&apos(IE不支持)
¢分（cent）&cent
£镑（pound）&pound
¥元（yen）&yen
€欧元（euro）&euro
§小节&sect
©版权（copyright）&copy

⭕️只记一个空格就好了

综合案例

综合案例-学生信息表

<table border="1" width="500" height="300">
    <caption>
      <h3>优秀学生信息表格</h3>
    </caption>
    <tr>
      <th>年纪</th>
      <th>姓名</th>
      <th>学号</th>
      <th>班级</th>
    </tr>
    <tr>
      <td rowspan="2">高三</td>
      <td>张三</td>
      <td>110</td>
      <td>三年二班</td>
    </tr>
    <tr>
      <td>赵四</td>
      <td>120</td>
      <td>三年三班</td>
    </tr>
    <tr>
      <td>评语</td>
      <td colspan="3">你们都很优秀</td>
    </tr>
  </table>

在这里插入图片描述

综合案例-表单

<h1>青春不常在，抓紧谈恋爱</h1>
  <hr>
  昵称：<input type="text" placeholder="请输入昵称">
  <br><br>
  性别：
  <input type="radio" name="sex" checked>男
  <input type="radio" name="sex">女
  <br><br>
  所在城市：
  <select>
    <option>北京</option>
    <option selected>上海</option>
    <option>广州</option>
    <option>深圳</option>
  </select>
  <br><br>
  婚姻状况：
  <input type="radio" name="marry">未婚
  <input type="radio" name="marry">已婚
  <input type="radio" name="marry">保密
  <br><br>
  喜欢的类型：
  <input type="checkbox" checked>可爱
  <input type="checkbox" checked>性感
  <input type="checkbox">御姐
  <input type="checkbox">萝莉
  <input type="checkbox">小鲜肉
  <input type="checkbox">大叔
  <br><br>
  个人介绍：
  <br><br>
  <textarea cols="60" rows="8"></textarea>
  <br>
  <h3>我承诺</h3>
  <ol>
    <li>年满18岁、单身</li>
    <li>抱着严肃的态度</li>
    <li>真诚寻找另一半</li>
  </ol>
  <input type="checkbox">我同意所有条款
  <br><br>
  <button type="submit">免费注册</button>
  <button type="reset">重置</button>

在这里插入图片描述

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

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

相关文章

CentOS 6文件系统

CentOS 6文件系统

由冯诺依曼在 1945 年提出的计算机五大组成部分&#xff1a;运算器&#xff0c;控制器&#xff0c;存储器&#xff0c;输入设 备&#xff0c;输出设备。 1. 硬盘结构&#xff1a; &#xff08;1&#xff09;机械硬盘结构&#xff1a; 磁盘拆解图&#xff1a; 扇区&#xff0c;…
阅读更多...
白杨SEO：抖音上做自然搜索流量怎么挖掘出抖音流量关键词及布局进去？【举例】

白杨SEO：抖音上做自然搜索流量怎么挖掘出抖音流量关键词及布局进去？【举例】

前言&#xff1a;为什么想到再分享这个&#xff1f;因为发现很多人在抖音做搜索流量时怎么挖掘抖音关键词这个基础以及怎么布局进去不太清楚&#xff0c;所以再来写下&#xff0c;希望对大家有帮助。 文章大纲&#xff1a; 1、抖音搜索流量如何确定业务词&#xff1f; 2、抖音…
阅读更多...
Ubuntu下安装Zookeeper集群

Ubuntu下安装Zookeeper集群

Zookeeper集群是一个开源的分布式协调服务系统&#xff0c;它由Apache软件基金会维护&#xff0c;旨在为分布式应用提供一致性和可靠性的服务。 在Zookeeper集群中&#xff0c;服务器可以扮演三种角色——领导者&#xff08;Leader&#xff09;、跟随者&#xff08;Follower&a…
阅读更多...
开放式耳机哪个品牌好？值得选购的开放式蓝牙耳机推荐

开放式耳机哪个品牌好？值得选购的开放式蓝牙耳机推荐

2024年&#xff0c;蓝牙耳机市场迎来了开放式耳机的热潮。但其实对于许多消费者来说&#xff0c;如何选择合适的开放式耳机仍然充满疑问&#xff1a;佩戴稳固舒适的开放式耳机应该怎么选择&#xff1f;开放式耳机的蓝牙版本该怎么选择&#xff1f;又有哪些开放式耳机品牌是可靠…
阅读更多...
SkyWalking 高可用

SkyWalking 高可用

生产环境中，后端应用需要支持高吞吐量并且支持高可用来保证服务的稳定，因此需要高可用集群管理。 集群方案 Skywalking集群是将 skywalking oap 作为一个服务注册到nacos上，只要skywalking oap服务没有全部宕机，保证有一个skywalking oap在运行，就可以提供服务。 高可用…
阅读更多...
【mmsegmentation】Loss模块（进阶）自定义自己的LOSS

【mmsegmentation】Loss模块（进阶）自定义自己的LOSS

1、定义自己的loss driving\models\losses\shuai_loss.py import torch from torch import nn from mmseg.models import LOSSESLOSSES.register_module() class ShuaiLoss(nn.Module):def __init__(self,loss_weight1.0):super().__init__()self.ce_loss nn.CrossEntropyLo…
阅读更多...
躺平成长：微信小程序运营日记第二天

躺平成长：微信小程序运营日记第二天

在进行属于生活的开源之后&#xff0c;自己更加感受到自己存在的渺茫&#xff0c;同时更加开始深刻领会&#xff0c;开源的重要性&#xff0c;在开源&#xff0c;开放&#xff0c;创造&#xff0c;再创新的思维模式下&#xff0c;不发布八部金刚功相关的训练视频&#xff0c;自…
阅读更多...
详解Java中的Collection单列集合（从底层到用法超详细解析和细节分析）

详解Java中的Collection单列集合（从底层到用法超详细解析和细节分析）

⭕在 Java 中&#xff0c;集合框架是开发过程中最常用的数据结构之一&#xff0c;其中 Collection 接口是整个集合框架的基础。Collection 是处理单列数据的接口&#xff0c;它定义了一些通用的操作&#xff0c;允许对一组对象进行操作。今天我们将深入介绍 Java 中的单列集合 …
阅读更多...
ECharts图表图例4

ECharts图表图例4

jave 用eclipse软件 代码&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"UTF-8"> <!-- 引入ECharts脚本 --> <script src"js/echarts.js"></script> <title>绘制堆积面积图</title&g…
阅读更多...
Unraid的cache使用btrfs或zfs？

Unraid的cache使用btrfs或zfs？

Unraid的cache使用btrfs或zfs&#xff1f; 背景&#xff1a;由于在unraid中添加了多个docker和虚拟机&#xff0c;因此会一直访问硬盘。然而&#xff0c;单个硬盘实在难以让人放心。在阵列盘中&#xff0c;可以通过添加校验盘进行数据保护&#xff0c;在cache中无法使用xfs格式…
阅读更多...
Leecode热题100-283.移动零

Leecode热题100-283.移动零

给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 示例 1: 输入: nums [0,1,0,3,12] 输出: [1,3,12,0,0]示例 2: 输入: nums [0] 输出: […
阅读更多...
【Python报错已解决】ImportError: No module named ‘module‘

【Python报错已解决】ImportError: No module named ‘module‘

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 专栏介绍 在软件开发和日常使用中&#xff0c;BUG是不可避免的。本专栏致力于为广大开发者和技术爱好者提供一个关于BUG解决的经…
阅读更多...
单目操作符、--、++和do-while循环

单目操作符、--、++和do-while循环

昨天我们算术操作符的除法和乘法&#xff0c;以及引入while和for循环&#xff0c;今天我们来看新的内容。 借助我们之前写的计算器代码来深入学习一下其他东西。 单目操作符——、--、& 除了昨天说的那些操作符之外&#xff0c;记不记得输入函数中有一个&这么一个符…
阅读更多...
分散加载文件 scatter files

分散加载文件 scatter files

目录 一、加载域和执行域二、Image entry points三、映射符号四、链接器预定义符号1、将符号引入到程序中1.1 引入到 C/C1.2 引入到汇编 2、域相关的符号2.1 执行域符号 Image$$2.2 执行域符号 Load$$2.3 加载域符号 Load$$LR$$2.4 节相关的符号2.5 镜像符号2.6 输入节符号 五、…
阅读更多...
HarmonyOS鸿蒙 Next 实现协调布局效果

HarmonyOS鸿蒙 Next 实现协调布局效果

HarmonyOS鸿蒙 Next 实现协调布局效果 ​ 假期愉快! 最近大A 的涨势实在是红的让人晕头转向&#xff0c;不知道各位收益如何&#xff0c;这会是在路上&#xff0c;还是已经到目的地了? 言归正传&#xff0c;最近有些忙&#xff0c;关于鸿蒙的实践系列有些脱节了&#xff0c;…
阅读更多...
Electron 是如何工作的

Electron 是如何工作的

1. 创建electron项目 pnpm init pnpm add -D electron修改配置项 package.json {"name": "electron-menu","version": "1.0.0","description": "","main": "main.js", // eletron入口&quo…
阅读更多...
【重学 MySQL】四十七、表的操作技巧——修改、重命名、删除与清空

【重学 MySQL】四十七、表的操作技巧——修改、重命名、删除与清空

【重学 MySQL】四十七、表的操作技巧——修改、重命名、删除与清空 修改表添加字段语法示例注意事项 删除字段语法示例 修改字段使用 MODIFY COLUMN语法示例 使用 CHANGE COLUMN语法示例 重命名表语法示例 删除表语法示例 清空表使用 TRUNCATE TABLE使用 DELETE FROM对比 TRUNC…
阅读更多...
聊聊晶圆厂中的常见口语（1）

聊聊晶圆厂中的常见口语（1）

知识星球里的学员问&#xff1a;半导体公司的工程师总爱用一些英语代替中文&#xff0c;比如care,show&#xff0c;用这种简单的单词代替中文&#xff0c;能不能给我们总结工程师常用的英语单词&#xff0c;比较口语化的&#xff01; 为什么晶圆厂会用很多英文口语&#xff1f…
阅读更多...
华为---以太网静态路由配置使用下一跳通信正常，而使用出接口无法通信

华为---以太网静态路由配置使用下一跳通信正常，而使用出接口无法通信

目录 1. 实验环境 2. 结果测试 3. 分析验证 3.1 以太网静态路由配置使用下一跳跨网段通信抓包分析 3.2 以太网静态路由配置使用出接口跨网段通信抓包分析 3.3 以太网静态路由配置使用出接口无法跨网段通信问题解决办法 1. 实验环境 以太网静态路由配置使用下一跳跨网段通…
阅读更多...
番茄成熟度检测系统源码分享

番茄成熟度检测系统源码分享

番茄成熟度检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer V…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023