Html5总结

news2024/12/23 11:14:07

前端学习

html决定页面的结构css决定页面的样式js决定页面的行为

Html5

1.文本格式化标签(熟记)
你在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标记
在这里插入图片描述
2.标签属性
例如:

<hr width="400">
1.属性采用的是“键值对”的形式,key = "value" 格式。
2.属性不分先后顺序!
3.任何属性都有默认值,忽略该属性则取默认值。

3.图像标签img
在这里插入图片描述
4.链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
这里的a是单词anchor的缩写,意思是铁锚,锚。
1. href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。
href全称Hypertext Reference.
提醒一下:
如果还不想添加url地址,可以使用" # "来代替一下。
这里的链接不仅仅可以添加网址还可以添加图片,影像之类的。
2. target:制定链接页面的打开方式,有两种取值,self和blank。
blank也可以写成" _blank "(固定写法)。
例如下面的百度链接就是用以下语句写的:
<a href="http://www.baidu.com" target="blank">百度链接</a>

5.锚点定位

通过锚点链接可以快速的定位到目标内容。
很好理解在a标签中加入了id的属性:
例如:
<a href="#biaoqian">定位到数字1那里去</a>
<a id="biaoqian">数字1</a>
这里很简单两个命令,就是通过href属性然后定位到了id的属性,很好理解。

6.特殊字符
在这里插入图片描述
7. base标签

base可以设置整体的链接的打开状态。
规定页面中所有的超链接和表单在何处打开。该属性会被每个链接中的 target 属性覆盖。


规定页面上所有链接的默认 URL 和默认目标:
<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>
 
<body>
<img src="logo.png" width="24" height="39" alt="Stickman">
<a href="http://www.runoob.com">runoob.com</a>
</body>

8.div span标签

