HTML复习笔记

HTML(超文本标记语言)

文章目录

  • HTML(超文本标记语言)
    • 1.HTML
      • 1.概念
      • 2.标签
        • 2.1双标签
          • 超链接
          • 音频标签
          • 视频标签
          • 无序列表
          • 有序列表
          • 定义列表
          • 表格
            • 合并单元格
          • 表单
          • 表单项
            • 单选框-**radio**
            • 文件上传-file
            • 多选框-checkbox
          • 下拉菜单
          • 文本域-textarea
          • label标签
          • 按钮-button
          • div
          • span
        • 2.2单标签
          • 图像标签
        • 2.3路径
          • 绝对路径
          • 相对路径
        • 2.4文本格式化标签
        • 2.5字符实体
      • 3.HTML 基本骨架
      • 4.注释

1.HTML

1.概念

Hyper Text Markup Language 超文本标记语言

2.标签

2.1双标签
标签解释注意
h1~h6标题标签字号依次减小,字体加粗,独占一行
p段落标签独占一行,段落之间存在间隙
a超链接点击跳转到其他页面
audio音频标签播放音频
video视频标签播放视频
ul、li无序列表ul 标签里面只能包裹 li 标签,li标签里面可以包裹任何内容
ol、li有序列表ol 标签里面只能包裹 li 标签,li标签里面可以包裹任何内容
dl、dt、dd定义列表dl 里面只能包含dt 和 dd,dt 和 dd 里面可以包含任何内容
table、tr、th、td表格table 嵌套 tr,tr 嵌套 td/th。
form表单包裹表单项,method,action
input表单项type 属性值不同,则功能不同。不换行
select、option下拉菜单默认显示第一个option
textarea文本域多行输入文本的表单控件.双标签
labellabel标签作用:网页中,某个标签的说明文本。经验:用label标签绑定文字和表单控件的关系,增大表单控件的点击范围。
button按钮默认为type=“submit”
divdiv布局标签,独占一行
spanspan布局标签,不换行
超链接
<a href="https://www.baidu.com" target="_blank">跳转到百度</a>

href属性值是跳转地址,是超链接的必须属性。

target=“_blank” 新窗口跳转

target=“_self” 当前窗口跳转

herf=“#” 为空链接

音频标签
<audio src="音频的 URL"></audio>
属性作用特殊说明
src(必须属性)音频URL支持格式:MP3、Ogg、Wav
controls显示音频控制面板
loop循环播放
autoplay自动播放为了提升用户体验,浏览器一般会禁用自动播放功能

HTML5 里面,如果属性名和属性值完全一样,可以简写为一个单词

视频标签
<video src="视频的 URL"></video>
<!- 视频播放错误时,执行回调myFunction -->
<video controls onerror="myFunction()"></video>
属性作用特殊说明
src(必须属性)视频URL支持格式:MP4、WebM、Ogg
controls显示视频控制面板
loop循环播放
muted静音播放
autoplay自动播放为了提升用户体验,浏览器支持在静音状态自动播放

在浏览器中,想要自动播放,必须有 muted 属性

无序列表

ul 嵌套 li,ul 是无序列表,li 是列表条目。默认为小圆点

<ul><li>第一项</li><li>第二项</li><li>第三项</li>
</ul>
有序列表

ol 嵌套 li,ol 是有序列表,li 是列表条目。默认为1、2、3、…

<ol><li>第一项</li><li>第二项</li><li>第三项</li>
</ol>
定义列表

dl 嵌套 dt 和 dd,dl 是定义列表,dt 是定义列表的标题,dd 是定义列表的描述/详情。

<dl><dt>列表标题</dt><dd>列表描述/详情</dd>
</dl> 
表格
标签名说明
table表格
tr
th表头单元格
td内容单元格
thead表格头部
tbody表格主体
tfoot表格底部

表格属性:border width cellspacing(/合并相邻边框/)

在网页中,表格默认没有边框线,使用border属性可以为表格添加边框线。例如:

 <table border="1">
<table><!-- 标题 --><caption>nowcoder</caption><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr>
</table>

注意:

在css中书写

/合并相邻边框/
border-collapse:collapse;

