HTML第一课 语法规范与常用标签

news2024/9/20 20:24:33

目录

◆ HTML 语法规范

◆ HTML 常用标签

4.2 标题标签

4.3 段落和换行标签

4.4文本格式化标签

4.5<div>和<span>标签

4.6图像标签和路径

4.7超链接标签

1.外部链接

2.内部链接

3.空链接

4.下载链接

5.锚点链接

◆ HTML 中的注释和特殊字符​编辑


◆ HTML 语法规范

<!DOCTYvidE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewvidort" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

 <! DOCTYPE html>

1. 以上三个代码vscode自动生成,基本不需要我们重写.

文档类型声明标签,告诉浏览器这个页面采取htm15版本来显示页面.

3. <html lang="en">告诉浏览器或者搜索引挚这是一个英文网站.本页面采取英文来显示

4 .< meta charset="UTF-8"/>必须写. 采取 UTF-8来保存文字.如果不写就会乱码.具体原理后面分析.

◆ HTML 常用标签

4.2 标题标签<h1> -< h6>(重要)

为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题,
即<h1> -< h6>。

<h1>我是一级标题 </h1>

单词head的缩写,意为头部、标题。

标签语义:作为标题使用,并且依据重要性递减。

特点:

1.加了标题的文字会变的加粗,字号也会依次变大。

2.一个标题独占一行。

<!DOCTYvidE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewvidort" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>

        <h1>标题一共六级选,</h1>

        <h2>文字加粗一行显。</h2>

        <h3>文字加粗一行显。</h3>

        <h4>从重到轻随之变</h4>

        <h5>语法规范书写后,</h5>

        <h6>具体效果刷新见</h6>
    </body>

    </html>

4.3 段落和换行标签

4.4文本格式化标签

4.5<div>和<span>标签

4.6图像标签和路径

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用form表单元素</title>
</head>

<body>
    <h4>图像标签的使用</h4>
    <img src="java112_0516_mysql.png">
    <h4>alt 替换文本 图像像是不出来用文字替换</h4>
    <img src="java112_0516_mysql.png" alt="我不爱学习">
    <h4>title 提示文本 鼠标放在图标上,提示的文字</h4>
    <img src="java112_0516_mysql.png" alt="我不爱学习" title="我其实爱学习" </body>

图像标签属性注意点:

1 图像标签可以拥有多个属性,必须写在标签名的后面。

2 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。

3 属性采取键值对的格式,即key=“value"的格式,属性=“属性值”。

重点掌握点:

请说出 图像标签哪个属性是必须要写的?

src
请说出 图像标签中aft和 title属性区别?

                      替换文本  提示文本  

同一级路径(常用)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用form表单元素</title>
</head>

<body>
    <img src="CT-20240816095553.png" />
</body>

4.7超链接标签

1.外部链接

2.内部链接

3.空链接

4.下载链接

<h4>内部链接<h4>
 
<a href="http://Day03.html" target=_blank>去干嘛</a>


<h4>空链接<h4>

    <a href="#">公司地址</a>


<h4>下载链接<h4>

    <a href="hanjutv.zip" target="blank">zip文件</a>

5.锚点链接

会直接跳转到个人生活界面

◆ HTML 中的注释和特殊字符


 

如果您觉得有失偏颇请您在评论区指正,如果您觉得不错的话留个好评再走吧!!

您的鼓励就是对我最大的支持!  ! !

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

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

相关文章

Redis中String类型的基本命令

文章目录 一、String字符串简介二、常见命令setgetmgetmsetsetnxincrincrbydecrdecrbyincrbyfloatappendgetrangesetrangestrlen 三、命令小结四、字符串内部编码五、String典型使用场景1. 缓存(Cache)功能2. 计数功能3. 共享会话&#xff08;Session&#xff09;4. 手机验证码…

软件测试学习笔记丨Pytest+Allure测试计算器

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/31954 项目要求 3.1 项目简介 计算器是近代人发明的可以进行数字运算的机器。 计算器通过对加法、减法、乘法、除法等功能的运算&#xff0c;将正确的结果展示在屏幕上。 可帮助人们更方便的…

FLTRNN:基于大型语言模型的机器人复杂长时任务规划

目录 一、引言二、FLTRNN框架2.1 任务分解2.2 基于语言的递归神经网络&#xff08;Language-Based RNNs&#xff09;长期记忆&#xff08;Long-Term Memory, Ct&#xff09;&#xff1a;短期记忆&#xff08;Short-Term Memory, Ht&#xff09;&#xff1a; 2.3 增强推理能力的…

GAMES104:12 游戏引擎中的粒子和声效系统-学习笔记

文章目录 一&#xff0c;粒子基础Particle System二&#xff0c;粒子渲染三&#xff0c;GPU粒子及生命周期控制四&#xff0c;粒子应用五&#xff0c;声音基础5.1 Sound System5.2 Digital Sound5.3 Audio Rendering QA 一&#xff0c;粒子基础Particle System 网游里你的付费…

[数据结构]红黑树之插入操作(RBTree)

这里只着重介绍插入操作的实现&#xff1a;) 一、红黑树的概念和性质 红黑树&#xff08;Red Black Tree&#xff09;是一种自平衡的二叉搜索树。红黑树最初在1972年由Rudolf Bayer发明&#xff0c;当时被称为平衡二叉B树&#xff08;symmetric binary B-trees&#xff09;。随…

2024 年高教社杯全国大学生数学建模竞赛B题解题思路(第一版)

原文链接&#xff1a;https://www.cnblogs.com/qimoxuan/articles/18399372 赛题&#xff1a; 问题 1&#xff1a;抽样检测方案设计 分析&#xff1a; 抽样检测方案需要在保证决策准确性的同时&#xff0c;尽量减少检测成本。需要考虑抽样误差对决策的影响&#xff0c;以及如…

