前端开发_HTML

简介

CSS用于美化内容

HTML用于摆放内容

可以理解为HTML是基础，CSS是工具

HTML定义

HTML 超文本标记语言——HyperText Markup Language

超文本——链接

标记——标签，即带尖括号的文本

标签语法

双标签

  • 开始标签： <xxx> 即尖括号+标签文字
  • 结束标签：</xxx> 即尖括号中+‘/’+标签文字

开始标签和结束标签中文字需要相同

标签成对出现

单标签

只有开始标签，没有结束标签

例如：<br>、<hr>

标签关系

标签的书写位置和标签的关系相关

父子关系嵌套，兄弟关系并列

体现在代码格式上：

  • 父子关系：子级标签换行且缩进（Tab键）
  • 兄弟关系：兄弟标签换行要对齐

注释

使用<!--...-->在文档中插入注释，注释不会在文档中显示

VS Code中使用Ctrl+/即可快速添加注释

基本骨架

<html>整个网页的所有内容都在其中书写
</html>

<html><head>网页头部</head><body>网页主体内容</body>
</html>

<html><head><title>网页标题</title></head></html>

在这里插入图片描述

上述看到的CSDN - 专业开发者社区就是网页标题

如果使用VS Code进行html开发的话，使用!+Enter/Tab即可快速生成如下基本骨架

在这里插入图片描述

标签分类

标题标签

使用<h1>-<h6>(双标签)即可在页面中添加标题

<html><body><h1>章节标题</h1><h2>次标题</h2></body>
</html>

在这里插入图片描述

显示特点：

  • 文字加粗
  • 字号逐渐减小
  • 独占一行（换行）

一般用于新闻标题、文章标题、网页区域名称等

h1在一个网页中只能使用一次（用来放新闻标题或者网页LOGO）

h2-h6没有使用次数的限制

段落标签

<p>(双标签)，用于将文章分段

显示特点：

  • 独占一行
  • 段落之间存在间隙

换行和水平线标签

换行：<br>(单标签)

水平线：<hr>(单标签)

文本格式化标签

为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等

标签名效果
strong加粗
b加粗
em倾斜
i倾斜
ins下划线
u下划线
del删除线
s删除线

strong、em、ins、del标签自带强调含义

图像标签

作用：在网页中插入图片

<img src="图片的 URL">

src用于指定图像的位置和名称，是<img>的必须属性

URL可以是服务器本地路径，也可以是其他服务器的资源路径

  • 相对路径：从当前文件位置出发查找目标文件

    • 文件夹名字/ 表示进入某个文件夹里面

    • ./ 表示当前文件所在文件夹

    • ../ 表示当前文件的上一级文件夹

  • 绝对路径：从盘符出发查找目标文件

img标签还有以下一些属性：

属性作用说明
alt替换文本图片无法显示的时候显示的文字
title提示文本鼠标悬停在图片上面的时候显示的文字
width图片宽度值为数字，没有单位
height图片高度值为数字，没有单位

示例：<img src= "./cat.jpg" alt= "替换文本" title= "提示文本">

属性名=“属性值”

属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

音频标签

<audio src="音频的 URL"></audio>

常见属性：

属性作用特殊说明
src(必须属性)音频URL支持格式：MP3、Ogg、Wav
controls显示音频控制面板
loop循环播放
autoplay自动播放浏览器一般禁用自动播放

视频标签

<video src="视频的 URL"></video>

常见属性：

属性作用特殊说明
src(必须属性)音频URL支持格式：MP4、Ogg、WebM
controls显示音频控制面板
loop循环播放
muted静音播放
autoplay自动播放浏览器支持在静音状态自动播放

超链接标签

作用：点击跳转到其他页面。

示例：<a href="https://www.baidu.com">跳转到百度</a>

href是跳转地址，是超链接的必须属性

超链接默认在当前窗口跳转页面，添加 target=“_blank” 实现新窗口打开页面。

列表

无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

<ul><li>第一项</li><li>第二项</li><li>第三项</li> ……
</ul>

在这里插入图片描述

ul 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目

<ol><li>第一项</li><li>第二项</li><li>第三项</li> ……
</ol>

在这里插入图片描述

ol 标签里面只能包裹 li 标签

li 标签里面可以包裹任何内容

定义列表

