HTML标签 - 1

文章目录

    • HTML标签
      • 简介
      • HTML书写规范
      • 常见网页制作软件
      • 常用标签
        • 结构标签
        • 排版标签
        • 标题标签
        • 容器标签
        • 字体标签
        • 文本格式化标签
        • 列表标签
        • 图片标签

HTML标签

简介

一门使用标记标签来描述网页，展示信息给用户的语言。

超文本标记语言（Hyper Text Markup Language）：

  • 超文本：页面内可以包含图片、链接、音乐、程序等非文字元素
  • 标记：即标签，不同的标签实现不同的功能
  • 语言：人与计算机的交互工具

HTML书写规范

  • HTML标签是以尖括号包围的关键字。
  • HTMl标签通常是成对出现的，有开始标签就有结束标签。
    • 独立标签，开始和结束合并在一起。
  • HTML标签通常都有属性。
    • 格式：属性=”属性值“
    • 多个属性之间空格隔开。
  • HTML标签不区分大小写，建议全小写。

常见网页制作软件

  • 记事本
  • DreamWeaver、WebStorm、IDEA、HBuilder、VS Code

常用标签

结构标签

  • 结构标签用来描述网页基本结构

    • 网页使用.html作为后缀
    标签描述
    <html>根标签
    <head>头标签
    <title>网页标题标签
    <body>正文

    <!-- 网页类型声明，描述使用的HTML版本 -->
<!DOCTYPE html>
<!-- 网页根标签，网页所有内容都要编写在html标签中 -->
<html><!-- 头标签 --><head><!-- 网页的编码 --><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 网页标题 --><title>结构标签</title></head><!-- 正文 --><body>正文</body>
</html>
排版标签

  • 用于实现简单的页面布局

    标签代码描述
    注释标签<!--注释内容-->代码的解释性说明性内容，浏览器打开页面时，自动忽略注释内容
    换行标签<br/>浏览器在打开时会忽略所有的空格和换行，只保留一个空格，需要用br标签换行
    段落标签<p></p>描述一段内容，自动换行 align：对齐
    水平线标签<hr/>hr 水平线标签：显示一条横线 color：颜色； width：宽度； size：粗细； align：对齐

  • <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>排版标签</title>
</head>
<body><!-- HTML注释 代码的解释性说明性内容，浏览器打开页面时，自动忽略注释内容--><!-- br 换行标签 浏览器在打开时会忽略所有的空格和换行，只保留一个空格，需要用br标签换行 -->赠汪伦<br>李白乘舟将欲行<br><!-- p段落标签：描述一段内容，自动换行 align 属性：描述段落中内容的对齐方式，left center right--><p align="center">春晓</p><!-- hr 水平线标签：显示一条横线color：颜色width：宽度size：粗细align：对齐--><hr color="red" width="300" size="1" align="center"><p align="center">春眠不觉晓</p>
</body>
</html>
标题标签

  • 标题标签：h1-h6，字体从大到小，加粗显示，默认独占一行

    • align：内容水平对齐方式

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>标题标签</title>
</head>
<body><!-- 标题标签：h1-h6，字体从大到小，加粗显示，默认独占一行  --><h1 style="text-align: center;">一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>
</body>
</html>

