灯塔:HTML笔记

 网页由哪些部分组成?

*文字 图片 音频 视频 超链接

程序员写的代码是通过浏览器转换成网页的

五大浏览器有哪些?

*IE浏览器

*火狐浏览器(Firefox)

*谷歌浏览器(Chrome)

*Safari浏览器

*欧朋浏览器(Opera)

相同的网页在不同的浏览器中的显示效果不会完全一致,因为不同浏览器渲染引擎不同,解析的效果会存在差异

前端工程师日常推荐使用谷歌浏览器

Web标准的构成有哪些?分别通过什么语言表示?

*结构:HTML -> 页面元素

*表现:CSS -> 页面样式

*行为:JavaSccript -> 页面交互的动态效果

HTML骨架结构由哪些标签组成?

*html标签:网页的整体

*head标签:网页的头部

*body标签:网页的身体

*title标签:网页的标题

HTML标签的结构:

标签的结构图:

<strong>文字要变粗</strong>^        ^        ^|        |        |
开始标签  包裹的内容  结束标签

结构说明:

1.标签由< .> ./ .英文单词或字母组成。并把标签中 < > 包括起来的英文单词或字母称为标签名

2.常见的标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容

3.少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容。

HTML标签与标签之间的关系可分为:

*父子关系(嵌套关系),如

<head><title> <title>
<head>

*兄弟关系(并列关系),如

<head> <head>
<body> <body>
标题标签:

h系类标签:

<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>

特点:

*文字都有加粗

*文字都有变大,但是从h1->h6文字逐渐变小

*独占一行

段落标签:
<p>此处为文字</p>

特点:

*段落之间存在间隙

*独占一行

换行标签
<br>

特点:单标签 让文字强制换行

水平线标签:
<hr>

特点: 单标签 在页面中显示一条水平线

文本格式化标签的介绍:

代码:

                        标签                        说明
                        b                        加粗
                        u                        下划线
                        i                                倾斜
                        s                        删除线

为突出重要语境用

                                标签                        说明
                                strong                        加粗
                                ins                        下划线
                                em                        倾斜
                                del                        删除线

图片标签的介绍

场景:在网页中显示图片

代码:

<img src ="" alt="">

特点:

*单标签

*img标签需要展示对应的效果,需要借助标签的属性进行设置

标签的完整结构图:

<img src="" alt="">^      ^|      |属性名 + 属性值 ->标签属性
属性名="属性值"

属性注意点:

1.标签的属性写在开始标签内部

2.标签上可以同时存在多个属性

3.属性之间以空格隔开

4.标签名与属性之间必须以空格隔开

5.属性之间没有顺序之分

图片标签的src属性

属性名:src

属性值:目标图片的路径

注意点:

*当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)

*路径的情况有很多

图片标签的title属性:

属性名:title

属性值:提示文本

*当鼠标悬停时,才显示的文本

注意点:title属性不仅仅可以用于图片标签,还可以用于其他标签

图片标签的alt属性:

属性名:替换文本

*当图片加载失败时,才会显示alt的文本

*当图片加载成功时,不会显示alt的文本

图片标签的width和height属性

属性名:width和height

属性值:宽度和高度(数字)

注意点:

*如果只设置了width或height中的一个,另一个没设置的会自动等比例缩放(图片不会变形)

*如果同时设置了width和height两个,若设置不当此图片可能会变形

绝对路径

指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径

相对路径(常用):

*当前文件:当前的html网页

*目标文件:要找到的图片

相对路径:从当前文件开始出发找目标文件的过程

相对路径的分类:

*同级目录

*下级目录

*上级目录

相对路径-同级目录

同级目录:当前文件和目标文件在同一目录中

代码步骤:直接写目标文件的名字即可

方法一:

<img src="目标图片.jpg" >

方法二:

<img src="./目标图片.jpg" >
相对路径-下级目录

下级目录:目标文件在下级目录中

代码步骤:

1.先知道在哪个 文件夹里面-> 文件夹名字