标签：dl 嵌套 dt 和 dd

dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

<dl><dt>列表标题</dt><dd>列表描述 / 详情</dd> ……
</dl>

在这里插入图片描述

dl 里面只能包含dt 和 dd

dt 和 dd 里面可以包含任何内容

表格

网页中的表格与 Excel 表格类似，用来展示数据。

标签：table 嵌套 tr，tr 嵌套 td / th。

标签名说明
table表格
tr行
th表头单元格
td内容单元格

示例：

		<table><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></table>

在这里插入图片描述

网页中表格默认没有边框线，加上border="1"属性即可为表格添加边框线

在这里插入图片描述

用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。

标签名说明特殊说明
thead表格头部表格头部内容
tbody表格主体主要内容区域
tfoot表格底部汇总信息区域

修改后的语句如下：

		<table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table>

但实际效果并无区别，因此表结构标签也可省略

合并单元格

合并单元格的步骤：

  1. 明确合并的目标

  2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

    • 跨行合并，保留最上单元格，添加属性 rowspan

    • 跨列合并，保留最左单元格，添加属性 colspan

  3. 删除其他单元格

示例：

		<table border="1"><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr><tr><td>张三</td><td>99</td><td rowspan="2">100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>198</td></tr><tr><td>总结</td><td colspan="3">全市第一</td></tr></table>

在这里插入图片描述

表单

作用：收集用户信息。

使用场景：

  • 登录页面
  • 注册页面
  • 搜索区域

input

input (单标签)标签 type 属性值不同，则功能不同。

<input type="..." >

type属性值说明
text文本框，用于输入单行文本
password密码框
radio单选框
checkbox多选框
file上传文件

占位文本：placeholder属性，文本框和密码框都可以使用

<input type="..." placeholder="提示信息">

在这里插入图片描述

radio

常用属性：

属性名作用特殊说明
name控件名称控件分组，同组只能选中一个(单选功能)
checked默认选中属性名和属性值相同，简写为一个单词

示例：

<input type="radio" name="gender" checked> 男
<input type="radio" name="gender"> 女
file

默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能

示例：

<input type="file" multiple>
checkbox

复选框：默认选中同样使用checked属性

<input type="checkbox" checked>

下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

示例代码：

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

在这里插入图片描述

默认显示第一项，selected属性实现默认选中功能

文本域

多行输入文本的表单控件

标签：textarea，双标签。

<textarea>默认提示文字</textarea>

实际开发中用CSS设置文本域的尺寸以及禁用右下角的拖拽功能

label

label标签，双标签，网页中用作某个标签的说明文本

可以用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。

  1. label 标签只包裹内容，不包裹表单控件

    设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

    <input type="radio" id="man">
<label for="man">男</label>

  2. 使用 label 标签包裹文字和表单控件，不需要属性

    <label><input type="radio"> 女</label>

支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等

button

按钮

<button type="xxx">按钮</button>

type属性值：

type属性值说明
submit提交按钮，点击后可以提交数据到后台(默认功能)
reset重置按钮，点击后将表单控件恢复默认
button普通按钮，默认没有功能，一般配合JavaScript使用

按钮需配合 form 标签（表单区域）才能实现对应的功能。

示例：

		<form><input type="radio" checked name="gender"> 男<input type="radio" name="gender"> 女<button type="reset">重置</button></form>

在这里插入图片描述

语义化

无语义的布局标签

  • div：独占一行
  • span：不换行

可以理解为div自带结束换行，span没有结束换行

有语义的布局标签

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

字符实体

作用：在网页中显示预留字符。

显示结果描述实体名称
空格&nbsp
<小于号&lt;
>大于号&gt;

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

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

相关文章

点击元素以外的事件监听

点击元素以外的事件监听

在项目中&#xff0c;我们经常会遇到需要监听目标元素以外的区域被点击或鼠标移入移出等需求。 例如下面我们有一个表格里面嵌套表单的组件 我希望点击n行的时候&#xff0c;n行的元素变成表单元素进行输入或者选择&#xff0c; 当我点击其他其他区域n行又会恢复成数据展示…
阅读更多...
WordPress插件大全-免费的WordPress插件汇总

WordPress插件大全-免费的WordPress插件汇总