合并单元格

1.明确合并的目标

2.保留最左最上的单元格,添加属性(取值是数字,表示需要合并的单元格数量)

跨行合并,保留最上单元格,添加属性 rowspan

跨列合并,保留最左单元格,添加属性 colspan

3.删除其他单元格

注意:若使用了thead tbody tfoot ,合并单元格时,不能跨结构合并。

表单
<form action="" method="get">1.action为书写,默认提交置当前页面2.method="get",表单内所有表单项的值都拼接在url中,注意:url长度有限制3.method="post",表单内所有表单项的值通过请求体携带,对大小无要求。
</form>
表单项

input 标签 type 属性值不同,则功能不同。

type属性值说明
text文本框,用于输入单行文本。不换行
password密码框,以点的形式显示
radio单选框,小圆圈。注意:name应该相同
checkbox多选框,小方块
file上传文件
date/time/datetime-local时间选择器
number数字
hidden隐藏域
button普通按钮
submit提交form
reset重置表单
email邮箱,会进行邮箱格式的校验

input 标签占位文本:提示信息。文本框和密码框都可以使用。

<input type="..." placeholder="提示信息">
单选框-radio
属性名作用特殊说明
name控件名称控件分组,同组只能选中一个(单选功能)
checked默认选中属性名和属性值相同,简写为一个单词
性别:
<input type="radio" name="gender"><input type="radio" name="gender" checked>
文件上传-file

默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件多选功能。

<input type="file" multiple>
多选框-checkbox

多选框也叫复选框。
默认选中:checked

<input type="checkbox" checked> 敲前端代码1
<input type="checkbox"> 敲前端代码2
<input type="checkbox" checked> 敲前端代码3
下拉菜单

下拉菜单
标签:select 嵌套 option,select 是下拉菜单整体,option是下拉菜单的每一项。

北京 上海 广州 深圳 武汉
文本域-textarea

属性:cols 列 宽 rows 行 高

默认提示文字
label标签

label 标签-增大点击范围
写法一
label标签只包裹内容,不包裹表单控件设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

<input type="radio" id="man">
<label for="man" ></label>

写法二

使用label标签包裹文字和表单控件,不需要属性

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

提示:支持label标签增大点击范围的表单控件:文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

按钮-button

按钮

type属性值:

