html5 + css3（上）

目录

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

HTML初识

基础认知

web标准

小结：

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

vscode的简介和使用

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

快速生成骨架，

在这里插入图片描述

注释

ctrl + /

HTML标签学习

排版标签

标题和段落

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

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.mzph.cn/news/881148.shtml

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

相关文章

【包教包会】2D图片实现3D透视效果（支持3.x、支持原生、可合批）

【包教包会】2D图片实现3D透视效果（支持3.x、支持原生、可合批）

将去年写的SpriteFlipper从2.x升级到3.x。 如果需要2.x版本或需要了解算法思路&#xff0c;请移步&#xff1a;https://blog.csdn.net/weixin_42714632/article/details/136745051 优化功能&#xff1a;可同时绕X轴和Y轴旋转&#xff0c;两者效果会叠加。 完美适配Web、原生…
阅读更多...
数据结构与算法篇（图）（持续更新迭代）

数据结构与算法篇（图）（持续更新迭代）

目录 一、引言 二、基本概念 三、图的定义 四、图的基本概念和术语 1. 有向图 2. 无向图 3. 简单图 4. 多重图 5. 完全图&#xff08;也称简单完全图&#xff09; 6. 子图 7. 连通、连通图和连通分量 8. 强连通图、强连通分量 9. 生成树、生成森林 10. 顶点的度、…
阅读更多...
使用WPF实现一个快速切换JDK版本的客户端工具

使用WPF实现一个快速切换JDK版本的客户端工具

发现网上一键切换JDK环境的方法都是在mac或Linux下的&#xff0c;本人主力电脑是Windows&#xff0c;于是看了一下WPF的文档&#xff0c;自己开发了一个客户端。 直接上代码吧&#xff1a; using JavaSwitch.Properties; using Newtonsoft.Json; using System; using System.…
阅读更多...
【C++11】新特性

【C++11】新特性

前言&#xff1a; C11 是C编程语言的一个重要版本&#xff0c;于2011年发布。它带来了数量可观的变化&#xff0c;包含约 140 个新特性&#xff0c;以及对 C03 标准中约600个缺陷的修正&#xff0c;更像是从 C98/03 中孕育出的新语言 列表初始化 C11 中的列表初始化&#xff0…
阅读更多...
爬虫案例——爬取情话网数据

爬虫案例——爬取情话网数据

需求&#xff1a; 1.爬取情话网站中表白里面的所有句子&#xff08;表白词_表白的话_表白句子情话大全_情话网&#xff09; 2.利用XPath来进行解析 3.使用面向对象形发请求——创建一个类 4.将爬取下来的数据保存在数据库中 写出对应解析语法 //div[class"box labelbo…
阅读更多...
vite学习教程03、vite+vue2打包配置

vite学习教程03、vite+vue2打包配置

文章目录 前言一、修改vite.config.js二、配置文件资源/路径提示三、测试打包参考文章资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝3W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领域。 涵盖技术内容&…
阅读更多...
云手机可以解决TikTok运营的哪些问题？

云手机可以解决TikTok运营的哪些问题？

随着社交媒体的飞速发展&#xff0c;TikTok迅速崛起&#xff0c;成为个人和企业进行品牌宣传和内容创作的首选平台。然而&#xff0c;在运营TikTok账号的过程中&#xff0c;不少用户会遇到各种问题。本文将详细阐述云手机如何帮助解决这些问题。 1. 多账号管理的高效便捷 通过云…
阅读更多...
外包功能测试干了4年，技术退步太明显了。。。。。​

外包功能测试干了4年，技术退步太明显了。。。。。​

先说一下自己的情况&#xff0c;本科生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了差不多4年的功能测试&#xff0c;今年中秋&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测…
阅读更多...
精准选择大模型：消费品行业的营销与体验创新之路

精准选择大模型：消费品行业的营销与体验创新之路

在消费品行业&#xff0c;大模型技术的引入正逐渐从一个新兴趋势转变为行业标配。随着人工智能的快速发展&#xff0c;特别是OpenAI等领军企业推出的创新技术&#xff0c;如Sora&#xff0c;大模型在市场营销、消费者行为分析、个性化推荐等方面展现出巨大潜力。然而&#xff0…
阅读更多...
详解Java中的BIO、NIO、AIO

详解Java中的BIO、NIO、AIO

1、 详解Java中的BIO、AIO、NIO 1.1、引言 IO流是Java中比较难理解的一个知识点&#xff0c;但是IO流在实际的开发场景中经常会使用到&#xff0c;比如Dubbo底层就是NIO进行通讯。本文将介绍Java发展过程中出现的三种IO&#xff1a;BIO、NIO以及AIO&#xff0c;重点介绍NIO。…
阅读更多...
动态桌面时钟 让时间在桌面舞动 发现生活中的美好瞬间！

