HTML5基本语法

文章目录

    • HTML5基本语法
      • 一、基础标签
        • 1、分级标题
        • 2、段标签
        • 3、换行及水平线标签
        • 4、文本格式标签
      • 二、图片标签
        • 1、格式
        • 2、属性介绍
      • 三、音频标签
        • 1、格式
        • 2、属性介绍
      • 四、视频标签
        • 1、格式
        • 2、属性介绍
      • 五、链接标签
        • 1、格式
        • 2、显示特点
        • 3、属性介绍
        • 4、补充(空链接)
      • 六、列表标签
        • 1、无序列表
          • (1)格式
        • 2、有序列表
          • (1)格式
        • 3、自定义列表
          • (1)格式
      • 七、表格标签
        • 1、基本标签
        • 2、相关属性
        • 3、表格大标题和表头
        • 4、表格结构标签
        • 5、合并单元格
          • (1)合并单元格步骤:
          • (2)语法
      • 八、Input系列标签
        • 1、常用标签type
        • 2、基本语法
        • 3、属性
        • 4、注意
      • 九、button标签
        • 1、type
      • 十、select下拉标签
        • 1、语法结构
        • 2、属性介绍
      • 十一、textarea文本域标签
        • 1、语法结构
        • 2、属性介绍
      • 十二、label标签
        • 1、语法结构
        • 2、常用场景
      • 十三、布局标签
        • 1、无语义的
          • 语法实例
        • 2、有语义的

HTML5基本语法

一、基础标签

1、分级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
2、段标签
<p></p>
3、换行及水平线标签
<br>换行    <hr>水平线
4、文本格式标签
<b>加粗</b>    <u>下划线</u>    <i>倾斜</i>    <s>删除线</s>		   

二、图片标签

1、格式
<img src="" alt="" title="" width="" height="">
2、属性介绍
  • s r c src src中可以填入图片的绝对路径或相对路径或者图片的网址
  • a l t alt alt中填入当图片不能正常显示的文字信息
  • t i t l e title title中填入的是鼠标指针在图片悬停一会儿后出现的文字

三、音频标签

1、格式
<audio src="" controls></audio>
2、属性介绍
  • s r c src src音频路径
  • c o n t r o l s controls controls显示播放的控件
  • a u t o p l a y autoplay autoplay自动播放
  • l o o p loop loop循环播放

四、视频标签

1、格式
<video src="" controls></video>
2、属性介绍
  • s r c src src视频路径
  • c o n t r o l s controls controls显示播放的控件
  • a u t o p l a y autoplay autoplay自动播放
  • l o o p loop loop循环播放

五、链接标签

1、格式
<a href="" target="">超链接</a>
2、显示特点
  • a标签默认文字有下划线
  • a标签从未点击过,默认文字显示蓝色
  • a标签点击过之后,文字显示为紫色(清除浏览器历史记录可恢复蓝色)
