前端工程师————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
星光不问赶路人,岁月不负有心人!
---致同行的人

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

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

相关文章

【第十二届“泰迪杯”数据挖掘挑战赛】【2024泰迪杯】B题基于多模态特征融合的图像文本检索—解题全流程(论文更新)

【第十二届“泰迪杯”数据挖掘挑战赛】【2024泰迪杯】B题基于多模态特征融合的图像文本检索更新(论文更新) ​ 本节主要更新了论文、训练日志的log数据提取(Loss、ACC、RK)等数据可视化作图的代码 B题交流QQ群: 4583…

rabbitMQ的基础操作与可视化界面

当你安装好RabbitMq时,可以 尝试一下,这些命令 启动rabbitMQ服务 #启动服务 systemctl start rabbitmq-server #查看服务状态 systemctl status rabbitmq-server #停止服务 systemctl stop rabbitmq-server #开机启动服务 systemctl enable rabbitmq-…

09_Web组件

文章目录 Web组件Listener监听器ServletContextListener执行过程 Filter过滤器Filter与Servlet的执行 案例(登录案例) 小结Web组件 Web组件 JavaEE的Web组件(三大Web组件): Servlet → 处理请求对应的业务Listener →…

RVM安装ruby笔记

环境 硬件:Macbook Pro 系统:macOS 14.1 安装公钥 通过gpg安装公钥失败,报错如下: 换了几个公钥地址(hkp://subkeys.pgp.net,hkp://keys.gnupg.net,hkp://pgp.mit.edu),…

ML-Decoder: Scalable and Versatile Classification Head

1、引言 论文链接:https://openaccess.thecvf.com/content/WACV2023/papers/Ridnik_ML-Decoder_Scalable_and_Versatile_Classification_Head_WACV_2023_paper.pdf 因为 transformer 解码器分类头[1] 在少类别多标签分类数据集上表现得很好,但由于其查询…

css3之动画animation

动画animation 一.优点二.定义和使用三.动画序列和解释四.常见属性及解释五.简写(名字和时间不能省略)(持续时间在何时开始的时间前)(简写中无animation-play-state)六.例子1.大数据热点图2.奔跑的熊大(一个…

设计模式6--抽象工厂模式

定义 案例一 案例二 优缺点

代码随想录-二叉树(路径)

目录 257. 二叉树的所有路径 题目描述: 输入输出描述: 思路和想法: 404. 左叶子之和 题目描述: 输入输出描述: 思路和想法: 513.找树左下角的值 题目描述: 输入输出描述:…

Android裁剪图片为波浪形或者曲线形的ImageView

如果需要做一个自定义的波浪效果的进度条,裁剪图片,对ImageView的图片进行裁剪,比如下面2张图,如何实现? 先看下面的效果,看到其实只需要对第一张高亮的图片进行处理即可,灰色状态的作为背景图。…

基于SSM的戒烟网站(有报告)。Javaee项目。ssm项目。

演示视频: 基于SSM的戒烟网站(有报告)。Javaee项目。ssm项目。 项目介绍: 采用M(model)V(view)C(controller)三层体系结构,通过Spring SpringMv…

腾讯云优惠券领取方法大公开,省钱不再是难事

腾讯云—腾讯倾力打造的云计算品牌,以卓越科技能力助力各行各业数字化转型,为全球客户提供领先的云计算、大数据、人工智能服务,以及定制化行业解决方案和提供可靠上云服务,助力企业和开发者稳定上云! 然而&#xff0…

数据结构进阶篇 之 【二叉树顺序存储(堆)】的整体实现讲解(赋完整实现代码)

做人要谦虚,多听听别人的意见,然后记录下来,看看谁对你有意见 一、二叉树的顺序(堆)结构及实现 1.二叉树的顺序结构 2.堆的概念及结构 3.堆的实现 3.1 向下调整算法 AdJustDown 3.2 向上调整算法 AdJustUP 3.3 …

C语言例1-8:设 char x,y; ,scanf(“x=%c,y=%c“,x,y); 后使 x 为 ‘X‘, y为 ‘Y‘,则键盘上的正确输入是

代码如下&#xff1a; #include<stdio.h> int main(void) {char x,y;scanf("x%c,y%c",&x,&y);printf("x%c,y%c\n",x,y);return 0; } 键盘输入选项A: xXyY 结果如下&#xff1a; 键盘输入选项B: xX,yY 结果如下&#xff1a; 键盘输入选项…

通过Jmeter准备压测数据-mysql示例

1、新建线程组 总共30万条数据 2、创建jdbc链接 创建jdbc连接配置 配置mysql连接 需要在jmeter安装的路径\apache-jmeter-5.6.3\lib\ext 目录下添加mysql 驱动 3、创建jdbc请求 jdbc链接名称需要与上一步中的保持一致&#xff0c;同时添加insert语句 例如 INSERT INTO test…

关系型数据库mysql(7)sql高级语句①

目录 一.MySQL常用查询 1.按关键字&#xff08;字段&#xff09;进行升降排序 按分数排序 &#xff08;默认为升序&#xff09; 按分数升序显示 按分数降序显示 根据条件进行排序&#xff08;加上where&#xff09; 根据多个字段进行排序 ​编辑 2.用或&#xff08;or&…

Python Flask框架 -- flask-migrate迁移ORM模型

# 之前使用的这个db.create_all()很有局限性&#xff0c;它不能把在class里修改的东西同步上数据库&#xff0c;所以不用了 # with app.app_context(): # 请求应用上下文 # db.create_all() # 把所有的表同步到数据库中去 例如&#xff0c;在User类中增加一个email字段&…

C语言例1-3:设 int a; ,语句 for(a=0;a==0;a++); 和语句 for(a=0;a=0;a++); 执行的循环次数分别是

答案&#xff1a;1,0 代码如下&#xff1a; #include<stdio.h> int main(void) {int a;for(a0;a0;a){printf("1\n");} return 0; } 结果如下&#xff1a; 代码如下&#xff1a; #include<stdio.h> int main(void) {int a;for(a0;a0;a){printf("…

【前端】layui学习笔记

参考视频&#xff1a;LayUI 1.介绍 官网&#xff1a;http://layui.apixx.net/index.html 国人16年开发的框架,拿来即用,门槛低 … 2. LayUi的安装及使用 Layui 是一套开源的 Web UI 组件库&#xff0c;采用自身轻量级模块化规范&#xff0c;遵循原生态的 HTML/CSS/JavaScript…

深入解析大语言模型显存占用:训练与推理

深入解析大语言模型显存占用&#xff1a;训练与推理 文章脉络 估算模型保存大小 估算模型在训练时占用显存的大小 全量参数训练 PEFT训练 估算模型在推理时占用显存的大小 总结 对于NLP领域的从业者和研究人员来说&#xff0c;有没有遇到过这样一个场景&#xff0c;你的…

C语言例1-11:语句 while(!a); 中的表达式 !a 可以替换为

A. a!1 B. a!0 C. a0 D. a1 答案&#xff1a;C while()成真才执行&#xff0c;所以!a1 &#xff0c;也就是 a0 原代码如下&#xff1a; #include<stdio.h> int main(void) {int a0;while(!a){a;printf("a\n");} return 0; } 结果如…