前端基础知识html

一.基础标签


1.<h1>-<h6>:定义标题,h最大,h最小
2.<font>:定义文本的字体,尺寸,颜色
3.<b>:定义粗体文本
4.<i>:定义斜体文本
5.<u>:定义文本下划线
6.<center>:定义文本居中
7.<p>:定义段落
8.<br>:定义折行
9.<hr>:定义水平线

                             1.定义标题

7def66c14a77423aa84332fb8e34ee3b.png

 运行结果

2a35efb352c64d6687a40379cafec107.png

 

  2.定义水平分割线7a2fd40dba0d41fc9a4335ebd9a79878.png

 运行结果:086ae01cbbfe4263936114b335140228.png

 3.定义文本的字体,尺寸,颜色e89cf6a9bf404b9694b365d58e72d0f9.png

 运行结果:

02b1ff0e0c3a4215a99ebd3e9feda9af.png

 

        4.段落标签,单独占一行7999d4ca99a344ed9edf54f6bef173e5.png

 运行结果:a8b0d24e8aaa448e90195d2dc6d7bbfc.png

 

       5.定义粗体/斜体/下划线,删除线文本be2e68807e9c4d849ff93f40c8a3d13b.png

 运行结果:cd2bb90be45c40d28a8c6f12400edf80.png

                二.图片,音频,视频标签

1.img:定义图片
①src:规定显示图像的URL
②height:定义图像的高度
③width定义图像的宽度

2.audio:定义音频。支持的音频格式:MP3,WAV,OGG
①src:规定音频的URL
②controls:显示播放控件

3.video:定义视频。支持的音频格式:MP3,WedbM,OGG
①src:规定视频的URL
②controls:显示播放控件

1.图片a5b76ebe15e34bacb0b4a16b6083bf7e.png

 运行结果:3d1f8b23e35d48f8b636cb0b8e93286c.jpg

   2.音频,视频be676e82a7f242bba2fa384647639ec5.png

 运行结果: 0314866bdf1f45acaf45662fb66dae04.jpg

 注意:尺寸问题,不然就是像这样,太大了,不美观。b0b89b3c8c6f48a8b1b88d23da002225.png

 解决办法:所有我们需要设置高和宽

72fbe45d740542409fd9ff4067ae07dc.png

 运行结果9b86a4c2c53e47adb7f72d134c3591ec.jpg

 绝对路径展示步骤:

第1步,打开浏览器,找到百度,随便一张图片(自己喜欢的)

f6048c65ec3840c7bad35280f34239f8.jpg

 第2步选择复制图片地址,这个就是它的绝对路径了。

第3步,去vsdeco里面运行

d6e0079cb8d94d328b0140c563ab2498.png

运行结果:

6609be39abcb4a62bba7b44c211c5af2.png

                      3.超链接标签

超链接标签:<a>定义超链接,用于链接到另一个资源。
①href:指定访问资源的URL
②target:指定打开资源的方式。
a:_self:默认值,在当前页面打开。
b:_blank:在空白页面打开

05d2fa0c8e0d4d1ca57b0f79ee8b50a9.png

 37cd7ea7936e44ce9ab8970084d66bdf.png

 运行结果:

2d0890084b184ec0a0d8d6cef9a5319e.png

                         4.列表标签


<li>:定义列表项
<ol>:定义有序列表用这个
<ul>:定义无序列表用这个

例子:
有序列表(order list):
<ol>
      <li>咖啡</li>
      <li>茶</li>
      <li>牛奶</li>
</ol>
无序列表:
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>

如图所示:5b2b4fa6b8b94095bc9eaf07465e68f8.png

 运行结果:

dc22e65b438e49d9b6966be688e90e29.png

                             5.表格标签
1.table:定义表格
①borderz规定表格边框的宽度
②.width:规定表格的宽度③cellspacing:规定单元格之间的空白。
2.定义行
①align:定义表格行的内容对齐(center居中)
3.定义单元格:
①.rowspan:规定单元格可横跨的行数
②colspan:规定单元格可横跨的列数
1.<table>定义表格
2.<tr>定义行
3.<td>定义单元表格
4.<th>:定义表格单元格

1d65029f48824c9cad49c85b56a197c2.png

a833696b33784539b7380af752bccde0.png 

 运行结果:bd8bdb7628634c8697248c95b7849a11.png

其他效果展示代码如图9a44794c37c241c8abeeb58f7a0c0b43.png

 1a49796174de49c1802b5582b6472479.png

 其他代码运行结果总图:58c6eac05d844cf79f0d7a731d83c3ff.png

                       6.布局标签

布局标签:
①<div>:定义一个html文档中的一个区域部分,经常与CSS一起使用,用来布局网页
②<span>:用于组合行内元素

78d36b917ca94e8a96be0464eced7827.png

 运行结果如图e3bfadc5f1b848698d34e62f16cb8939.png

                        7.表单标签


表单:在网页中主要负责数据采集功能。
使用<form>标签定义表单单项(元素):不同类型的input元素,下拉列表,文本域等。

标签:
1.<form>:定义表单
2.<imput>:定义表单项,通过type控制输入形式
3.<label>:为表单项定义标注
4<select>:定义下拉列表
5<option>:定义下拉列表的列表项
6<textarea>:定义文本域

<form>:定义表单
①action:规定当提交表单时向何处发送表单数据的方式
②method:规定发送表单数据的方式
a:
get:浏览器会将数据直接附在表单的action URL之后。大小有限制。
b:
post:浏览器会将数据放到http请求消息体中。大小无限制391c931fb1f74086bb3332d3ecbee43d.png

 运行结果:28517fd7c6f74f22a94e7f296df5c03e.png

                   8.表单项标签-表单项(番外篇)