2.进入这个文件夹-> /

3.此时看到目标文件直接写出目标文件的名字

音频标签:

场景:在页面中插入音频

代码:

<audio src="./music.mp3" controls></audio>

常见属性:

属性名功能
src音频的路径

controls

显示播放的控件
autoplay自动播放(部分浏览器不支持)
loop循环播放

注意点:音频标签目前支持三种格式:MP3 Wav Ogg

视频标签:

场景:在页面中插入视频

代码:

<video src="./video.mp4" controls></video>

常见属性:

属性名功能
src视频的路径

controls

显示播放的控件
autoplay自动播放(谷歌浏览器中需配合muted实现静音播放)
loop循环播放

 注意点:视频标签目前支持三种格式:MP4 WebM Ogg

链接标签的介绍:

场景:点击之后 ,从一个页面跳转到另一个页面

称呼:a标签 超链接 锚链接

代码:

<a href ="./目标网页.html">超链接</a>

特点:

*双标签 内部可以包裹内容

*如果需要a标签点击之后进去指定页面,需要设置a标签的href属性

链接标签的target属性:

属性名:target

属性值:目标网页的打开方式

取值效果
_self默认值,在当前窗口中跳转(覆盖原网页)
_blank在新窗口中跳转(保留原网页)

列表:

无序列表

场景:在网页中表示一组无顺序之分的列表,如:新闻列表

标签组成:

标签名说明
ul表示无序列表的整体,用于包裹li标签
li表示无序列表的每一项,用于包含每一行的内容

显示特点:

列表的每一项前默认显示圆点标识

注意点:

*ul标签中只允许包含li标签

*li标签可以包含任何内容

有序列表

场景:在网页中表示一组有顺序之分的列表,如:排行榜

标签组成:

标签名说明
ol表示有序列表的整体,用于包裹li标签
li表示有序列表的每一项,用于包含每一行的内容

显示特点:列表的每一项前默认显示序号标识

注意点:

*ol标签中只允许包含li标签

*li标签可以包含任意内容

自定义列表

场景:在网页的底部导航中通常会使用自定义列表实现。

标签组成:

标签名说明

dl

表示自定义列表的整体,用于包裹dt/dd标签
dt表示自定义列表的主题
dd表示自定义列表的针对主题的每一项内容

显示特点:dd前会默认缩进效果

注意点:

*dl标签中只允许包含dt/dd标签

*dt/dd标签可以包含任意内容

表格的基本标签

场景:

在网页中以行+列的单元格的方式整齐展示数据,如:学生成绩

基本标签:

标签名说明
table

表格整体,可用于包裹多个tr

tr表格每行,可用于包裹td
td表格单元格,可用于包裹内容

注意点:标签的嵌套关系:table>tr>td

表格相关属性:

场景:设置表格基本展示效果

常见相关属性:

属性名属性值效果
border数字边框宽度
width数字表格宽度
height数字表格高度

注意点:实际开发针对样式效果推荐使用CSS设置

表格标题和表头单元格标签

场景:在表格中表示整体大标题和一列小标题

其他标签:

标签名名称说明
caption表格大标题默认在表格整体位置顶部剧中位置显示
th表格单元格表示一列小标题,通常用于表格第一行,默认内部文字加粗并居中显示

注意点:

*caption标签书写在table标签内部

*th标签书写在tr标签内部(用于替换td标签)

表格的结构标签

场景:让表格的内容结构分组,突出表格的不同部分(头部 主体 底部),使语义更加清晰

结构标签:

标签名名称
thead表格头部
tbody表格主体
tfoot表格底部

注意点:

*表格结构标签内部用于包裹tr标签

*表格的结构标签可以省略

合并单元格

步骤:

1.明确合并哪几个单元格

2.通过左上原则,确定保留谁删除谁

*上下合并 -> 只保留最上的,删除其他

*左右合并 -> 只保留最左的,删除其他

