HTML简单了解和基础知识记录

news2024/11/13 9:39:59

参考视频

html的用途

超文本标记语言(英语:HyperText Markup Language,简称:HTML),用来显示网页的文字和框架结构,可以认为是网页的骨架。

标签/元素

用于定义文字图片连接等,分为双标签和单标签。
双标签格式:<标签名字> 标签修饰的内容 </标签名字>;例如

<p>这是一个段落</p>
<h1>这是一个一级标题</h1>

单标签:<标签名字 [内容]>,有些有内容有些没有

<input type="text">  //一个输入
<br> //换行
<br> //一条分割横线

主要写的内容是标签内的内容

常用的小知识

//都是双标签,修改段落P中字体的标签
字体加粗:b ;斜体:i; 下划线:u; 删除线:s

//列表标签
无序列表ul;其中包含多个列表标签li
有序列表ol:其中包含多个列表标签li

//表格标签
表格table,
属性,border(表格边框线宽度赋值一个字符形式)
第一行标签th //table header
行标签tr //table row
列标签 td   //table data

//a标签和img标签都不会自动换行!!
//把标签包含的内容,连接到其他路径
连接标签 a
href属性,定义连接url,当是  #  时表示不跳转
target属性,打开连接的方式,在新窗口或本页等打开

//图片标签
图片标签img
属性src,路径或图片链接
alt ,用于图片替换文本,图片无法显示的时候
with,图片宽度
height,图片高度

//分割块
div 并无意义就是为了分开整体结构布局

//没有特殊元素的标签
span,不独占一行,为了把文本内容包装起来,方便css和js修改

//表单标签
form标签
label双标签,标识input
	for属性,后面跟id名字,为了作用那个id
包含input标签,单标签,
	type属性,text,password(非明文显示)等;
	placeholder属性,默认显示的内容提示
	value属性,实际填充值
	radio属性,勾选
	name属性,是gender时,表示radio单选
action属性
	表单向那个ufl提交,使用#表示只是占位不跳转

标签的属性

语法规则

<标签名字 属性名称='属性值'> ,,,</标签名字> //属性值使用英文的单引号或双引号都行

属性名称不区分大小写,但属性值区分大小写,适用于大部分html属性,下面的属性配合CSS批量修改标签形式

在这里插入图片描述

块元素和行内元素

就是标签是不是独占一行,下个标签自动换行行内元素不能包含块元素
常见块标签(独占一行):div,p,h1,ul ,table,form等
常见的a,img strong等

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

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

相关文章

超简单Java邮件发送-为你的小程序实现邮箱验证码登录

本项目基于Apache Commons Email for Jakarta开发。 超简单实现邮箱发送&#xff0c;并以此扩展出邮箱验证码功能(请读者扩展实现)。 构建工具&#xff1a;Maven 演示邮箱&#xff1a;outlook 准备 请确保你的邮箱开启了SMTP服务&#xff0c;并获取相关参数&#xff0c;类似…

51单片机——模块化编程

1、模块化编程介绍 传统方式编程&#xff1a;所有的函数均放在main.c里&#xff0c;若使用的模块比较多&#xff0c;则一个文件内会有很多的代码&#xff0c;不利于代码的组织和管理&#xff0c;而且很影响编程者的思路。 模块化编程&#xff1a;把各个模块的代码放在不同的.…

诊断知识:agedDTCLimit的使用

文章目录 前言agedDTCLimit的定义agedDTCLimit的使用图解agedDTCLimit总结 前言 ECU中的存储空间一般无法将所有的DTC同时记录故障数据&#xff0c;所以故障发生之后记录的数据&#xff0c;需要在一段时间后未出现故障则自动清除&#xff0c;以保证新的故障出现时&#xff0c;…

苍穹外卖-day05(SpringBoot+SSM的企业级Java项目实战)

苍穹外卖-day05 课程内容 Redis入门 Redis数据类型 Redis常用命令 在Java中操作Redis 店铺营业状态设置 功能实现&#xff1a;营业状态设置 效果图&#xff1a; 选择营业中&#xff0c;客户可在小程序端下单&#xff1a; 选择打烊中&#xff0c;客户无法在小程序端下单&…

【Docker】Docker学习04 | dockerfile的编写

本文首发于 ❄️慕雪的寒舍 dockerfile是构建docker镜像的基础&#xff0c;它规定了一系列语法&#xff0c;让我们可以在某个基础镜像之上&#xff0c;添加自己需要的操作&#xff0c;打包出一个自己的镜像。 1. dockerfile基本语法 下面是dockerfile的基本语法和其对应的功能…

【算法进阶2-动态规划】斐波那契数列(递归调用、动态规划)、钢条切割问题(自定而下实现、自底向上、切割方案)

1 斐波那契数 2 钢条切割问题 2.1 最优解情况 2.2 钢条切割问题之自定而下实现 2.3 钢条切割问题之自底向上实现 2.4 钢条切割问题-重构解-切割方案 1 斐波那契数 # 1 子问题的重复计算 def fibonacci(n: int) -> int:"""使用递归方式计算第 n 个斐波那契数…

计算机毕业设计选题推荐-法律援助平台-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

有限差分学习笔记

