【HTML】-- 01 初识HTML

HTML

1.初识HTML

Hyper Text Markup Language:超文本标记语言

1.1 W3C标准

  • W3C
    • World Wide Web Consortium(万维网联盟)
    • 成立于1994年,Web技术领域最权威和最具影响力的国际中立性技术标准机构
    • http://www.w3.org/
    • http://www.chinaw3c.org/
  • W3C标准包括:
    • 结构化标准语言(HTML、XML)
    • 表现标准语言(CSS)
    • 行为标准(DOM、ECMAScript)

1.2 HTML基本结构

图1

如上所示,、等成对的标签,分别叫开放标签闭合标签。单独呈现的标签(空元素)如


,意为用/来关闭空元素

1.3 网页基本标签

  • 标题标签
  • 段落标签
  • 换行标签
  • 水平线标签
  • 字体样式标签
  • 注释和特殊符号
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基本标签</title>
</head>
<body><!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6><!--段落标签-->
<p>跑得快    跑得快</p>
<p>真奇怪    真奇怪</p>
<p>一只没有耳朵    一只没有耳朵</p><!--水平线标签-->
<hr/><!--换行标签-->
跑得快    跑得快<br/>
真奇怪    真奇怪<br/>
一只没有耳朵    一只没有耳朵<br/><!--字体样式标签-->
<h1>字体样式标签</h1>
粗体:<strong>i love you</strong><br/>
斜体:<em>i love you</em><br/><!--特殊符号-->
空    格:空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
大于号:&gt;<br/>
小于号:&lt;<br/>
版权号:&copy;版权所有duo<br/><!--
特殊符号记忆方式:
方法一:&+ ;可以在IDEA中预览各种特殊符号的写法
方法二:搜索引擎查询
--></body>
</html>

特殊符号预览:

图2

1.4 图像标签

  • 常见的图像格式

    • JPG
    • GIF
    • PNG
    • BMP
  • <img src="path" alt="text" title="text" width="x" height="y"/>
    <!--图像地址 图像的替代文字 鼠标悬停提示文字 图像宽度 图像高度-->
    

1.5 链接标签

  • 文本超链接

  • 图像超链接

  • <a href="path" target="目标窗口位置">链接文本或图像</a>
    <!--链接路径 链接在哪个窗口打开:_self、_blank-->
    

超链接:页面间链接(从一个页面链接到另一个页面)、锚链接、功能性链接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>链接标签</title>
</head>
<body><a id="top">顶部</a><br/><!--
href:表示要跳转到哪个页面
target:表示窗口在哪里打开_blank:在新建窗口中打开_self(默认):在当前窗口中打开
-->
<a href="3.图像标签.html" target="_blank">点击图片确认跳转 <br/><img src="../resources/image/fire.jpg" alt="我的头像" title="fire">
</a><br/>
<a href="https://www.baidu.com" target="_blank">百度一下,你就知道</a><p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire"></p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire"></p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire"></p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire"></p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire"></p>
<p><img src="../resources/image/fire.jpg" alt="我的头像" title="fire"></p><!--锚链接
1.需要一个锚标记
2.跳转到标记
#
--><!--功能性链接
邮件链接:mailto
-->
<a href="mailto:duo_53@163.com">点击联系我</a><a href="#top">回到顶部</a><br/>
<a id="bottom">底部</a></body>
</html>

上述代码显示网页如下:

图3

图4

此外,还可以通过在href属性中添加#直接跳转至页面中的锚处:

<a href="4.链接标签.html#bottom"><br/>点击跳转</a>

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

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

相关文章

如何批量修改文件名顺序编号?

如何批量修改文件名顺序编号&#xff1f;批量修改文件名顺序编号&#xff0c;指的是对多个文件名进行统一的修改&#xff0c;为每个文件名添加一个顺序编号。例如&#xff0c;将文件夹中的一组文件从"file1", "file2", "file3" 修改为 "001…

CentOS使用docker本地部署StackEdit Markdown编辑器并实现公网访问

