【HTML5学习笔记1】html标签(上)

news2025/7/13 1:16:12

web标准(重点)

w3c

构成:结构、表现、行为,结构样式行为相分离

结构:网页元素整理分类 html

表现:外观css

行为:交互 javascript

html标签

1.html语法规范

1)

所有标签都在<>内

且一般成对出现(双标签) <html></html>(开始结束

单标签<br />很少

2)标签关系

包含 (嵌套

<head>

<title> </title>

</head>

并列

<head> </head>

<body> </body>


<html>
<head> </head>

<body> </body>

</html>
2.html基本结构标签

1)第一个html网页

骨架标签

<html>
  <head>
    <title>我的第一个页面</title>    
  </head>
  <body>
    月薪过万
  </body>
</html>

3.开发工具

vscode

输入感叹号 !

1)插件

auto rename tag 自动同步修改标签

one dark pro 主题颜色

格式化代码

设置-正在格式化 打开

open inbrowser 预览页面

live server 实时预览

vscodeicons 文件图标主题

easyless

会了吧 陌生单词

2)快捷键

shift alt 下箭头 直接复制整行

ctrl d 修改同样的部分

ctrl alt 上下箭头 添加多个光标

ctrl g 跳转行数

3)vscode骨架标签代码解释

<!DOCTYPE>文档类型声明标签,用的是什么版本的html

lang=“en"定义当前文档显示的、”zh-cn“ 中文网站

<meta charset = "utf-8">字符集

4.html常用标签

1)标签语义

标题标签:6个网页标题h1-h6

<h1>一级标题</h1>	

段落标签:<p>

<p>段落</p>

换行标签:<br />

2)案例 :新闻

3)文本格式化标签

加粗、斜体等

4)<div>、<span>没有语义

就是一个盒子,用来方东西的

div divsion表示分割分区。单独占一行 ,大盒子

span表示跨度、跨距离。一行可以放很多个。小盒子

5)图片标签

<img src=""/>

src是img标签的必须属性,用于指定图像文件的路径和文件名

alt 图片无法显示的时候用文本替换

title 提示文字 鼠标经过图片时显示的文字

height

width 一般只修改高或者宽的一个

broder 边框

标签除了src要在最前面之外其他没有要求

6)图像标签和路径

文件夹 img

相对路径、

绝对路径

7)超链接标签(重点

1链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

属性:

href-指定连接目标的url地址

target-指定连接页面的打开方式,_self默认,__blank新窗口打开

2链接分类

外部链接:百度等

内部链接:自己写的网页

空连接:没有确定链接目标时,<a href="#">首页</a> (占位置)

下载链接:如果href里面地址是一个文件或者压缩包,会下载这个文件

网页元素链接:图片 文字 表格 音频都可以

锚点链接:快速定位跳转页面某个位置

<a herf="#名字"> 名字</a>要进行链接的位置
<h3 id="名字"> 它的名字</h3>目标标签位置

5.html中的注释和特殊字符

1)注释

<!-- 注释 -->

2)特殊字符

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

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

相关文章

计算机视觉---目标检测(Object Detecting)概览

一、目标检测定义与核心任务 1. 定义 任务&#xff1a;在图像/视频中定位并分类所有感兴趣目标&#xff0c;输出边界框&#xff08;Bounding Box&#xff09;和类别标签。核心输出&#xff1a; 坐标&#xff1a;((x_1, y_1, x_2, y_2))&#xff08;左上角右下角&#xff09;或…

在vue3中使用Cesium的保姆教程

1. 软件下载与安装 1. node安装 Vue.js 的开发依赖于 Node.js 环境&#xff0c;因此我们首先需要安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;它允许你在服务器端运行 JavaScript 代码&#xff0c;同时也为前端开发提供了强大的工具支…

IP地址、端口、TCP介绍、socket介绍、程序中socket管理

1、IP地址&#xff1a;IP 地址就是 标识网络中设备的一个地址&#xff0c;好比现实生活中的家庭地址。IP 地址的作用是 标识网络中唯一的一台设备的&#xff0c;也就是说通过IP地址能够找到网络中某台设备。 2、端口&#xff1a;代表不同的进程,如下图&#xff1a; 3、socket:…

搭建运行若依微服务版本ruoyi-cloud最新教程

搭建运行若依微服务版本ruoyi-cloud 一、环境准备 JDK > 1.8MySQL > 5.7Maven > 3.0Node > 12Redis > 3 二、后端 2.1数据库准备 在navicat上创建数据库ry-seata、ry-config、ry-cloud运行SQL文件ry_20250425.sql、ry_config_20250224.sql、ry_seata_2021012…

RK3568-鸿蒙5.1与原生固件-扇区对比分析

编译生成的固件目录地址 ../openharmony/out/rk3568/packages/phone/images鸿蒙OS RK3568固件分析 通过查看提供的信息&#xff0c;分析RK3568开发板固件的各个组件及其用途&#xff1a; 主要固件组件 根据终端输出的文件列表&#xff0c;RK3568固件包含以下关键组件&#x…

常见激活函数——作用、意义、特点及实现

文章目录 激活函数的意义常见激活函数及其特点1. Sigmoid&#xff08;Logistic 函数、S型函数&#xff09;2. Tanh&#xff08;双曲正切函数&#xff09;3. ReLU&#xff08;Rectified Linear Unit修正线性单元&#xff09;4. Softmax5. Swish&#xff08;Google 提出&#xff…

基于微信小程序的在线聊天功能实现:WebSocket通信实战