定义和用法
<div> 标签定义 HTML 文档中的分割或部分(分区或小节,division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
任何类型的内容都可以放在 <div> 标签内!<div> 标签可用作 HTML 元素的容器,然后使用 CSS 设置样式或使用 JavaScript 进行操作。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。通过使用 class 或 id 属性,可以轻松地对 <div> 标签设置样式。
注意:默认情况下,浏览器总是在 <div> 元素前后放置一个换行符。
用法
<div> 是块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div>class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。

9.无序列表ul
ul> 元素表示无序的项目列表,通常渲染为项目符号列表。
在这里插入图片描述
10.有序列表ol

<body>

        你们喜欢看的电影:

        <ol>
            <li>8</li>
            <li>返老还童</li>
            <li>marvel</li>
        </ol>

</body>

在这里插入图片描述
11.自定义列表

<dl>
	<dt>...</dt>
	<dd>...</dd>
	<dd>...</dd>
	...
	<dt>...</dt>
	<dd>...</dd>
	<dd>...</dd>
</dl>
这里dd标签是来解释dt标签的。
例如:
	<dl>
	<dt>北京</dt>
	<dd>昌平</dd>
	<dd>通州</dd>
	<dd>顺义</dd>
	</dl>
结果如下:
北京
	昌平
	通州
	顺义

12.font标签

<font> 规定文本的字体、字体尺寸、字体颜色。

13.table中的caption标签

在这里插入图片描述
14.select 和 option 标签
在这里插入图片描述
15.input属性type="radio"用法 和 label的for属性

单选按钮(单选框):就是讲input的type属性赋值为radio。

首先,我们点击label标签中的内容,从而让input单选按钮被选中。

这就用到label中的for属性,来指向input的id值!

此外,必要时候,我们声明的name属性必须相同。

在这里插入图片描述
16.表单域

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素控件
</form>

在这里插入图片描述
17.input输入表单元素

<input type="属性值" />

type 属性的属性值及其描述如下:
在这里插入图片描述
18.label标签
label 标签为 input 元素定义标注(标签)
标签用于绑定一个表单元素,当点击

<label for="sex"></label>
<input type="radio" name="sex" id="sex" />

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

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

相关文章

Java SDK开发(SpringBoot Starter)

SDK开发 开发starter的好处&#xff1a;引入starter之后&#xff0c;可以在配置文件中配置&#xff0c;自动生成客户端使用。 步骤 1. 创建一个初始化SpringBoot项目&#xff0c;选择相关依赖&#xff1a; Lombook&#xff1a;日志注解 第二个注解是为了关键词提示用的&…

Java:多线程(同步死锁,锁原子变量,线程通信,线程池)

5&#xff0c;同步和死锁 5.1&#xff0c;Synchronized&#xff0c;Lock 修饰一个代码块&#xff0c;被修饰的代码块称为同步语句块&#xff0c;其作用的范围是大括号{}括起来的代码&#xff0c;作用的对象是调用这个代码块的对象&#xff1b;修饰一个方法&#xff0c;被修饰的…

如何使用极狐GitLab 实现最小权限访问?

极狐GitLab 是 GitLab 在中国的发行版&#xff0c;专门面向中国程序员和企业提供企业级一体化 DevOps 平台&#xff0c;用来帮助用户实现需求管理、源代码托管、CI/CD、安全合规&#xff0c;而且所有的操作都是在一个平台上进行&#xff0c;省事省心省钱。可以一键安装极狐GitL…

初始化seata在nacos的配置报错nacos-config.sh 127.0.0.1-nacos-config.txt-文件不存在

问题&#xff1a;初始化seata在nacos的配置报错nacos-config.sh 127.0.0.1-nacos-config.txt-文件不存在 解决思路&#xff1a; 1.seata-server-0.9.0\seata\conf下的file.conf文件要修改&#xff1a; transport {# tcp udt unix-domain-sockettype "TCP"#NIO NA…

IDEA如何去掉编辑框右侧的竖线

打开 IntelliJ Idea 软件 依次找到 File—>Settings—>Editor—>General—>Appearance 去掉勾选 Show hard wrap and visual guides (configured in Code Style options)

OpenAI 取消为 ChatGPT 加水印计划,用户反应成关键因素|TodayAI

OpenAI 近日宣布&#xff0c;尽管公司内部已经准备了一种为 ChatGPT 生成的文本添加水印的系统&#xff0c;但由于担心用户反应&#xff0c;公司决定暂不推出这一功能。 据《华尔街日报》报道&#xff0c;OpenAI 早在一年前就开发了一个可以为 ChatGPT 生成的文本添加水印的系…

智能化招聘系统:从筛选到录用的全程解析

一、引言 在数字化时代&#xff0c;企业的人力资源管理正经历着前所未有的变革。招聘作为人力资源管理的重要一环&#xff0c;其效率与精准度直接影响着企业的竞争力和发展动力。随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;智能化招聘系统应运而生&…

开源SFTP服务器软件SFTPGo

什么是 SFTPGo&#xff1f; SFTPGo 是一种事件驱动的文件传输解决方案。它支持多种协议&#xff08;SFTP、SCP、FTP/S、WebDAV、HTTP/S&#xff09;和多种存储后端&#xff0c;包括本地文件系统、加密本地文件系统、S3&#xff08;兼容&#xff09;对象存储、Google Cloud Stor…

【Linux】—— Linux进程状态(R、S、D、T、Z、X)

&#x1f30f;博客主页&#xff1a;PH_modest的博客主页 &#x1f6a9;当前专栏&#xff1a;Linux跬步积累 &#x1f48c;其他专栏&#xff1a; &#x1f534; 每日一题 &#x1f7e1; C跬步积累 &#x1f7e2; C语言跬步积累 &#x1f308;座右铭&#xff1a;广积粮&#xff0…

全新启航!阿里云向量检索服务Milvus版正式上线!

今天&#xff0c;阿里云正式宣布向量检索服务Milvus版在杭州、上海、北京、深圳四大region正式可用并开放公测&#xff01;这是由阿里云与产品生态合作伙伴Zilliz联合推出的一款业内领先的云原生向量检索引擎。向量检索服务Milvus版在上一代EMR Serverless Milvus 公测版的基础…

人工智能自动驾驶三维车道线检测—PersFormer模型代码详解

文章目录 1. 背景介绍2. 数据加载和预处理3. 模型结构4. Loss计算5. 总结和讨论 1. 背景介绍 梳理了PersFormer 3D Lane这篇论文对应的开源代码。 2. 数据加载和预处理 数据组织方式参考&#xff1a;自动驾驶三维车道线检测系列—OpenLane数据集介绍。 坐标系参考&#xff…

【Raven2靶场渗透】

文章目录 一、IP获取 二、信息收集 三、Flag1 四、漏洞利用 五、Flag2 六、Flag3 七、MSF UDF提权 八、CVE漏洞本地提权 一、IP获取 Kali IP:192.168.78.128 靶机IP&#xff1a;192.168.78.178 二、信息收集 端口和服务探测&#xff1a; nmap -sV -p- 192.168.78.178 开放…

启发式合并加树形dp

题目链接 令f【x】【0】表示不选根的x子树的最大贡献&#xff0c;f【x】【1】表示选根的x子树最大贡献&#xff0c;g【x】为max&#xff08;f【x】【0】&#xff0c;f【x】【1】&#xff09;。 如果我们要连接x和u1&#xff0c;那么贡献是&#xff1a; w【x】w【u1】f【u1】【0…

ASP.NET Core 基础 - 入门实例

一. 下载 1. 下载vs2022 Visual Studio 2022 IDE - 适用于软件开发人员的编程工具 (microsoft.com) 学生,个人开发者选择社区版就行,免费的. 安装程序一直下一步下一步就行,别忘了选择安装位置,如果都放在C盘的话,就太大了. 2. 选择工作负荷 准备工作完成 二. 创建新项目 三…

如何用密码保护你的 WordPress 管理员 (wp-admin) 目录

在维护 WordPress 网站时&#xff0c;确保 wp-admin 目录安全是非常重要的。为该目录添加密码保护可以有效提高网站安全性&#xff0c;防止未经授权的访问。这篇文章将介绍实现这一目标的两种方法。 1.为什么要为 wp-admin 目录添加密码保护 WordPress 管理员后台是网站的核心…

自动化集成应用钡铼DB系列防水分线盒

随着工业自动化的快速发展&#xff0c;如今的现场设备需要更高效、更稳定的信号采集和集成方案。钡铼技术的DB系列防水分线盒作为一种优秀的解决方案&#xff0c;成功地结合了先进的工业设计与耐用材料&#xff0c;为物流设备、食品加工设备、制药设备等多种工业应用提供了可靠…

《深入浅出WPF》学习笔记六.手动实现Mvvm

《深入浅出WPF》学习笔记六.手动实现Mvvm demo的层级结构,Mvvm常用项目结构 依赖属性基类实现 具体底层原理后续学习中再探讨,可以粗浅理解为,有一个全局对象使用list或者dic监听所有依赖属性,当一个依赖属性变化引发通知时,就会遍历查询对应的字典&#xff0c;通知View层进行…

目标检测之选择性搜索:Selective Search

文章目录 一.选择性搜索的具体算法二.保持多样性的策略三.给区域打分四.选择性搜索性能评估五.代码实现 论文地址&#xff1a; https://www.koen.me/research/selectivesearch/ 代码地址&#xff1a; https://github.com/AlpacaDB/selectivesearch 参考&#xff1a; https:/…

SpringBootWeb AOP

事务&AOP 1. 事务管理 1.1 事务回顾 在数据库阶段我们已学习过事务了&#xff0c;我们讲到&#xff1a; 事务是一组操作的集合&#xff0c;它是一个不可分割的工作单位。事务会把所有的操作作为一个整体&#xff0c;一起向数据库提交或者是撤销操作请求。所以这组操作要…

kickstart自动安装脚本,pxe网络安装

目录 1 kickstart图形化生成脚本工具 1.1 安装apache 1.2 创建挂载镜像软链接 1.3 图形生成自动化脚本选项 1.4 修改生成的自动化脚本 1.5 将脚本放至网站根目录 2 安装系统 2.1 关闭DHCP自动分配 2.2 下载配置DHCP服务 2.3 重启DHCP服务 2.4 使用pxe方法安装系统&#xff08;网…