表单项标签-表单项:
①<input>:表单项,通过type属性控制输入形式。
②<select>:定义下拉列表,<option>定义列表项。
③<textarea>:文本域

type取值:
①text:默认值,定义单行的输入字段
②password:定义密码
③radio:定义单项按钮
④checkbox:定义复选框
⑤file:定义文件上传按钮
⑥hidden:定义隐藏的输入字段
⑦submit:定义提交按钮,提交按钮会把表单数据发送到服务器。
⑧reset:定义重置按钮,重置按钮会清除表单中的所有数据
⑨button:定义可点击按钮d33697393b3b491198ce79eaf6255d30.png

 4159e5eca0834cc089d1517e7b65733d.png

 f9c5234c13c043e1955f86f5838d08c6.png

 9bc3abe3f70e49a88c8ac2c488828da8.png

运行结果:e05536d8aaab49baa83ac97212a92ee0.png

 

 

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

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

相关文章

增强现实(AR)和虚拟现实(VR)营销的未来:沉浸式体验和品牌参与

--- 如何将AR和VR技术应用于营销&#xff0c;以提高品牌知名度、客户参与度 增强现实&#xff08;AR&#xff09;和虚拟现实&#xff08;VR&#xff09;不再只是游戏。这些技术为品牌与受众互动提供了创新的方式。营销人员可以创造更好的客户体验&#xff0c;并为身临其境的故…

短剧APP搭建必备技巧大揭秘

在当今数字化时代&#xff0c;随着人们对视频内容的需求不断增长&#xff0c;短剧APP成为一种备受关注的新兴形式。短剧APP提供了一个平台&#xff0c;让用户可以快速、便捷地浏览各种精彩的短剧内容&#xff0c;吸引了大批年轻用户的关注。短剧APP的搭建不仅可以满足用户对短剧…

缓存雪崩问题及解决思路

实战篇Redis 2.7 缓存雪崩问题及解决思路 缓存雪崩是指在同一时段大量的缓存key同时失效或者Redis服务宕机&#xff0c;导致大量请求到达数据库&#xff0c;带来巨大压力。 解决方案&#xff1a; 给不同的Key的TTL添加随机值利用Redis集群提高服务的可用性给缓存业务添加降…

碳素光线疗法与宠物健康

碳素光线与宠物健康 生息在地球上的所有动物、在自然太阳光奇妙的作用下、生长发育。太阳光的能量使它们不断进化、繁衍种族。现在、生物能够生存、全仰仗于太阳的光线。太阳光线中、包含有动物健康所需要的极为重要的波长。因此、和户外饲养的动物相比、在室内喂养的观赏动物、…

重学SpringBoot3-SpringBoot可执行JAR的原因

更多SpringBoot3内容请关注我的专栏&#xff1a;《SpringBoot3》 期待您的点赞&#x1f44d;收藏⭐评论✍ 重学SpringBoot3-SpringBoot可执行JAR的原因 Spring Boot可执行JAR的结构打包运行JAR 包内部结构 工作原理优点总结 Spring Boot 的一个核心特性是它的可执行 JAR&#x…

leetcode热题100.柱状图中最大的矩形

Problem: 84. 柱状图中最大的矩形 文章目录 题目思路复杂度Code 题目 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 示例 1: 输入&#xff1a;hei…

Flask后端框架搭建个人图库

Hello&#xff0c;我是"小恒不会java" 前言 最近发现自己有一些站点图片丢失&#xff0c;原来是用了人家的链接。考虑到使用对象存储容易被刷流量&#xff0c;可以用flask这种轻量级框架快速实现网页登陆操作&#xff0c;行&#xff0c;也就不考虑正式生产环境那些复…

Pytorch的hook函数

hook函数是勾子函数&#xff0c;用于在不改变原始模型结构的情况下&#xff0c;注入一些新的代码用于调试和检验模型&#xff0c;常见的用法有保留非叶子结点的梯度数据&#xff08;Pytorch的非叶子节点的梯度数据在计算完毕之后就会被删除&#xff0c;访问的时候会显示为None&…

人大金仓数据库介绍与使用指南

人大金仓数据库是一款强大的关系型数据库管理系统&#xff0c;具有简单易用、高性能和稳定可靠的特点。本文将介绍人大金仓数据库的安装方法、常用的SQL语法以及相关工具的使用。 一、安装方法&#xff1a; 1、下载人大金仓数据库安装程序&#xff1b; 2、运行安装程序&#…

康耐视visionpro-CogFindCircleTool工具详细说明

CogFindCircleTool功能说明: 通过用多个卡尺找到多个点来拟合所要找的圆 CogFindCircleTool操作说明: ①.打开工具栏,双击或点击鼠标拖拽添加CogFindCircleTool工具 ②.添加输入图像,右键“链接到”或以连线拖拽的方式选择相应输入源 ③.预期的圆弧:设置预期圆弧的中心点…

基于SSM+Jsp+Mysql的医院远程诊断系统

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

软考 系统架构设计师系列知识点之云原生架构设计理论与实践(8)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之云原生架构设计理论与实践&#xff08;7&#xff09; 所属章节&#xff1a; 第14章. 云原生架构设计理论与实践 第2节 云原生架构内涵 14.2 云原生架构内涵 关于云原生的定义有众多版本&#xff0c;对于云原生架构的…