3.给保留的单元格设置:跨行合并(rowspan)或者跨列合并(colspan)

属性名属性值说明
rowspan合并单元格的个数跨行合并,将多行的单元格垂直合并
colspan合并单元格的个数跨列合并,将多列的单元格水平合并

注意点:只有同一个结构标签中的单元格才能合并,不能跨结构标签合并

(不能跨:thead tbody tfoot)

表单标签:

目标:能够使用表单相关标签和属性,实现网页中表单类网页结构搭建

input系列标签的基本介绍

场景:在网页中显示收集用户信息的表单效果,如:登录页,注册页

标签名:input

*input标签可以通过type属性值的不同,展示不同效果

type属性值:

标签名type属性值说明
inputtext文本框,用于输入单行文本
inputpassword密码框,用于输入密码
inputradio单选框,用于多选一
inputcheckbox多选框,用于多选多
inputfile

文件选择,用于之后上传文件

inputsubmit提交按钮,用于提交
inputreset重置按钮,用于重置
inputbutton普通按钮,默认无功能,之后配合js添加功能
input系列标签 — 文本框

场景:在网页中显示输入单行文本的表单控件

type属性值:text

常用属性:

属性名说明
placeholder占位符,提示用户输入内容的文本
input系列标签 — 单选框

场景:在网页中显示多选一的单选表单控件

type属性值:radio

常用属性:

属性名说明
name分组,有相同name属性值的单选框为一组,一组中同时只能有一个被选中
checked默认选中

注意点:

*name属性对于单选框有分组功能

*有相同name属性值的单选框为一组,一组中只能同时有一个被选中

input系列标签 — 按钮

场景:在网页中显示不同功能的按钮表单控件

type属性值:

标签名type属性值说明
inputsubmit提交按钮,点击之后提交数据给后端服务器
inputreset重置按钮,点击之后恢复表单默认值
inputbutton普通按钮,默认无功能,之后配合js添加功能

注意点:

*如果需要实现以上按钮功能,需要配合form标签使用

*form使用方法:用form标签把表单标签一起包裹起来即可

button按钮标签

场景:在网页中显示用户点击的按钮

标签名:button

type属性值(同input的按钮系列):

标签名type属性值说明
buttonsubmit提交按钮,点击之后提交数据给后端服务器
buttonreset重置按钮,点击之后恢复表单默认值
buttonbutton普通按钮,默认无功能,之后配合js添加功能

注意点:

*谷歌浏览器中button默认是提交按钮

*button标签是双标签,更便于包裹其他内容:文字,图片等

表单标签

1. select下拉菜单标签

场景:在网页中提供多个选项的下拉菜单表单控件

标签组成:

*select标签:下拉菜单的整体

*option标签:下拉菜单的每一项

常见属性:selected:下拉菜单的默认选中

textarea文本域标签

场景:在网页中提供可输入多行文本的表单控件

标签名:textarea

常见属性:

*cols:规定了文本域内可见宽度

*rows:规定了文本域内可见行数

注意点:*右下角可以拖拽改变大小

*实际开发时针对样式效果推荐使用CSS设置

label标签

场景:常用于绑定内容与表单标签的关系

标签名:label

使用方法①:

1.使用label标签把内容(如:文本)包裹起来

2.在表单标签上添加id属性

3.在label标签的for属性中设置对应的id属性值

使用方法②:

1.直接使用label标签把内容(如:文本)和表单标签一起包裹起来

2.需要直接把label标签的for属性删除即可

没有语义的布局标签 - div和span

场景:实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签

div标签:一行只显示一个(独占一行)

span标签:一行可以显示多个

有语义的布局标签(了解)

场景:在HTML5新版本中,推出了一些有语义的布局标签供开发者使用

注意点:以上标签显示特点和div一致,但是比div多了不同的语义

字符实体:

在网页中显示特殊符号

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

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

相关文章

【机器学习】生成对抗网络GAN