随着互联网的不断发展&#xff0c;网站建设变得日益普及。对于大多数人而言&#xff0c;WordPress是一个熟悉且易于使用的网站建设平台。然而&#xff0c;有时候我们可能会觉得WordPress的功能还不够满足我们的需求&#xff0c;这时候&#xff0c;插件就成了解决问题的得力工具…
阅读更多...
IMU传感器用于智能假肢

IMU传感器用于智能假肢

截肢会给截肢者们带来生活上的不方便和极大痛苦&#xff0c;因此假肢的优化一直被关注着。近期&#xff0c;一项关于新型智能膝关节的研究&#xff0c;让假肢能更好地模拟自然膝关节&#xff0c;给截肢者们带来了希望。 此款假肢内置IMU传感器&#xff0c;减少了截肢者所需的肌…
阅读更多...
箭头函数与普通函数：谁更胜一筹？

箭头函数与普通函数：谁更胜一筹？

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…
阅读更多...
Spark local模式的安装部署

Spark local模式的安装部署

安装与配置Spark开发环境。 相关知识 Apache Spark是专为大规模数据处理而设计的快速通用的计算引擎。Spark是UC Berkeley AMP lab(加州大学伯克利分校的AMP实验室)所开源的类Hadoop MapReduce的通用并行框架&#xff0c;Spark拥有Hadoop MapReduce所具有的优点&#xff1b;但…
阅读更多...
vuepress-----6、时间更新

vuepress-----6、时间更新

# 6、时间更新 基于Git提交时间修改文字时间格式 moment # 最后更新时间 # 时间格式修改 下载库文件 yarn add momentconst moment require(moment); moment.locale(zh-cn)module.exports {themeConfig: {lastUpdated: 更新时间,},plugins: [[vuepress/last-updated,{trans…
阅读更多...
BUUCTF [GXYCTF2019]BabyUpload 1详解（.htaccess配置文件特性）

BUUCTF [GXYCTF2019]BabyUpload 1详解（.htaccess配置文件特性）

题目环境&#xff1a;查看题目源码 SetHandler application/x-httpd-php 通过源码可以看出这道文件上传题目主要还是考察.htaccess配置文件的特性 倘若不先上传.htaccess配置文件&#xff0c;那么后台服务器就无法解析php代码 这个是需要注意的 .htaccess配置文件特性 概述来说…
阅读更多...
【面试】css预处理器之sass（scss）

【面试】css预处理器之sass（scss）

目录 为什么引入css预处理器 可读性 嵌套&#xff1a;关系明朗 选择器 属性 伪类‘’ 变量&#xff1a;语义明确 默认变量&#xff1a;美元符号 $ 变量名:值 !default 全局变量&#xff1a;:global { $global-x: } 变量插值&#xff1a;#{} map键值对&#xff1a;$…
阅读更多...
轻量封装WebGPU渲染系统示例＜39＞- emissive和arm纹理支持(源码)

轻量封装WebGPU渲染系统示例＜39＞- emissive和arm纹理支持(源码)

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/DynamicShaderBuilding2.ts 当前示例运行效果: 此示例基于此渲染系统实现&#xff0c;当前示例TypeScript源码如下&#xff1a; export class DynamicShaderBuildi…
阅读更多...
python操作Mysql学习

python操作Mysql学习

文章目录 版权声明准备&#xff1a;MYSQL数据库数据库简介数据库分类数据库管理系统SQL语句关系型数据库中核心元素MySQL环境搭建Mysql数据类型数据完整性和约束MYSql基本操作登录和退出数据库命令数据库基本操作命令数据表基本操作命令数据表结构修改命令表数据操作命令Mysql查…
阅读更多...
PCIe学习必读——《PCI Express System Architecture》

PCIe学习必读——《PCI Express System Architecture》

PCI Express (peripheral component interconnect express) 简称 PCIe&#xff0c;是一种高速串行计算机扩展总线标准。是一种全双工总线&#xff0c;使用高速串行传送方式&#xff0c;能够支持更高的频率&#xff0c;连接的设备不再像 PCI 总线那样共享总线带宽。PCIe目前发布…
阅读更多...
数据结构-二叉树（2）

数据结构-二叉树（2）