课堂案例

  • 按照效果图完成页面制作

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>task01</title>
</head>
<body><h1>望庐山瀑布</h1><h4>作者：李白</h4><hr><p>日照香炉生紫烟，</p><p>遥看瀑布挂前川。</p><p>飞流直先三千尺，</p><p>疑是银河落九天。</p>
</body>
</html>
容器标签

  • 使用DIV+CSS是现下流行的一种布局方式

  • HTML的标签主要分为三类

    • 块级标签：独占一行，可指定高度和宽度。比如：div、p、h1-h6、html、body、列表标签等。
    • 行级标签：标签同一行显示，宽度和高度有内容决定。比如：span、a、i、em、b等。
    • 行级块标签：同时具备行标签和块标签的特点，标签同一行显示，可设置宽高。比如：img、input。
    标签描述
    <div>属于块级标签，独占一行，可以设置宽度和高度
    <span>属于行级标签，在同一行显示，宽度和高度由内容决定

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>容器标签</title>
</head>
<body><h1>容器标签</h1><h2>1 div(division):属于块级标签，独占一行，可以设置宽度和高度</h2><div style="background-color: bisque; width: 500px; height: 100px;"  >哈哈哈哈哈哈哈</div><h2>2 span:属于行级标签，在同一行显示，宽度和高度由内容决定</h2><h2>课程设置：</h2><span style="background-color: blue;">JavaEE分布式开发</span><span style="background-color: cadetblue;">鸿蒙生态开发</span>
</body>
</html>
字体标签

  • <font>

    • ​ size：字体大小 1-7

    • ​ color：字体颜色

    • ​ face：字体样式

  • ​ HTML颜色的表示

    • ​ 方式1：样色名称，red、green、blue

    • ​ 方式2：rgb模式，所有颜色都可以使用rgb三原色表示。

    • ​ red 0-255、green 0-255、blue 0-255

    • ​ 举例：红色：#FF0000; 蓝色：#0000FF; 绿色：#00FF00 白色：#FFF; 黑色：#000

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字体标签</title>
</head>
<body><!-- size：字体大小 1-7color：字体颜色face：字体样式HTML颜色的表示方式1：样色名称，red、green、blue方式2：rgb模式，所有颜色都可以使用rgb三原色表示red 0-255green 0-255blue 0-255举例：红色：#FF0000; 蓝色：#0000FF; 绿色：#00FF00白色：#FFF; 黑色：#000--><font size="6" color=#FF0000 face="楷体">赠汪伦</font><br><font size="4" face="楷体">李白乘舟将欲行，</font><br><font size="4" face="楷体">忽闻岸上踏歌声。</font><br><font size="4" face="楷体">桃花潭水深千尺，</font><br><font size="4" face="楷体">不及汪伦送我情。</font><br>
</body>
</html>
文本格式化标签

  • 格式化标签实现内容的简单样式处理。

    标签描述
    b、strong加粗
    i、em强调（斜体）字体
    sub下标标签
    sup上标标签
    del删除线

课堂案例

  • 按照效果图完成页面制作

    在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>task02</title>
</head>
<body><h1>望庐山瀑布</h1><h4>作者：李白</h4><hr><p>日照香炉生紫烟，</p><p>遥看瀑布挂前川。</p><p>飞流直先三千尺，</p><p>疑是银河落九天。</p><hr><h4>作者简介</h4><p><font size="5" color="blue">李白</font>(701—762), 字太白, 号<b>青莲居士</b>。是屈原之后最具个性特色、最伟大的<font color="gold">浪漫主义诗人</font>。有<font color="green">“诗仙”</font>之美誉，与杜甫并称“李杜”。</p><p>其诗以抒情为主，表现出蔑视权贵的傲岸精神，对人民疾苦表示同情，又善于描绘自然景色，表达对祖国山河的热爱。</p><h4>创作背景</h4><p>这两首诗一般认为是<font color="red">唐玄宗</font>开元十三年(725)前后李白出游金陵途中初游庐山时所作。</p><h4>作品鉴赏</h4><p>这首诗，紧扣题目中的<b>“望”</b>字，都以庐山的香炉峰入笔描写庐山瀑布之景，都用<font size="5">“挂”</font>字突出瀑布如珠帘垂空，</p><p>以高度夸张的艺术手法，把瀑布勾画得传神入化，然后细致地描写瀑布的具体景象，</p><p>将飞流直泻的瀑布描写得<font color="green">雄伟奇丽，气象万千，宛如一幅生动的山水画。</font></p>
</body>
</html>
列表标签

无序列表：使用一组无序的符号定义，标签为 ul（unorder list）

type属性：设置列表项的符号

属性值描述用法举例
circle空心圆<ul type="circle"></ul>
disc实心圆<ul type="disc"></ul>
square方块<ul type="square"></ul>
none无列表项符号<ul type="none"></ul>

有序列表：使用一组有序的符号定义，标签为 ol（order list）

type属性：设置列表项的符号

