前端工程师————HTML5学习

HTML5基础


开发工具很多,其中Hbulider较好用,下载网址如下:


DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

html表示整个页面
head表示搜素框
body表示内容
title表示标题
html文档的后缀必须是.html或.htm
利用vs code 网页开发
1.打开网页
2.新建文件(ctrl+N)
3.保存,注意要保存为.html
4.生成页面骨架结构
输入!,按下tab键
5.单击鼠标右键,再点击“Open in Default Browser"

HTML5基本格式


 

段落标签:


通常HTML标签分为两大类:分为单标签和多标签

HTML注释标签

HTML5头部相关标签:


其中有光link的书写格式:

标题标签的格式和语法,同时段落标签也可以用


水平线的语法:


 

文本格式化标记类型:
 

常用图像格式:
gif:最突出的地方就是它支持动画,也支持透明。
png:体积较小,但不支持动画。
jpg:能显示的颜色比其他两种多,但是每修改一次图片都会造成数据的丢失。

图像标签:


图像标记的属性:
alt:当图像无法显示是,会由ali替换内容。
width,height:用来定义图片的高度和宽度。
border:为图像添加边框,设置边框的宽度。
vspace:调整图像的垂直边距。
hspace:调整图像的水平边距。
align:图像的对齐属性。
title:可以设置鼠标在图形上悬停时提示的文字。

创建超链接


href:用于指定链接目标的url地址
target:用于指定链接页面的打开方式,_self为默认值,表示在原窗口打开,_blank表示在新窗口打开。
锚点链接
 

列表元素
无序列表


有序列表
 


无序列表----表格

结构元素

nav元素


section:用于内容的分块。
aside:可以用于侧边栏的应用。
figure和figcaption元素
 

页面交互元素:detail和summary元素


页面交互元素:progress元素 常用属性:
value:已经完成的工作量。
max:总共有多少工作量。


页面交互元素meter元素
 

文本层次语义元素:
mark元素:可以将文字用颜色显示出来.
cite元素:被标记的文字将以斜体的样式显示.
 

全局属性
draggable属性:用来定义元素是否可以拖动,默认值为false,表示不能拖动,为true时表示可以拖动。
hidden属性:表示元素是否隐藏,默认会显示。
spellcheck属性:主要针对input元素和textarea文本输入框,对用户水乳的文字内容进行拼写和语法检查,为true时检测输入框中的值,反之不测。
contenteditable属性:规定是否可以编辑元素的内容,为true时可以编辑,为false表示不可以编辑。
 

表单元素
表单元素(表单控件)
input(输入表单元素0
select(下拉表单元素)
textarea(文本域元素) 但用户输入内容较多时,可以使用文本域


 

[ 「今でもあなたは私の光。」❤️如今你依旧是我的光。
版权声明:本文为博主「南栀北夏」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:http://www.jinghan.site
星光不问赶路人,岁月不负有心人!
---致同行的人

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【蓝桥杯】矩阵快速幂

一.快速幂概述 1.引例 1)题目描述: 求A^B的最后三位数表示的整数,A^B表示:A的B次方。 2)思路: 一般的思路是:求出A的B次幂,再取结果的最后三位数。但是由于计算机能够表示的数字…

Gromacs模拟一:配体-双链蛋白质复合物体系准备

1、蛋白质的准备: 在RCSB网站下载想要的蛋白晶体(教程里是3htb),用notepad等编辑器或是分子可视化软件除去里面的非蛋白分子或离子。 这里采用的是一个经过分子对接后的蛋白质pdb和配体小分子的pdb。 教程里提到的配体是2-丙基…

java算法day39 | 动态规划part02 ● 62.不同路径 ● 63. 不同路径 II

62.不同路径 思路: 本题非常巧妙。 第一步:定义一个dp数组存储到达每个位置的路径数。 第二步:每个位置的路径数它左面位置的路径数上面位置的路径数。 第三步:不好想的是如何初始化数组。 既然只能向下或向右走,可推出…

网络七层模型之会话层:理解网络通信的架构(五)

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

浅谈AI未来发展趋势与挑战

对于AI大模型未来发展趋势与挑战的个人看法: 1、未来的发展趋势: AI大模型未来发展趋势可以从以下几个关键方面来讨论: 1. 能源与计算效率 绿色计算与节能技术:随着硬件技术的发展,预计未来的AI大模型将进一步降低能…

python电商结合双轨制

最近又重新整合翻看以前的数据,图片,绘画,还有各种编程代码,python,leetcode,还有关于商业方面的一些见解,想起了大学时候和同学们并肩作战,熬夜编码的时光。还有大数据,八爪鱼爬虫。 下面是我的手稿电商打…

Arduino通过Wire库读取AS5600编码器数据