基于微信小程序的在线聊天功能实现&#xff1a;WebSocket通信实战 摘要 本文将详细介绍如何使用微信小程序结合WebSocket协议开发一个实时在线聊天功能。通过完整的代码示例和分步解析&#xff0c;涵盖界面布局、WebSocket连接管理、消息交互逻辑及服务端实现&#xff0c;适合…

小波变换+注意力机制成为nature收割机

小波变换作为一种新兴的信号分析工具&#xff0c;能够高效地提取信号的局部特征&#xff0c;为复杂数据的处理提供了有力支持。然而&#xff0c;它在捕捉数据中最为关键的部分时仍存在局限性。为了弥补这一不足&#xff0c;我们引入了注意力机制&#xff0c;借助其能够强化关注…

【无标题】威灏光电哲讯科技MES项目启动会圆满举行

5月14日&#xff0c;威灏光电与哲讯科技MES项目启动会在威灏光电总部隆重举行。威灏光电董事长江轮、总经理刘明星、哲讯科技总经理崔新华、副总王子文及双方项目组成员共同出席&#xff0c;标志着两家企业在数字化领域的第二次深度合作正式启航。 强强联手&#xff0c;二度合作…

display:grid网格布局属性说明

网格父级 &#xff1a;display:grid&#xff08;块级网格&#xff09;/ inline-grid&#xff08;行内网格&#xff09; 注意&#xff1a;当设置网格布局&#xff0c;column、float、clear、vertical-align的属性是无效的。 HTML: <ul class"ls02 f18 mt50 sysmt30&…

排序算法之高效排序:快速排序,归并排序,堆排序详解

排序算法之高效排序&#xff1a;快速排序、归并排序、堆排序详解 前言一、快速排序&#xff08;Quick Sort&#xff09;1.1 算法原理1.2 代码实现&#xff08;Python&#xff09;1.3 性能分析 二、归并排序&#xff08;Merge Sort&#xff09;2.1 算法原理2.2 代码实现&#xf…

Java 并发编程归纳总结(可重入锁 | JMM | synchronized 实现原理)

1、锁的可重入 一个不可重入的锁&#xff0c;抢占该锁的方法递归调用自己&#xff0c;或者两个持有该锁的方法之间发生调用&#xff0c;都会发生死锁。以之前实现的显式独占锁为例&#xff0c;在递归调用时会发生死锁&#xff1a; public class MyLock implements Lock {/* 仅…

基于对抗性后训练的快速文本到音频生成:stable-audio-open-small 模型论文速读

Fast Text-to-Audio Generation with Adversarial Post-Training 论文解析 一、引言与背景 文本到音频系统的局限性&#xff1a;当前文本到音频生成系统性能虽佳&#xff0c;但推理速度慢&#xff08;需数秒至数分钟&#xff09;&#xff0c;限制了其在创意领域的应用。 研究…

ADC深入——SNR、SFDR、ENOB等概念

目录 SNR&#xff08;Spurious‑Free Dynamic Range 信噪比&#xff09; ENOB&#xff08;Effective Number Of Bits 有效位&#xff09; SFDR&#xff08;Spurious‑Free Dynamic Range&#xff09; 感觉SNR和SFDR差不多&#xff1f;看看下图 输入带宽 混叠 带通采样/欠…

硬件厂商的MIB文档详解 | 如何查询OID? | MIB Browser实战指南-优雅草卓伊凡

硬件厂商的MIB文档详解 | 如何查询OID? | MIB Browser实战指南-优雅草卓伊凡 一、硬件厂商的MIB文档是什么&#xff1f; 1. MIB的本质&#xff1a;设备的”数据字典” MIB&#xff08;Management Information Base&#xff09; 是SNMP协议的核心数据库&#xff0c;定义了设备…

阿里开源通义万相 Wan2.1-VACE,开启视频创作新时代

0.前言 阿里巴巴于2025年5月14日正式开源了其最新的AI视频生成与编辑模型——通义万相Wan2.1-VACE。这一模型是业界功能最全面的视频生成与编辑工具&#xff0c;能够同时支持多种视频生成和编辑任务&#xff0c;包括文生视频、图像参考视频生成、视频重绘、局部编辑、背景延展…

小学数学题批量生成及检查工具

软件介绍 今天给大家介绍一款近期发现的小工具&#xff0c;它非常实用。 软件特点与出题功能 这款软件体积小巧&#xff0c;不足两兆&#xff0c;具备强大的功能&#xff0c;能够轻松实现批量出题。使用时&#xff0c;只需打开软件&#xff0c;输入最大数和最小数&#xff0c…

5.13/14 linux安装centos及一些操作命令随记

一、环境准备 VMware Workstation版本选择建议 CentOS 7 ISO镜像下载指引 虚拟机硬件配置建议&#xff08;内存/处理器/磁盘空间&#xff09; 二、系统基础命令 一、环境准备 1.VMware Workstation版本选择建议 版本选择依据 选择VMware Workstation的版本时&#xff0c…

Baklib加速企业AI数据智理转型

Baklib智理AI数据资产 在AI技术深度渗透业务场景的背景下&#xff0c;Baklib通过构建企业级知识中台架构&#xff0c;重塑了数据资产的治理范式。该平台采用智能分类引擎与语义分析模型&#xff0c;将分散在邮件、文档、数据库中的非结构化数据转化为标准化的知识单元&#xf…

基于协同过滤的文学推荐系统设计【源码+文档+部署】

基于协同过滤的文学推荐系统设计 摘要 随着信息技术的飞速发展和文学阅读需求的日益多样化&#xff0c;构建一个高效、精准的文学推荐系统变得尤为重要。本文采用Spring Boot框架&#xff0c;结合协同过滤算法&#xff0c;设计并实现了一个基于用户借阅行为和社交论坛互动的文学…