概述 生成对抗网络&#xff08;Generative Adversarial Network&#xff0c;GAN&#xff09;是一种深度学习模型架构&#xff0c;由生成器&#xff08;Generator&#xff09;和判别器&#xff08;Discriminator&#xff09;两部分组成&#xff0c;旨在通过对抗训练的方式生成逼…

【Linux】Shell命令运行原理和权限详解

【Linux】Shell命令运行原理和权限详解 一、剩余指令的补充1.tar指令2.bc指令3.uname4.热键 二、Shell命令运行原理1.Shell2.为什么Linux不让用户直接使用kernel 三、Linux权限概念四、Linux权限管理1.文件访问的用户分类2.文件类型和访问权限&#xff08;1&#xff09;文件类型…

GitHub登不上:修改hosts文件来解决(GitHub520,window)

参考链接&#xff1a;GitHub520: 本项目无需安装任何程序&#xff0c;通过修改本地 hosts 文件&#xff0c;试图解决&#xff1a; GitHub 访问速度慢的问题 GitHub 项目中的图片显示不出的问题 花 5 分钟时间&#xff0c;让你"爱"上 GitHub。 (gitee.com) GitHub网站…

Prometheus结合Grafana监控MySQL,这篇不可不读!

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是【IT邦德】&#xff0c;江湖人称jeames007&#xff0c;10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】&#xff01;&#x1f61c;&am…

IOS 发布遇到“Unable to authenticate with App Store Connect”错误咋解决?

问题&#xff1a; 在开发ios app后&#xff0c;先发布adhoc版本&#xff0c;测试通过后&#xff0c;再发布testflight版本测试&#xff0c;但是可能会遇到一下问题。 解决办法&#xff1a; 在Signing &Capabilities中&#xff0c;在ios下边要指定有发布权限的Team账号&a…

数据库之间数据迁移工具datax

简介 DataX 是阿里云 DataWorks数据集成 的开源版本&#xff0c;在阿里巴巴集团内被广泛使用的离线数据同步工具/平台。DataX 实现了包括 MySQL、Oracle、OceanBase、SqlServer、Postgre、HDFS、Hive、ADS、HBase、TableStore(OTS)、MaxCompute(ODPS)、Hologres、DRDS, databe…

链路负载均衡之DNS透明代理

一、DNS透明代理 一般来说&#xff0c;企业的客户端上都只能配置一个运营商的DNS服务器地址&#xff0c;DNS服务器通常会将域名解析成自己所在ISP内的Web服务器地址&#xff0c;这将导致内网用户的上网流量都集中在一个ISP的链路上转发&#xff0c;最终可能会造成链路拥塞&…

常用的Linux命令;Linux常用命令用法及实现方式

1.系统工作命令 (1)echo命令&#xff1a;echo命令用于在终端设备上输出字符串或变量提取后的值&#xff0c;语法格式为“echo [字符串] [$变量]”。 (2)date命令&#xff1a;date命令用于显示或设置系统的时间与日期&#xff0c;语法格式为“date [指定的格式]”。 (3)timedate…

VS2019 - error C2653: 不是类或命名空间名称

文章目录 VS2019 - error C2653: 不是类或命名空间名称概述笔记类的头文件类的实现文件备注END VS2019 - error C2653: 不是类或命名空间名称 概述 工程开了预编译头包含. 编码中, 随手写一个类, 将功能函数加入, 还没开始用这个类, 先习惯性的编译一下. 编译报错如下: St…

常用的17个运维监控系统(必备知识)

1. Zabbix Zabbix 作为企业级的网络监控工具&#xff0c;通过从服务器&#xff0c;虚拟机和网络设备收集的数据提供实时监控&#xff0c;自动发现&#xff0c;映射和可扩展等功能。 Zabbix的企业级监控软件为用户提供内置的Java应用服务器监控&#xff0c;硬件监控&#xff0c…

QT----写完的程序打包为APK在自己的手机上运行