属性值描述用法举例
1数字<ol type="1"></ol>
a小写字母<ol type="a"></ol>
A大写字母<ol type="A"></ol>
i小写罗马数字<ol type="i"></ol>
I大写罗马数字<ol type="I"></ol>

嵌套使用：列表可以嵌套使用

代码演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表标签</title>
</head>
<body><h1>无序列表：使用一组无序的符号定义，标签为 ul（unorder list）</h1><h3>type属性：设置列表项的符号</h3><h4>circle：空心圆  disc：实心圆   square：方块 none：无</h4><ul type="square"><li>北京</li><li>上海</li><li>深圳</li></ul><hr><h1>有序列表：使用一组有序的符号定义，标签为 ol（order list）</h1><h3>type属性：设置列表项的符号</h3><h4>1：数字 a：小写字母 A：大写字母 i：小写罗马数字 I：大写罗马数字 </h4><ol type="I"><li>苹果</li><li>香蕉</li><li>西瓜</li></ol><h1>嵌套使用：列表可以嵌套使用</h1><ol type="A"><li>手机</li><ul type="disc"><li>华为</li><li>小米</li><li>苹果</li> </ul><li>家电</li><ul type="square"><li>电视</li><li>空调</li><li>冰箱</li></ul></ol>
</body>
</html>
图片标签

  • 在页面指定位置处引入一幅图片，标签为<img/>

    属性描述
    src关联图片的地址，相对地址和绝对地址
    相对地址: 相对当前文件所关联图片的位置，同一个网站内部使用
    ./ 当前目录，可以省略
    …/ 表示上一级目录
    …/…/ 表示上上一级目录
    绝对地址：包含协议或盘符的完整地址，不同网站之间使用
    width图片的宽度，单位像素或百分比 (这将使浏览器按照与浏览器显示窗口的一定比例来缩放图像)
    height图片的高度，单位像素或百分比（这将使浏览器按照与浏览器显示窗口的一定比例来缩放图像）
    alt当图片不显示时，所替换的内容
    title鼠标悬停所显示的内容
    align图片相对其他内容的位置
    baseline: 基线对齐【默认】
    bottom: 使用css设置, 底部对齐
    middle: 垂直居中对齐<
    top: 顶部对齐
    hspace在图片左右设定空白
    vspace在图片上下设定空白

    在这里插入图片描述

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片标签</title>
</head>
<body><h1>img标签: 关联图片</h1><ul><li>src: 关联图片的地址，相对地址和绝对地址</li><ul><li>相对地址: 相对当前文件所关联图片的位置，同一个网站内部使用</li><li>./ 当前目录，可以省略</li><li>../ 表示上一级目录</li><li>../../ 表示上上一级目录</li><li>绝对地址：包含协议或盘符的完整地址，不同网站之间使用</li></ul><li>width: 图片的宽度，单位像素或百分比</li><li>height: 图片的高度</li><li>alt: 当图片不显示时，所替换的内容</li><li>title: 鼠标悬停所显示的内容</li><li>align: 图片相对其他内容的位置</li><ul><li>baseline: 基线对齐【默认】</li><li>bottom: 使用css设置, 底部对齐</li><li>middle: 垂直居中对齐</li><li>top: 顶部对齐</li></ul><li>hspace: 左右空白</li><li>vspace: 上下空白</li></ul><!-- 相对地址 --><img src="images/16823239310830f125b9540fdcaf9c013daf5d3f59fb52c59.jpg" width="20%" alt="图片" title="云先生" align="top"><!-- 本机绝对地址 --><img src="D:\Users\胡昊龙\Pictures\1690794171645.png" width="20%" ><!-- 网络绝对地址 --><img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.IwNNvK3tarQWm5UU929RtQHaNK?w=115&h=184&c=7&r=0&o=5&dpr=1.5&pid=1.7" width="10%" align="top">
</body>
</html>

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

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

相关文章

WMS系统与电商平台快速拉通库存数量

WMS系统与电商平台快速拉通库存数量

什么是WMS系统 WMS系统是指仓储管理系统&#xff08;Warehouse Management System&#xff09;。它是一种用于管理和控制仓库运营的软件系统。WMS系统通过集成信息技术&#xff0c;提供仓库内货物的存储、出入库、库存管理、订单处理等功能&#xff0c;优化仓库的运作效率和准…
阅读更多...
Flask 入门3：Flask 请求上下文与请求