OCR经典神经网络(一)文本识别算法CRNN算法原理及其在icdar15数据集上的应用

OCR经典神经网络(一)文本识别算法CRNN算法原理及其在icdar15数据集上的应用 文本识别是OCR&#xff08;Optical Character Recognition&#xff09;的一个子任务&#xff0c;其任务为&#xff1a;识别一个固定区域的的文本内容。 在OCR的两阶段方法里&#xff0c;文本识别模型接…

若依框架登录鉴权详解(动态路由)

若依框架登录鉴权&#xff1a;1.获取token&#xff08;过期在响应拦截器中实现&#xff09;,2.基于RBAC模型获取用户、角色和权限信息&#xff08;在路由前置守卫&#xff09;&#xff0c;3.根据用户权限动态生成&#xff08;从字符串->组件&#xff0c;根据permission添加动…

linux搭建深度学习平台

linux搭建深度学习平台&#xff08;Ubuntu&#xff09; /home/guangyao/anaconda3 我服务器的anaconda地址 ~/anaconda3 1 首先就是打开浏览器&#xff0c;我实验室的是火狐&#xff0c;搜索anaconda下载&#xff0c;找到下载目录&#xff0c;cd进去&#xff0c; 2安装 bas…

【佳学基因检测】在bagisto中,grouped products(同组产品)和bundled products(打包产品)有什么不同?

【佳学基因检测】在bagisto中&#xff0c;grouped products&#xff08;同组产品&#xff09;和bundled products&#xff08;打包产品&#xff09;有什么不同&#xff1f; 在Bagisto电商平台中&#xff0c;**grouped products&#xff08;同组产品&#xff09;和bundled prod…

iceberg存储结构详解

iceberg底层组织方式 下图是Iceberg中表格式&#xff0c;s0、s1代表的是表Snapshot信息&#xff0c;每个表示当前操作的一个快照&#xff0c;每次commit都会生成一个快照Snapshot&#xff0c;每个Snapshot快照对应一个manifest list 元数据文件&#xff0c;每个manifest list …

2024国赛数学建模预测算法-BP神经网络模型的预测精度分析(MATLAB 实现)

人工神经网络 第一节 人工神经网络概述 在您阅读这本书的时候&#xff0c;大约有个相互连接的神经元在帮助您阅读、呼吸、思考&#xff0c;以及完成各种各样的动作。这些神经元中&#xff0c;有些有着与生俱来的功能&#xff0c;比如呼吸、吮吸&#xff0c;有些则是由后天训练…

动态规划DP--背包问题

文章目录 0-1背包问题 -- 问题定义动态规划解法代码题目&#xff1a;分割等和子集题解 0-1背包问题 – 问题定义 在 0-1 背包问题中&#xff0c;给定一个背包的最大容量 W&#xff0c;以及 n 个物品&#xff0c;每个物品有两个属性&#xff1a; 重量&#xff1a;第 i 个物品的…

[数据集][目标检测]电动车入梯进电梯电单车入梯检测数据集VOC+YOLO格式7106张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;7106 标注数量(xml文件个数)&#xff1a;7106 标注数量(txt文件个数)&#xff1a;7106 标注…

广义回归神经网络(GRNN)

一、简介 广义回归神经网络 (General Regression Neural Network &#xff0c; GRNN) 的概念是由德 国科学家多纳德提出的&#xff0c;是径向基网络的其中一种 。因为其是以数理统计为基 础的&#xff0c;因此 GRNN 可以依据样本数据逼近其中包含的非线性映射关系。即使样本 数…

家里有猫用宠物空气净化器有用吗?希喂、米家、有哈哪款更好

在快节奏的现代生活中&#xff0c;越来越多的人选择宠物作为心灵的慰藉与生活的伴侣。起初&#xff0c;这份陪伴的需求简单而纯粹&#xff0c;但随着日子一天天过去&#xff0c;那份简单的情感逐渐生根发芽&#xff0c;成长为深厚的责任与爱。我在前两年养了两只猫&#xff0c;…

一款云笔记支持在线协同文档,脑图,白板演示的工具,多个设备同步,让灵感与你同行(附源码)

前言 在快节奏的工作环境中&#xff0c;如何高-效地记录、整理并分享工作笔记已经成为了一项重要的技能。传统的笔记方式往往难以满足跨设备、即时同步以及团队协作的需求&#xff0c;导致信息孤岛和工作效率低下。面对这样的挑战&#xff0c;我们迫切需要一种全新的工具来改变…

【ArcGIS Pro原理第一期】各种空间插值原理:GPI、LPI、IDW等

ArcGIS Pro原理第一期&#xff1a;空间插值原理 空间插值方法概述1.1 全局多项式&#xff08;global polynomial interpolation, GPI&#xff09;方法原理使用范围 1.2 局部多项式&#xff08;local polynomial interpolation, LPI&#xff09;方法原理精度测量&#xff08;Mea…

echarts进度

echarts图表集 let numdata["I级",II级,III级,IV级,V级,劣V级] let pricedata40 option {backgroundColor: #0f375f,title: {show: false,text: ,left: center,top: 30%,textStyle: {color: #00D5FF,fontSize: 16,},},tooltip: {show: false},grid: {// show: true,…

鸿蒙界面开发——组件(5):菜单Menu 绑定菜单

菜单组件Menu Menu组件需和bindMenu或bindContextMenu方法配合使用&#xff0c;不支持作为普通组件单独使用。 Menu 以垂直列表形式显示的菜单。包含MenuItem、MenuItemGroup子组件。 Menu()作为菜单的固定容器&#xff0c;无参数。 MenuItem(value?: MenuItemOptions| Cust…