动态桌面时钟 让时间在桌面舞动 发现生活中的美好瞬间！

在快节奏的现代生活中&#xff0c;时间是最宝贵的资源之一。无论是在工作还是生活中&#xff0c;我们都需要时刻关注时间&#xff0c;在桌面显示一个时钟&#xff0c;可以让你更方便的掌握时间。今天小编给大家推荐一个软件《芝麻时钟》&#xff08;下载地址&#xff1a;https:…
阅读更多...
Linux高级编程_29_信号

Linux高级编程_29_信号

文章目录 进程间通讯 - 信号信号完整的信号周期信号的编号信号的产生发送信号1 kill 函数(他杀)作用&#xff1a;语法&#xff1a;示例&#xff1a; 2 raise函数(自杀)作用&#xff1a;示例&#xff1a; 3 abort函数(自杀)作用&#xff1a;语法&#xff1a;示例&#xff1a; 4 …
阅读更多...
汇编DEBUG程序调用

汇编DEBUG程序调用

工具 系统&#xff1a;Windows 11 应用&#xff1a;DOSBox 0.74-3 下载安装教程&#xff1a;本人写的《DOSBox下载安装&#xff08;Windows系统 DOSBox 0.74-3&#xff09;》 https://blog.csdn.net/just_do_it_sq/article/details/142715182?spm1001.2014.3001.5501 相关文…
阅读更多...
ARM 架构、cpu

ARM 架构、cpu

一、ARM的架构 ARM是一种基于精简指令集&#xff08;RISC&#xff09;的处理器架构. 1、ARM芯片特点 ARM芯片的主要特点有以下几点&#xff1a; 精简指令集&#xff1a;ARM芯片使用精简指令集&#xff0c;即每条指令只完成一项简单的操作&#xff0c;从而提高指令的执行效率…
阅读更多...
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞

沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞

漏洞描述 沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞&#xff0c;攻击者可以获取服务器权限 漏洞复现 body"后台管理系统演示版" POC GET /data/Ajax.aspx?methodlog_list&page1&limit20&fkey1&fdate12024-10-0100%3A00%3A00&fdate2…
阅读更多...
文章资讯职场话题网站源码整站资源自带2000+数据

文章资讯职场话题网站源码整站资源自带2000+数据

介绍&#xff1a; 数据有点多&#xff0c;数据资源包比较大&#xff0c;压缩后还有250m左右。值钱的是数据&#xff0c;网站上传后直接可用&#xff0c;爽飞了 环境&#xff1a;NGINX1.18 mysql5.6 php7.2 代码下载
阅读更多...
全球IP归属地查询-IP地址查询-IP城市查询-IP地址归属地-IP地址解析-IP位置查询-IP地址查询API接口

全球IP归属地查询-IP地址查询-IP城市查询-IP地址归属地-IP地址解析-IP位置查询-IP地址查询API接口

IP地址城市版查询接口 API是指能够根据IP地址查询其所在城市等地理位置信息的API接口。这类接口在网络安全、数据分析、广告投放等多个领域有广泛应用。以下是一些可用的IP地址城市版查询接口API及其简要介绍 1. 快证 IP归属地查询API 特点&#xff1a;支持IPv4 提供高精版、…
阅读更多...
【零基础入门产品经理】学习准备篇 | 需要学一些什么呢？

【零基础入门产品经理】学习准备篇 | 需要学一些什么呢？

前言&#xff1a; 零实习转行产品经理经验分享01-学习准备篇_哔哩哔哩_bilibili 该篇内容主要是对bilibili这个视频的观后笔记~谢谢美丽滴up主友情分享。 全文摘要&#xff1a;如何在0实习且没有任何产品相关经验下&#xff0c;如何上岸产品经理~ 目录 一、想清楚为什么…
阅读更多...
k8s的简介和部署

k8s的简介和部署

一、k8s简介 在部署应用程序的方式上面&#xff0c;主要经历了三个阶段&#xff1a; 传统部署:互联网早期&#xff0c;会直接将应用程序部署在物理机上优点:简单&#xff0c;不需要其它技术的参与缺点:不能为应用程序定义资源使用边界&#xff0c;很难合理地分配计算资源&…
阅读更多...
从零开始，她如何为客户创建语义知识图谱？

从零开始，她如何为客户创建语义知识图谱？

在这篇文章中&#xff0c;Capgemini 的知识图谱负责人 Veronika Heimsbakk 分享了她为客户创建语义知识模型的方法。阅读本指南&#xff0c;了解她如何与客户合作&#xff0c;从头开始构建语义知识模型&#xff0c;并发现可以应用于您自己的语义建模项目的实践。 如何为客户构…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023