type属性值说明
submit提交按钮,点击后可以提交数据到后台(默认
reset重置按钮,点击后将表单控件恢复默认值。注意:需要重置的元素需被form表单包裹
button普通按钮,默认没有功能,一般配合 JavaScript 使用
div

width:父元素宽度 height:内容撑开 可设置

这是 div 标答
这是 div 标签
span

width:内容撑开 height:内容撑开 不可设置

<span>这是 span 标签</span>
<span>这是 span 标签</span>
2.2单标签
标签解释注意
br换行
hr水平线
img图像标签多个img不换行
图像标签
<img src="图片的 URL" alt="替换文本" title="提示文本">
属性作用说明
alt替换文本图片无法显示的时候显示的文字
title提示文本鼠标悬停在图片上面的时候显示的文字
width图片的宽度值为数字,没有单位,宽高只写一个等比例缩放
height图片的高度值为数字,没有单位

src:图片的来源,例如:绝对路径、相对路径、网络路径

2.3路径
绝对路径

1.本地

Windows 电脑从盘符出发
Mac 电脑从根目录(/)出发

C:/images/mao.jpg

2.网络

https://i0.hdslb.com/bfs/archive/771bd6d35c782a31565675f6d04f00fa1c48d0b9.png

相对路径
./同级
…/上一级
…/…/上一级的上一级
2.4文本格式化标签
标签(双)解释效果
strong加粗加粗
b加粗加粗
em倾斜倾斜
i倾斜倾斜
ins下划线下划线
u下划线下划线
del删除线删除线
s删除线删除线
2.5字符实体

作用:在网页中显示预留字符。

显示结果描述实体名称
空格&nbsp;
<小于号&lt;
>大于号&gt;

3.HTML 基本骨架

<html><head><title>网页标题</title></head><body>网页主体内容</body>
</html>
  • html:整个网页
  • head:网页头部,用来存放给浏览器看的信息,例如CSS
    • title:网页标题
  • body:网页主体,用来存放给用户看的信息,例如图片、文字

VS Code 快速生成骨架:
在 HTML 文件(.html)中,!(英文)配合 Enter/Tab 键

4.注释

<!-- 在html中的注释 ctrl+/ -->

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

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

相关文章

Unity 3D视频教程

上一篇&#xff1a;各种品牌汽车车标 记录了一些车标。 在懂车帝App上&#xff0c;会有3D看车功能。最近发现一个Unity 3D的视频教程&#xff0c;分享下&#xff01; https://www.bilibili.com/video/BV1TZ4y1o76s/

JavaSE学习值之--认识异常

&#x1f495;"有效知识的前提是承认知识边界&#xff0c;承认我们对边界那边的一切无可奉告。"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;JavaSE学习值之--认识异常 一.什么是异常&#xff1f; 异常就是程序在运行的时候产生的不正常的行为 …

linux上构建任意版本的rocketmq多架构x86 arm镜像——筑梦之路

现状 目前市面上和官方均只有rocketmq x86架构下的docker镜像&#xff0c;而随着国产化和信创适配的需求越来越多&#xff0c;显然现有的x86架构下的docker镜像不能满足多样化的需求&#xff0c;因此我们需要根据官方发布的版本制作满足需求的多架构镜像&#xff0c;以在不同cp…

Ubuntu的Python从2.x升级到3.x

我的Ubuntu系统默认是2.7,我想升级为3.5 升级python3.5 下载python sudo apt-get install python3查看 刚才下载的Python程序被安装在usr/local/lib/python3.5 中 cd usr/local/lib备份一下 sudo cp /usr/bin/python /usr/bin/python_bak删除python的旧关联 sudo rm -rf py…

Linux网络编程系列之网络编程基础

Linux网络编程系列 &#xff08;够吃&#xff0c;管饱&#xff09; 1、Linux网络编程系列之网络编程基础 2、Linux网络编程系列之TCP协议编程 3、Linux网络编程系列之UDP协议编程 4、Linux网络编程系列之UDP广播 5、Linux网络编程系列之UDP组播 6、Linux网络编程系列之服务器编…

如何降低海康、大华等网络摄像头调用的高延迟问题(二)

目录 1.RTSP介绍 2.解决办法1 3.解决办法2 1.RTSP介绍 RTSP&#xff08;Real-time Streaming Protocol&#xff09;是一种用于实时流媒体传输的网络协议。它被设计用于在服务器和客户端之间传输音频、视频以及其他流媒体数据。 RTSP协议允许客户端通过与服务器建立RTSP会话…

Easysearch压缩模式深度比较:ZSTD+source_reuse的优势分析

引言 在使用 Easysearch 时&#xff0c;如何在存储和查询性能之间找到平衡是一个常见的挑战。Easysearch 具备多种压缩模式&#xff0c;各有千秋。本文将重点探讨一种特别的压缩模式&#xff1a;zstd source_reuse&#xff0c;我们最近重新优化了 source_reuse,使得它在吞吐量…

【linux】日志和journalctl 管理查看日志

目录 既看即用 简略介绍 linux的日志类型 系统日志 介绍 区别的简单说明 区别的详细说明 journalctl是什么&#xff1f;&#xff08;查看系统日志的工具&#xff09; 详细内容 linux的日志类型 systemd日志&#xff08;systemd-journald&#xff09; 放在哪个目录 …

Linux系统编程详解

Linux 多线程编程 什么是线程&#xff1f; 与线程类似&#xff0c;线程是允许应用程序并发执行多个任务的一种机制 线程是轻量级的进程&#xff08;LWP&#xff1a;Light Weight Process&#xff09;&#xff0c;在 Linux 环境下线程的本 质仍是进程。 一个进程可以包含多个线…

D. Divide and Equalize--Codeforces Round 903 (Div. 3)

D. Divide and Equalize 题意&#xff1a;让一组数中的一个数除以一个因子&#xff0c;一个数除以一个因子&#xff0c;假如经过若干次操作后能够使数组所有数相等&#xff0c;那么输出YES&#xff0c;否则输出NO。 分析&#xff1a;乘除因子&#xff0c;那么实际上就是因子的…

[ROS2系列] ubuntu 20.04测试rtabmap 3D建图(二)

接上文我们继续 如果我们要在仿真环境中进行测试&#xff0c;需要将摄像头配置成功。 一、配置位置 sudo vim /opt/ros/foxy/share/turtlebot3_gazebo/models/turtlebot3_waffle/model.sdf 二、修改 <joint name"camera_rgb_optical_joint" type"fixed&…

【Rust笔记】Rust与Java交互-JNI模块编写-实践总结

近期工作中有Rust和Java互相调用需求&#xff0c;这篇文章主要介绍如何用Rust通过JNI和Java进行交互&#xff0c;还有记录一下开发过程中遇到的一些坑。 JNI简单来说是一套Java与其他语言互相调用的标准&#xff0c;主要是C语言&#xff0c;官方也提供了基于C的C接口。 既然是C…

介绍6种解决电脑找不到vcomp140.dll,无法继续执行代码的方法。

在编程和软件开发领域&#xff0c;我们经常会遇到各种错误和问题。其中&#xff0c;找不到vcomp140.dll文件导致无法继续执行代码是一个非常常见的问题。这个问题可能会影响到软件的正常运行&#xff0c;甚至导致整个项目延期。因此&#xff0c;我们需要找到解决方案来解决这个…

【07】基础知识:React中的事件处理

React 中 通过 onXxx 属性指定事件处理函数&#xff08;注意大小写&#xff09;&#xff0c;通过 event.target 得到发生事件的 DOM 元素对象 不要过度使用 ref &#xff08;比如&#xff0c;元素获取自身属性时&#xff0c;通过 event 对象&#xff0c;而不是 ref&#xff09…

如何导出带有材质的GLB模型?

1、为什么要使用 GLB 模型? GLB格式&#xff08;GLTF Binary&#xff09;是一种用于存储和传输3D模型及相关数据的文件格式&#xff0c;具有以下优点和作用&#xff1a; 统一性&#xff1a;GLB是一种开放标准的3D文件格式&#xff0c;由Khronos Group制定和维护。它融合了GL…

C# 图解教程 第5版 —— 第6章 方法

文章目录 6.1 方法的结构6.2 方法体内部的代码执行6.3 局部变量6.3.1 类型推断和 var 关键字6.3.2 嵌套块中的局部变量 6.4 局部常量6.5 控制流6.6 方法调用&#xff08;*&#xff09;6.7 返回值&#xff08;*&#xff09;6.8 返回语句和 void 方法6.9 局部函数6.10 参数&#…

Vue3 条件语句

条件判断 v-if 条件判断使用 v-if 指令&#xff0c;指令的表达式返回 true 时才会显示&#xff1a; <div id"app"><p v-if"seen">现在你看到我了</p> </div><script> const app {data() {return {seen: true /* 改为fal…

mysql面试题50:500台数据库,如何在最快时间之内重启

该文章专注于面试,面试只要回答关键点即可,不需要对框架有非常深入的回答,如果你想应付面试,是足够了,抓住关键点 面试官:500台db,如何在最快时间之内重启呢? 如果需要在最快时间内重启500台数据库,可以考虑采用并行化和自动化的方法来提高效率。比如: 编写自动化脚…

vh、vw、vmin、vmax

1、分别是什么&#xff1f; vh:指屏幕可见视窗的高&#xff0c; vw:指屏幕可见视窗的宽&#xff0c; vmin:vh和vw之间选较小的值&#xff0c; vmax:vh和vw之间选较大的值。 2、和百分比的区别 百分比时基于父元素的宽高&#xff0c;而vh\vw\vmin\vmax基于屏幕可见视图的宽…

protobuf 插件(option)使用

protobuf的option使用 一、需求 来源于工作中的一个需求&#xff1a;在传递message时需要对message中不同的字段进行不同的处理&#xff0c;而处理方式通过注释标注在了每个字段的定义后。 类似于有下面这样一个消息&#xff1a; 其中字段1是始终需要的&#xff0c;字段2和3…