3、属性介绍
  • h r e f href href视频路径
  • t a r g e t target target
    { _ s e l f 默认值,覆盖原网页 _ b l a n k 在新窗口中跳转,保留原网页 \begin{cases} \_self\ \ 默认值,覆盖原网页\\ \_blank \ \ 在新窗口中跳转,保留原网页 \end{cases} {_self  默认值,覆盖原网页_blank  在新窗口中跳转,保留原网页
4、补充(空链接)
<a href="#">空链接</a>

功能:

  • 点击之后回到网页顶部
  • 开发中不确定该链接的最终跳转位置,暂时用空链接占位

六、列表标签

1、无序列表
(1)格式
<ul><li>列表内容</li>
</ul>
2、有序列表
(1)格式
<ol><li>列表内容</li>
</ol>
3、自定义列表
(1)格式
<dl><dt>自定义列表主题</dt><dd>每个主题下的内容项</dd>
</dl>

七、表格标签

1、基本标签
<table><tr>//表格每行<td>表格某一行的内容</td></tr>
</table>
2、相关属性
  • b o r d e r border border表格边框宽度
  • w i d t h width width表格宽度
  • h e i g h t height height表格高度
3、表格大标题和表头
<table><caption>表格大标题</caption><tr><th>表头元素</th></tr>
</table>
4、表格结构标签
  • 表头
<thead>表头</thead>
  • 表体
<tbody>表体</tbody>
  • 表脚
<tfoot>表脚</tfoot>
5、合并单元格
(1)合并单元格步骤:
  • 明确合并哪些单元格
  • 保留左上单元格,其余单元格元素清空
  • 合并同行或同列的单元格
  • 注意:只能合并具有相同结构标签的单元格
(2)语法
<td rowspan="2">xxx</td>   //跨行合并
<td colspan="2">xxx</td>   //跨列合并

r o w s p a n = " 2 " rowspan="2" rowspan="2"意思是跨行合并两行

八、Input系列标签

1、常用标签type
  • text 文本框
  • date 年月日
  • time 时分秒
  • password 密码框
  • radio 单选框
  • checkbox 多选框
  • file 文件
  • submit 提交
  • reset 重置
  • button 普通按钮,默认无功能,之后配合js添加功能
2、基本语法
<input type="" 属性="">
3、属性
  • text——文本框
    placeholder 占位符
  • password———密码框
    placeholder 占位符
  • radio——单选框
    name 拥有相同name的两个选项不能被同时选择
    checked 默认选中
  • checkbox ——多选框
    checked 默认选中
  • file——文件选择
    multiple 可选择多个文件
  • button——按钮
    submit 提交
    reset 重置
4、注意

input使用buttton类时,需要使用form标签,将整个代码体包裹起来,这样button类属性才可以发挥相应功能

<form></form>

九、button标签

1、type
  • submit
  • reset
  • 普通button

十、select下拉标签

1、语法结构
<select><option>下拉框内容</option>
</select>
2、属性介绍
  • selected 默认选中

十一、textarea文本域标签

1、语法结构
<textarea cols="" rows""></textarea>
2、属性介绍
  • cols 多少列
  • rows 多少行

十二、label标签

1、语法结构
<label>可包裹任意内容</label>
2、常用场景

可以将表单标签与内容绑定
使用方法:
(1)使用label标签将内容和表单标签一起包裹起来
(2)需要把label标签的for属性删除即可

实例:

<label><input type="radio"></label>

十三、布局标签

1、无语义的
  • div 一行只显示一个
  • pan 一行显示多个
语法实例
<div>xxx</div>
2、有语义的

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

虚设备与Spooling技术

虚设备&#xff08;Virtual Device&#xff09;和Spooling技术是操作系统中用于提高输入/输出&#xff08;I/O&#xff09;效率的两种技术。下面分别对它们进行解释&#xff1a; ### 虚设备&#xff08;Virtual Device&#xff09; 虚设备是一种软件技术&#xff0c;它允许多个…

安装stable-baselines3[extra]

新方法&#xff1a; %pip install AutoROM.accept-rom-license0.4.2 %pip install stable-baselines3[extra]旧方法&#xff1a; https://www.atarimania.com/rom_collection_archive_atari_2600_roms.html https://drive.google.com/file/d/1uuPaYGf2f4DaEUJkS36LvSEWokgC8qj…

拼多多,藏着水果版中国地图

越来越多人开始在拼多多买水果。在发现这个现象后&#xff0c;我询问他们同一个问题&#xff1a;“那你收到过烂掉的吗&#xff1f;” 几乎所有频繁下单的人都告诉我&#xff0c;收到过。他们在拼多多买全国各地的水果&#xff0c;偶尔收到烂掉的&#xff0c;但依然会继续在拼…

OpenCloudOS 8.8 一键安装 Oracle 11GR2 单机

前言 Oracle 一键安装脚本&#xff0c;演示 OpenCloudOS 8.8 一键安装 Oracle 11GR2 单机&#xff08;231017&#xff09;过程&#xff08;全程无需人工干预&#xff09;。 ⭐️ 脚本下载地址&#xff1a;Shell脚本安装Oracle数据库 安装准备 1、安装好操作系统&#xff0c;建…

工业物联网关为智能制造业提供哪些支撑?天拓四方

随着科技的飞速发展&#xff0c;智能制造业已成为工业领域的转型方向。在这一转变中&#xff0c;工业物联网关发挥着至关重要的作用。作为连接物理世界与数字世界的桥梁&#xff0c;工业物联网关不仅实现了设备与设备、设备与云平台之间的互联互通&#xff0c;更通过实时数据采…

设计模式(五)创建者模式之工厂模式

工厂模式 工厂模式上面类图代码实现Coffee 抽象类AmericanCoffeeLatterCoffeeCoffeeStoreUser 简单工厂模式增加工厂方法更改CoffeeStore 类优缺点扩展静态工厂 工厂方法模式概念结构具体类图代码实现Coffee类AmericanCoffeeLatterCoffee抽象工厂CoffeeFactoryAmericanCoffeeFa…

Android studio中如何下载sdk

打开 file -> settings 这个页面, 在要下载的 SDK 前面勾上, 然后点 apply 在 platforms 中就可以看到下载好的 SDK: 如果sdk下载失败是不是硬盘没有权限&#xff0c;管理员权限从启android studio运行下载sdk

MySQL 基本语法讲解及示例(上)

第一节&#xff1a;MySQL的基本操作 1. 创建数据库 在 MySQL 中&#xff0c;创建数据库的步骤如下&#xff1a; 命令行操作 打开 MySQL 命令行客户端或连接到 MySQL 服务器。 输入以下命令创建一个数据库&#xff1a; CREATE DATABASE database_name;例如&#xff0c;创建一…

android 常用工具

adb root adb root adb remountadb logcat # clear adb logcat -c# 记录到文件adb logcat -v time > log.txtadb 查看当前运行包名 adb shell "dumpsys window|grep mCurrentFocus"查案GPU dumpsys gfxinfo dumpsys gfxinfo package# 显卡使用情况 cat /sys/…

明星直播带货 即将走向终结

在用户看来是演员、明星的人。在电商看来只是没有变现的流量而已。 但是明星直播带货即将走向终结&#xff0c;这可能是历史的必然。双十一&#xff0c;贾乃亮直播间宣称 2, 899 的羽绒服只卖449&#xff0c;但是后续被网友发现在其他地方同款居然只要 220 到 270 之间。 贾乃…

ApplicationEventPublisher的使用、Spring事件发布

spring事件的订阅发布&#xff0c;适用业务解耦合 使用场景&#xff1a;新用户注册之后&#xff0c;需要发放优惠券&#xff1b;一个订单服务在接收到新订单时发布一个“订单已创建”事件&#xff0c;库存服务和通知服务分别订阅该事件&#xff1b;日志和监控;实时通知系统;异…

React的form表单自定义校验规则

使用antd开发的过程中&#xff0c;必定会遇到需要对form表单进行必填校验的处理&#xff0c;正常情况下&#xff0c;我们都会一个空的必填校验&#xff0c;如下&#xff1a;一般我们只需要简单配置rules即可 <FormItem label"管理员姓名" {...itemLayout.wholeLi…

银行数仓项目实战(二)--数据采集(Kettle的抽取(E)转换(T)加载(L))

Kettle安装 Kettle又名PDI 要求电脑中有Java环境。 下载Kettle9.0的安装包&#xff0c;如有需要可以联系up私发噢。 注意&#xff01;&#xff01;&#xff01; 解压路径不能有中文&#xff0c;空格 解压后双击spoon.bat即可使用 链接数据库需要相应的驱动&#xff0c;Oracle的…

Python图像处理库之pyvips使用详解

概要 在图像处理领域,高效和快速的图像处理工具对于开发者来说至关重要。pyvips 是一个强大的 Python 库,基于 libvips 图像处理库,提供高效、快速且节省内存的图像处理能力。pyvips 支持多种图像格式,并且能够执行各种复杂的图像处理任务,如裁剪、缩放、旋转、滤波等。本…

采用了宽电压设计的测径仪为什么仍旧需要到现场勘察电力环境

关键字: 测径仪宽电压设计,测径仪电压范围,电压影响测径仪,测径仪车间电压 设备宽电压设计是指该设备能够在一定范围的电压波动内正常工作&#xff0c;而不会因为电压的轻微变化而导致性能下降或损坏。宽电压设计通常涉及到电源电路的优化和设计&#xff0c;以确保设备在电压波…

【C语言习题】31.冒泡排序

文章目录 作业标题作业内容2.解题思路3.具体代码 作业标题 冒泡排序 作业内容 实现一个对整形数组的冒泡排序 2.解题思路 先了解一下冒泡排序&#xff1a; 两两相邻的元素进行比较&#xff0c;如果前面元素大于后面元素就交换两个元素的位置&#xff0c;最终的结果是最大的…

代码随想录刷题经历

最近要着手于准备秋招了&#xff0c;之前都是零零散散的刷题&#xff0c;并且刷过就忘&#xff0c;于是乎准备用这篇博客记录刷题的经历和思想。 1、数组 2、链表 3、哈希表 4、字符串 5、双指针 6、栈与队列 7、二叉树 8、回溯算法 9、贪心算法 10、动态规划 11、单…

在浏览器中,设置小于1px的边框可能会被渲染为1px。这是由于浏览器的渲染引擎对小于1px的值处理不一致

为了实现小于1px的视觉效果&#xff0c;你可以使用一下几种方法 方法一&#xff1a;使用 CSS 的 transform 属性来缩放边框 你可以先设置一个1px的边框&#xff0c;然后使用 transform: scale() 来缩小它。 .element { border: 1px solid black; transform: scale(0.5); tran…

基于格网拓扑关系的边缘点检测

1、背景介绍 前文已介绍对点云进行格网处理,可以计算平面点云面积、格网拓扑关系构建,相关博客如下: (1)点云格网过程可视化(C++ PCL)-CSDN博客 (2)

使用 Web Serial API 在浏览器中实现串口通讯(纯前端)

文章目录 目的相关资料使用说明代码与演示总结 目的 串口是非常常用的一种电脑与设备交互的接口。目前在浏览器上直接使用电脑上的串口设备了&#xff0c;这篇文章将介绍相关内容。 相关资料 Web Serial API 相关内容参考如下&#xff1a; https://developer.mozilla.org/en…