目录 1、qt安装android组件2、打开qt配置Android 环境3、手机打开开发者模式&#xff0c;打开usb调试&#xff0c;连接电脑4、运行代码 1、qt安装android组件 qtcreater–工具-QTMaintenaceTool-startMaintenaceTool—登陆—添加或修改组件—找到android&#xff0c;安装 若是…

【脑切片图像分割】MATLAB 图像处理 源码

1. 简单图像处理 加载图像 Brain.jpg&#xff0c;使用直方图和颜色分割成区域这些区域有不同的颜色。 这是一个更高级的问题&#xff0c;有多个解决它的方法。 例如&#xff0c;您可以计算具有特定数字的图像的直方图&#xff08;例如 16 - 32&#xff09;&#xff0c;找到直方…

回归预测 | Matlab实现BiTCN基于双向时间卷积网络的数据回归预测

回归预测 | Matlab实现BiTCN基于双向时间卷积网络的数据回归预测 目录 回归预测 | Matlab实现BiTCN基于双向时间卷积网络的数据回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现BiTCN基于双向时间卷积网络的数据回归预测&#xff08;完整源码和数据&a…

Vue 3的Composition API和vue2的不同之处

Vue 3的Composition API是Vue.js框架的一个重要更新&#xff0c;它提供了一种新的组件逻辑组织和复用方式。在Vue 2中&#xff0c;我们通常使用Options API&#xff08;data、methods、computed等&#xff09;来组织组件的逻辑&#xff0c;但这种组织方式在处理复杂组件时可能会…

Czkawka 一款开源、免费的多功能重复文件清理工具,支持多平台

Czkawka (波兰语为 "打嗝"&#xff09;是一款简单、快速、免费的多功能重复文件清理工具&#xff0c;支持空文件、相似图像/视频/音频、损坏/无效文件的查找。 它扫描速度极快&#xff0c;并且适配 Linux、Windows、macOS、FreeBSD 等多个平台、支持中文。 &#x1…

bert 相似度任务训练简单版本,faiss 寻找相似 topk

目录 任务 代码 train.py predit.py faiss 最相似的 topk 数 任务 使用 bert-base-chinese 训练相似度任务&#xff0c;参考&#xff1a;微调BERT模型实现相似性判断 - 知乎 参考他上面代码&#xff0c;他使用的是 BertForNextSentencePrediction 模型&#xff0c;Bert…

紫光展锐T618_4G安卓核心板方案定制

紫光展锐T618核心板是一款采用纯国产化方案的高性能产品&#xff0c;搭载了开放的智能Android操作系统&#xff0c;并集成了4G网络&#xff0c;支持2.5G5G双频WIFI、蓝牙近距离无线传输技术以及GNSS无线定位技术。 展锐T618核心板应用旗舰级 DynamlQ架构 12nm 制程工艺&#x…

掌握PDF全面指南:Python开发者的高效编程技巧

掌握PDF全面指南&#xff1a;Python开发者的高效编程技巧 简介PDF基础知识PDF的结构常见用途PDF在开发中的挑战 PDF处理库介绍PyPDF2ReportLabPDFMiner辅助库 读取和分析PDF文件使用PyPDF2读取PDF文件提取PDF中的文本和元数据分析PDF结构和内容 编辑和修改PDF文件合并多个PDF文…

OSPF故障排查,这10大技巧是个网工都在用!

中午好&#xff0c;我的网工朋友。 OSPF这个名词网工们都不陌生吧。 OSPF&#xff0c;即开放式最短路径优先&#xff08;Open Shortest Path First&#xff0c;OSPF&#xff09;是广泛使用的一种动态路由协议。 它属于链路状态路由协议&#xff0c;具有路由变化收敛速度快、…

【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(二)-向量元素到向量寄存器状态的映射

1. 引言 以下是《riscv-v-spec-1.0.pdf》文档的关键内容&#xff1a; 这是一份关于向量扩展的详细技术文档&#xff0c;内容覆盖了向量指令集的多个关键方面&#xff0c;如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…