Flask 入门3：Flask 请求上下文与请求

1. 前言 Flask 在处理请求与响应的过程&#xff1a; 首先我们从浏览器发送一个请求到服务端&#xff0c;由 Flask 接收了这个请求以后&#xff0c;这个请求将会由路由系统接收。然后在路由系统中&#xff0c;还可以挂入一些 “勾子”&#xff0c;在进入我们的 viewFunction …
阅读更多...
adb 无线连接 操作Android设备

adb 无线连接 操作Android设备

最近集五福活动比较热门 可以用这个工具 用自己擅长的语言写一个循环程序 运行起来就可以 自动帮我们 看视频得福卡了 很方便 while (true) {sleep(mt_rand(15, 25));system(adb shell input swipe 500 2000 500 1000 100); } 1. 首先下载 安卓开发工具 adb adb网盘链接 链接…
阅读更多...
Django中的模板

Django中的模板

目录 一:基本概念 二&#xff1a;模板继承 在Django中&#xff0c;模板是用于呈现动态内容的HTML文件。它们允许你将动态数据与静态模板结合起来&#xff0c;生成最终的HTML页面。 Django模板使用特定的语法和标签来插入动态内容。你可以在模板中使用变量、过滤器和标签来控…
阅读更多...
【HarmonyOS】鸿蒙开发之HTTP网络请求——第5章

【HarmonyOS】鸿蒙开发之HTTP网络请求——第5章

HTTP网络请求封装 network/request.ets import { configInterface } from ./type import http from ohos.net.http import { getToken } from ../utils/storage//网络请求封装 export const request (config:configInterface)>{let httpRequest:http.HttpRequest http.c…
阅读更多...
IDEA 取消参数名称提示、IDEA如何去掉变量类型提醒

IDEA 取消参数名称提示、IDEA如何去掉变量类型提醒

一、IDEA 取消参数名称显示 取消显示形参名提示 例如这样的提示信息 二、解决方法 1、File—>Setting–>Editor—>Inlay Hints—>Java 去掉 Show Parameter hints for 前面的勾即可&#xff0c;然后Apply—>Ok 2、右键Disable Hints
阅读更多...
强敌环伺：金融业信息安全威胁分析——整体态势

强敌环伺：金融业信息安全威胁分析——整体态势

从早期的Zeus和其他以银行为目标的特洛伊木马程序&#xff0c;到现在的大规模分布式拒绝服务&#xff08;DDoS&#xff09;攻击&#xff0c;再到新颖的钓鱼攻击和勒索软件&#xff0c;金融服务业已成为遭遇网络犯罪威胁最严重的行业之一。金融服务业的重要性不言而喻&#xff0…
阅读更多...
【AI视野·今日NLP 自然语言处理论文速览 第七十七期】Mon, 15 Jan 2024

【AI视野·今日NLP 自然语言处理论文速览 第七十七期】Mon, 15 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Mon, 15 Jan 2024 Totally 57 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Machine Translation Models are Zero-Shot Detectors of Translation Direction Authors Michelle Wastl, Ja…
阅读更多...
docker私有库

docker私有库