有限差分介绍 ​ 在数学中&#xff0c;有限差分法&#xff08;finite-difference methods&#xff0c;简称FDM&#xff09;&#xff0c;是一种微分方程数值方法&#xff0c;是通过有限差分来近似导数&#xff0c;从而寻求微分方程的近似解。 由泰勒展开式的推导 显式方…

给Go+Sciter开发的桌面客户端软件添加系统托盘图标

在桌面端软件开发中&#xff0c;系统托盘图标是提升用户体验的重要元素。托盘图标不仅能提供直观的状态反馈&#xff0c;还能让软件在后台运行时依然保持与用户的交互。通过托盘图标&#xff0c;用户可以轻松最小化软件、退出程序&#xff0c;甚至弹出通知&#xff0c;从而避免…

【海外EI 会议合集】电网系统/绿色能源/新材料主题均可

第五届电网系统与绿色能源国际学术会议&#xff08;PGSGE 2025&#xff09; 2025 5th International Conference on Power Grid Systems and Green Energy 重要信息 会议官网&#xff1a;www.pgsge.org 会议时间&#xff1a;2025年1月10-12日 会议地点&#xff1a;马来西亚…

Linux 部署 MinIO(远程服务器)

1. 下载安装 进入 Linux 内 cd /usr/local/ # 新建目录 mkdir minio # 进入目录 cd minio # 下载地址 wget https://dl.min.io/server/minio/release/linux-amd64/minio# 授权 chmod x minio 2. 自定义配置 自定义账号与登录密码&#xff0c;直接在本目录 默认登录账号和…

【吊打面试官系列-Memcached面试题】memcached 能够更有效地使用内存吗?

大家好&#xff0c;我是锋哥。今天分享关于 【memcached 能够更有效地使用内存吗&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; memcached 能够更有效地使用内存吗&#xff1f; Memcache 客户端仅根据哈希算法来决定将某个 key 存储在哪个节点上&#xff0c;而…

ES的介绍和使用

全文搜索引擎 Elastic Search 第一节 引言 当系统数据量上了10亿、100亿条的时候&#xff0c;我们用什么数据库好&#xff1f;如何解决单点故障&#xff1f;如何提升检索速度&#xff1f;如何解决统计分析问题&#xff1f; 传统数据库的应对解决方案 关系型数据库 通过主从备…

后端Web之登录校验(下篇)

目录 1.概述 ​2.过滤器Fliter 3.拦截器Interceptor 1.概述 Filter过滤器&#xff1a;在Web开发中&#xff0c;过滤器&#xff08;Filter&#xff09;是一种非常重要的组件&#xff0c;用于在请求到达目标资源&#xff08;如Servlet或静态资源&#xff09;之前或之后&#…

10、Redis高级:多级缓存、JVM进程缓存、OpenResty本地缓存、缓存同步Canal

多级缓存 0.学习目标 1.什么是多级缓存 传统的缓存策略一般是请求到达Tomcat后&#xff0c;先查询Redis&#xff0c;如果未命中则查询数据库&#xff0c;如图&#xff1a; 存在下面的问题&#xff1a; •请求要经过Tomcat处理&#xff0c;Tomcat的性能成为整个系统的瓶颈 …

Earth‘s Future | 西南大学时伟宇团队揭示长江上游径流变化对气候变化与人类活动响应的驱动机制不同

本文首发于“生态学者”微信公众号&#xff01; 径流是全球水循环的重要组成部分&#xff0c;对社会经济发展、维持农业生产和维护生态安全具有重要意义。自20世纪末&#xff0c;气候变化与人类活动双重加剧&#xff0c;长江上游径流变化对长江上游乃至长江流域具有重要影响。因…

SSRF以及CSRF

ssrf 服务端请求伪造&#xff1a;由于服务端提供了从其他服务器应用获取数据的功能&#xff0c;但又没有对目标地址做严格过滤与限制&#xff0c;导致攻击者可以传入任意的地址来让后端服务器对其发起请求&#xff0c;并返回对该目标地址请求的数据 数据流&#xff1a;攻击者…

AI大模型日报#0823:GPT-4无师自通预测蛋白质结构登Nature子刊、豆包版《Her》升级上新

导读&#xff1a;AI大模型日报&#xff0c;爬虫LLM自动生成&#xff0c;一文览尽每日AI大模型要点资讯&#xff01;目前采用“文心一言”&#xff08;ERNIE-4.0-8K-latest&#xff09;、“智谱AI”&#xff08;glm-4-0520&#xff09;生成了今日要点以及每条资讯的摘要。欢迎阅…

第一次运行Neo4J

在浏览器中输入127.0.0.1:7474&#xff08;如Neo4J装在其它机器上输入相应的IP地址即可&#xff09; 1、创建简单节点 这里我创建一个简单的“Employee”节点&#xff0c;在数据浏览器中的命令框&#xff08;美元提示符下&#xff09;键入以下命令 CREATE (emp:Employee) 执行…

leetcode139. 单词拆分,动态规划

leetcode139. 单词拆分 给你一个字符串 s 和一个字符串列表 wordDict 作为字典。如果可以利用字典中出现的一个或多个单词拼接出 s 则返回 true。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典中的单词可以重复使用。 示例 1&#xff1a; 输入: s…