文章目录 1. docker部署Stackedit2. 本地访问3. Linux 安装cpolar4. 配置Stackedit公网访问地址5. 公网远程访问Stackedit6. 固定Stackedit公网地址 StackEdit是一个受欢迎的Markdown编辑器&#xff0c;在GitHub上拥有20.7k Star&#xff01;&#xff0c;它支持将Markdown笔记保…

【JMeter】JMeter连OceanBase数据库

1、下载OB&#xff08;OceanBase简称&#xff0c;下同&#xff09;&#xff0c;下载地址&#xff1a;https://www.oceanbase.com/softwarecenter-enterprise 2、将下载下来的jar包放到jmeter安装目录的 lib 目录下&#xff0c;或者打开JMeter客户端&#xff0c;在测试计划中引入…

Tide Quencher 7.2 CPG 500A ,TQ7.2 CPG 500A,可以提高荧光标记物的淬灭效果

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;荧光淬灭剂Tide Quencher 7.2 CPG 500A&#xff0c;Tide Quencher 7.2 CPG 500A &#xff0c;TQ7.2 CPG 500A 一、基本信息 产品简介&#xff1a;The fluorescence quencher Tide Quencher 7.2 CPG 500A can quench…

如何卸载旧版docker

环境&#xff1a; Docker1.13 centos7.6 问题描述&#xff1a; 如何卸载旧版docker 解决方案&#xff1a; 1.停止Docker服务。使用以下命令停止Docker服务&#xff1a; sudo service docker stop2.卸载Docker软件包。根据您的Linux发行版&#xff0c;使用适当的包管理器来…

IP 地址如何进行动态分配?

由于 IP 地址资源的有限性&#xff0c;大部分用户上网都是使用动态 IP 地址&#xff0c;而不是静态 IP 地址。动态 IP 地址指的是在需要的时候才进行 IP 地址分配的方式&#xff0c;而静态 IP 地址是固定分配一个 IP 地址&#xff0c;每次都用这一个地址。因此&#xff0c;IP 地…

[三]H264编码和 MediaCodec

[三]H264编码和 MediaCodec 一.MediaCodec二.H264二.使用Nginx搭建自己的rtmp服务器1.nginx是什么&#xff1f;2.环境准备 三、搭建过程1.安装编译 nginx 所需要的库2.下载 nginx-1.21.6.tar.gz3.下载 nginx-rtmp-module 4.解压5.编译6.启动nginx&#xff0c;检测nginx是否能成…

使用Go语言处理Excel文件的完整指南

xcel文件是广泛用于存储和处理数据的常见文件格式。在Go语言中&#xff0c;有许多库和工具可用于处理Excel文件。本文将介绍如何使用Go语言处理Excel文件&#xff0c;包括读取、写入和修改Excel文件&#xff0c;以及处理单元格、行和列等操作。无论是从头开始创建Excel文件&…

算法练习-长度最小的子数组(思路+流程图+代码)

难度参考 难度&#xff1a;简单 分类&#xff1a;数组 难度与分类由我所参与的培训课程提供&#xff0c;但需要注意的是&#xff0c;难度与分类仅供参考。以下内容均为个人笔记&#xff0c;旨在督促自己认真学习。 题目 给定一个含有个正整数的数组和一个正整数s&#xff0c;找…

智慧门店:如何利用AI视频智能监管与存储技术让门店降本增效?

一、行业背景 TSINGSEE青犀视频智慧门店解决方案是一种集成了人工智能、大数据、物联网等技术的零售解决方案&#xff0c;目的是提高门店的运营效率、用户体验和业绩。随着数字化转型的加速&#xff0c;连锁门店需要跟上时代的步伐&#xff0c;需要利用数字化手段提高运营效率…

【记录】解决 git 仓库突然出现连接失败

问题描述 今天在 push 代码代码的时候突然发现无法 push(但是我可以正常打开 Gihub)&#xff0c;这可不行&#xff0c;我可是 git 的重度使用者&#x1f60d;&#xff0c;我所有的代码都托管在了 Github 上&#xff0c;没有它我的日子怎么活啊&#xff01;&#xff01;&#x…