1.registry私有仓库 拉取registry镜像 docker pull registry 修改docker配置文件并重启 vim /etc/docker/daemon.json {"insecure-registries": ["172.16.23.23:5000"], #添加&#xff0c;注意用逗号结尾"registry-mirrors": ["ht…
阅读更多...
C# .Net Framework Swagger

C# .Net Framework Swagger

1.安装 Swagger 在NuGet程序包中安装以下文件 Swashbuckle: Swagger&#xff1a; Swagger.Net: 2.在项目APP_Start 文件夹下面找到 SwaggerNet.cs文件 1.注释掉这两行代码 2.将PreStart方法的内容修改为以下 public static void PreStart() {RouteTable.Routes.MapHttpRoute(…
阅读更多...
iview DatePicker 日期选择组件在弹窗中使用transfer，导致选择日期弹窗会关闭的问题

iview DatePicker 日期选择组件在弹窗中使用transfer，导致选择日期弹窗会关闭的问题

背景&#xff1a;在弹窗里面使用日期选择组件&#xff0c;选择组件的面板被弹窗遮挡了部分&#xff0c;所以需要使用transfer属性&#xff0c;但是使用之后组件面板插入body中了&#xff0c;面板的事件会导致弹窗关闭。 解决方案&#xff1a; 添加上transfer属性和指定的date-…
阅读更多...
N65总账凭证管理凭证查询（sql）

N65总账凭证管理凭证查询（sql）

--核算账簿 select code , name , pk_setofbook from org_setofbook where ( pk_setofbook in ( select pk_setofbook from org_accountingbook where 1 1 and ( pk_group N0001A11000000000037X ) and ( accountenablestate 2 ) ) ) order by code;--核算账簿 select code …
阅读更多...
AI在数模中的应用（附2024年美赛AI规则解读）

AI在数模中的应用（附2024年美赛AI规则解读）

近期一直有人私信询问AI对数模的应用。本次想借着2024年美赛对AI工具的使用说明已经去年国赛开会的结果&#xff0c;跟大家分享一下国赛、美赛对于AI的态度以及如何使用AI应用于数模。本文将基于本人常用的三种AI工具(ChatGPT、文心一言、NEW bing)进行讲解 根据2023年国赛总结…
阅读更多...
数据库技术栈 —— B树与B+树

数据库技术栈 —— B树与B+树

数据库技术栈 —— B树与B树 一、复习二、MySQL中的B树应用 一、复习 B树是多路平衡查找树的意思 参考文章或视频链接[1] 【王道计算机考研 数据结构】 二、MySQL中的B树应用 这篇文章里的计算题还是讲的不错的。 参考文章或视频链接[1] 《探究MySQL的索引结构选型》
阅读更多...
阿里云推出 3.x Java 探针，解锁应用观测与治理的全新姿势

阿里云推出 3.x Java 探针，解锁应用观测与治理的全新姿势

作者&#xff1a;张铭辉、泮圣伟 前言 随着春节大促即将到来&#xff0c;为了确保线上业务高效稳定地运行&#xff0c;电商企业大多会对旗下关键业务应用进行多轮测试。通过模拟线上较高流量的请求&#xff0c;来观察服务性能的实际表现。以某企业的业务测试报告举例&#xf…
阅读更多...
SpringClound项目相关

SpringClound项目相关

nacos本机模式非虚拟机启动也可正常连接 nacos中的配置中心相当于在application.yml中的相关配置&#xff0c;转移位置&#xff0c;内容同application.yml完全一样均可。 黑马项目导入后&#xff0c;依赖缺失&#xff1a; 首先尝试maven重新加载&#xff0c;控制台提示传递依…
阅读更多...
稀疏场景高性能训练方案演变|京东广告算法架构体系最佳实践

稀疏场景高性能训练方案演变|京东广告算法架构体系最佳实践

近年来&#xff0c;推荐场域为提升模型的表达能力和计算能力&#xff0c;模型规模和计算复杂度大幅增加&#xff0c;同时&#xff0c;高规格硬件资源为模型迭代、算法优化带来了更大的机遇和挑战。为了应对模型规模和算力升级带来的存储、IO和计算挑战&#xff0c;京东零售广告…
阅读更多...
解决WindowServer2022关于EDGE浏览器识自签证书问题

解决WindowServer2022关于EDGE浏览器识自签证书问题

1、证书颁发机构服务打开MMC控制台 添加证书、证书模板 2、复制证书模板
阅读更多...
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Gauge组件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Gauge组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Gauge组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Gauge组件 数据量规图表组件&#xff0c;用于将数据展示为环形图表。 子组件 无…
阅读更多...
Unity_Visual Effect Graph

Unity_Visual Effect Graph

Unity_Visual Effect Graph Unity可视化特效渲染虽不及Unreal Engine，然也还是吊打一众其他引擎的，粗浅整理一波吧，需要深入研究的点实在是太多了。 按照常规包管理方式安装Visual Effect Graph插件： 安装之后，示例文件夹中自带资源，拖入场景即可： 场景只是资源的显…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023