Arduino通过Wire库读取AS5600编码器数据 ✨在实际测试中,测试AS5600除了使用径向磁铁之外,球型的或者正四方体的强磁铁,也是可以准确的测量角度。测试高度的话,从板子(芯片引脚底部)到磁铁底部15毫米内&…

算法打卡day21(开始回溯)

今日任务: 1)77.组合 77.组合 题目链接:77. 组合 - 力扣(LeetCode) 文章讲解:代码随想录 (programmercarl.com) 视频讲解:带你学透回溯算法-组合问题(对应力扣题目:77…

Spring日志框架

前言 本文我们简单说说关于Spring中的日志框架,以及对应的注解 我们知道,公司服务器在运行的时候,一定会打印日志,有很多优点,比如预防报警,或者是某重大事故尝试修复等等都需要查看日志 应该说日志对我们来说并不陌生,我们在之前刷题或者是程序遇到bug的时候也经常会将程序的状…

Java数据结构-链表OJ题

目录 1. 移除链表元素2. 反转链表3. 返回中间结点4. 返回倒数第k个结点5. 合并两个有序链表6. 分割链表7. 回文链表8. 找相交链表的公共结点9. 判断链表是否有环10. 返回链表环的入口 老铁们好,学习完链表这个数据结构之后,怎么能少了OJ题呢?…

SQL语句学习+牛客基础39SQL

什么是SQL? SQL (Structured Query Language:结构化查询语言) 是用于管理关系数据库管理系统(RDBMS)。 SQL 的范围包括数据插入、查询、更新和删除,数据库模式创建和修改,以及数据访问控制。 SQL语法 数据库表 一个…

Windows下使用tensorrt配置YOLOv8进行加速

Windows下使用tensorrt配置YOLOv8进行加速 致谢: win10下 yolov8 tensorrt模型加速部署【实战】 - 知乎 (zhihu.com) yolov8 tensorrt 实战之先导_哔哩哔哩_bilibili FeiYull/TensorRT-Alpha: 🔥🔥🔥TensorRT for YOLOv8、YOLOv8…

K8S故障处理指南:pod驱逐问题处理

更多技术博客,请关注微信公众号:运维之美 在K8S集群故障处理过程中,你可能遇到过pod的各种状态,Evicted状态代表你的K8S环境遇到了资源驱逐的问题,本节通过对驱逐问题的解决,参数的调整,问题的处理思路,希望给你解决此类问题提供帮助。 一、pod驱逐问题 pod出现状态为…

AR智能眼镜解决方案_MTK平台安卓主板硬件芯片方案开发

AR智能眼镜,是一个可以让现场作业更智能的综合管控设备。采用移动互联网、大数据和云计算等技术,现场数据的采集与分析;同时实现前端现场作业和后端管理的实时连动、信息的同步传输与存储。让前端现场作业更加智能,后端管理更加高…

Java代码基础算法练习-自定义函数之字符串连接-2024.03.30

任务描述: 写一函数,将两个字符串连接起来,然后在主函数中调用该函数实现字符串连接操作。 任务要求: 代码示例: package M0317_0331;import java.util.Scanner;public class m240330 {public static void main(Stri…

Java使用数组实现栈、队列、堆

数组模拟栈: const int N 10010; // ******************** 栈 int stk[N], tt//tt是下标; // 插入 stk[k] x; // 删除 tt--; // 判断栈是否为空 if (tt > 0) not empty else empty // 栈顶 stk[tt]; // ******************** 队列 // 在队尾插入…

BitVM2:比特币上的无需许可验证

1. 引言 前序博客有: 基于BitVM的乐观 BTC bridgeBitVM:Bitcoin的链下合约Bitcoin Bridge:治愈还是诅咒? 最初的 BitVM 设计仅限于两方设置。BitVM2结合了并行和冗余实例,以引入基于 1-of-n 诚实假设的多方配置。这…

3D目标检测综述笔记

3D Object Detection for Autonomous Driving: A Review and New Outlooks https://arxiv.org/pdf/2206.09474.pdf 目录 0.background​编辑 1.1表示形式 1.2感知输入 1.3数据集 1.4评估指标 1. LiDAR-based 3D Object Detection 2.数据表征 2.1 point-based​ 2.1.…

APP UI自动化测试框架总结,各种项目实战加源码等你来拿

开发语言选择 通常用于自动化测试的编程语言有:Python、Java、Javascript、Ruby、C#、PHP等。一般我们会选择自己熟悉的编程语言来编写自动化脚本,但对于编程基础基本为0的童鞋(或者专注于做自动化测试的童鞋),推荐学…

JAVA8 新特性StreamAPI使用

一、使用StreamAPI,操作两个队伍中名字,需求如下: 1、第一个队伍名字为3个字的成员姓名 2、第一个队伍筛选名字为3个字之后的前三个成员 3、第二个队伍筛选姓张的成员 4、第二个队伍筛选姓张的之后跳过前两个成员 5、将两个队伍合并成一个队伍…