Linux系统三剑客之grep和正则表达式的介绍(一)

1.正则表达式 目录 1.正则表达式 1.什么是正则表达式 &#xff1f; 2.正则表达式的使用场景 3.正则表达式字符表示 4.它们之间的区别 2.grep命令 作用&#xff1a; 语法&#xff1a; 说明&#xff1a; 选项&#xff1a;options 重点 实例 3.后面的下次再更新。 …

始祖鸟母公司亚玛芬冲刺IPO:持续大额亏损,凸显安踏全球化野心

2024年赴美上市第一枪&#xff0c;由户外运动品牌始祖鸟母公司亚玛芬打响。 近日&#xff0c;安踏体育&#xff08;HK:02020&#xff0c;下称“安踏”&#xff09;旗下合营公司Amer Sports Holding&#xff08;Cayman&#xff09;Limited&#xff08;下称“AS Holding”&#…

Pyspark 安装(Mac M2版)

引言 本文为个人本地部署pyspark遇到的问题以及解决办法&#xff0c;包含个人的一些理解&#xff0c;仅供参考。设备&#xff1a; Mac M2 安装过程 安装HomeBrew Mac 上用来管理安装包的&#xff0c;可能早期的 Macos 自带但是起码我个人的 Mac 是需要安装的(以下安装方法个…

异步Merkle Tree

1. 引言 前序博客&#xff1a; 利用多核的Rust快速Merkle tree Anoushk Kharangate 2023年论文《Asynchronous Merkle Trees》&#xff0c;其对Merkle tree数据结构进行修改&#xff0c;使得可跨多线程异步计算。 开源代码实现见&#xff1a; https://github.com/anoushk1…

Java SE入门及基础(19)

二维数组 1. 数组的本质 数组从本质上来说只有一维&#xff0c;二维数组是指在一维数组中再放入一个一维数组。三维数组、四维数组依次类推。 2. 二维数组的定义 语法 数据类型[][] 数组名 new 数据类型[数组的长度][数组的长度]; 示例 public static void main ( Str…

解密Oracle数据库引擎:揭开数据存储的神秘面纱

目录 1、介绍Oracle数据库引擎 1.1 什么是Oracle数据库引擎 1.2 Oracle数据库引擎的作用和功能 1.3 Oracle数据库引擎的历史和发展 2、Oracle数据库引擎的体系结构 2.1 Oracle数据库实例的组成部分 2.2 Oracle数据库引擎的层次结构 2.3 Oracle数据库引擎的关键组件 3、…

Uniapp多选Popup(弹出层)

uniapp中多选组件很少&#xff0c;故个人简单开发了一个&#xff0c;可简单使用&#xff0c;也可根据个人需求稍微改进 支持的功能 单选多选&#xff08;默认&#xff09;限制选择数量默认选中禁用选项 属性说明 属性默认值说明singlefalsetrue为开启单选&#xff0c;否则为…

FFMPEG命令生成各国国旗

文章目录 亚洲篇中国~待完善朝鲜~待补充韩国~待补充蒙古~待补充日本越南~待补充老挝 欧洲篇挪威~待补充瑞典~待补充芬兰~待补充冰岛~待补充丹麦~待补充爱沙尼亚拉脱维亚立陶宛白俄罗斯~待补充乌克兰摩尔多瓦~待补充俄罗斯德国 亚洲篇 中国~待完善 先画个五角星 在100x100的画…

Tokenization 指南:字节对编码,WordPiece等方法Python代码详解

在2022年11月OpenAI的ChatGPT发布之后&#xff0c;大型语言模型(llm)变得非常受欢迎。从那时起&#xff0c;这些语言模型的使用得到了爆炸式的发展&#xff0c;这在一定程度上得益于HuggingFace的Transformer库和PyTorch等库。 计算机要处理语言&#xff0c;首先需要将文本转…