3.4堆的应用 3.4.1 堆排序 堆排序即利用堆的思想来进行排序&#xff0c;总共分为两个步骤&#xff1a; 1. 建堆 1.升序&#xff1a;建大堆&#xff1b; 2.降序&#xff1a;建小堆。 2. 利用堆删除思想来进行排序 这种写法有两个缺点&#xff1a; 1、先有一个堆的数据结构 …
阅读更多...
微信小程序 老年人心血管健康知识科普系统

微信小程序 老年人心血管健康知识科普系统

本系统的功能有管理员&#xff1a;个人中心&#xff0c;用户管理&#xff0c;热点信息管理&#xff0c;疾病管理&#xff0c;疾病类型管理&#xff0c;治疗管理&#xff0c;治疗类型管理&#xff0c;护理管理&#xff0c;护理类型管理&#xff0c;科普管理&#xff0c;科普类型…
阅读更多...
如何利用轮廓系数（Silhouette Coefficient）来判断模糊c均值聚类FCM的聚类簇数量

如何利用轮廓系数（Silhouette Coefficient）来判断模糊c均值聚类FCM的聚类簇数量

文章目录 前言一、轮廓系数的计算方法二、具体流程 前言 轮廓系数&#xff08;Silhouette Coefficient&#xff09;是一种评价聚类效果的指标&#xff0c;它可以用于判断模糊C均值聚类的聚类簇数量。 一、轮廓系数的计算方法 对于每个数据点i&#xff0c;计算它属于每个聚类…
阅读更多...
lightdb-ignore_row_on_dupkey_index

lightdb-ignore_row_on_dupkey_index

LightDB 支持 ignore_row_on_dupkey_index hint LightDB 从23.4 开始支持oracle的 ignore_row_on_dupkey_index hint&#xff0c; 这个hint是用来忽略唯一键冲突的。类似与mysql的 insert ignore。 语法如下&#xff1a; 在LightDB中ignore_row_on_dupkey_index的效果等同于o…
阅读更多...
深入了解HMAC加密技术：原理、应用与实践

深入了解HMAC加密技术：原理、应用与实践

一、引言 在网络安全领域&#xff0c;消息认证码&#xff08;MAC&#xff09;是一种重要的技术手段。Hash-based Message Authentication Code&#xff08;HMAC&#xff09;作为其中的一种&#xff0c;凭借其简单、高效、安全的特性&#xff0c;广泛应用于各种网络通信场景。本…
阅读更多...
k8s中批量处理Pod应用的Job和CronJob控制器介绍

k8s中批量处理Pod应用的Job和CronJob控制器介绍

目录 一.Job控制器 1.简介 2.Jobs较完整解释 3.示例演示 4.注意&#xff1a;如上例的话&#xff0c;执行“kubectl delete -f myJob.yaml”就可以将job删掉 二.CronJob&#xff08;简写为cj&#xff09; 1.简介 2.CronJob较完整解释 3.案例演示 4.如上例的话&#xf…
阅读更多...
工艺系统所管理数字化实践

工艺系统所管理数字化实践

摘要 本文介绍了上海核工程设计研究院在数字化转型方面的实践&#xff0c;包括业务数字化和管理数字化两个方面。业务数字化方面&#xff0c;该院通过开发小工具改进工作流程。管理数字化方面&#xff0c;该院采用零代码平台集中管理管道力学信息相关模型和数据&#xff0c;并…
阅读更多...
JeeSpringCloud uploadFile.jsp 文件上传漏洞复现

JeeSpringCloud uploadFile.jsp 文件上传漏洞复现

0x01 产品简介 JeeSpringCloud是一款免费开源的JAVA互联网云快速开发平台&#xff0c;微服务分布式代码生成的敏捷开发系统架构&#xff0c;项目代码简洁、注释丰富、上手容易、还同时集中分布式、分布式事务、微服务,同时包含许多基础模块和监控、服务模块&#xff0c;JeeSpri…
阅读更多...
RabbitMQ消息模型之Work Queues

RabbitMQ消息模型之Work Queues

Work Queues Work Queues&#xff0c;也被称为&#xff08;Task Queues&#xff09;&#xff0c;任务模型&#xff0c;也是官网给出的第二个模型&#xff0c;使用的交换机类型是直连direct&#xff0c;也是默认的交换机类型。当消息处理比较耗时的时候&#xff0c;可能生产消息…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023