HTML5教程(二)- HTML语法及基本结构

1. 介绍

  • HTML

    • 超文本标记语言(HyperText Markup Language)浏览器能够识别和解析的语言,通过标签的形式构建页面结构和填充内容(用来描述网页的语言)。
    • HTML 不是一种编程语言,而是一种标记语言(是一套 标记标签
  • 超文本

    • 超越文本的限制:可以加入图片、声音、动画、多媒体等内容

    • 超级链接文本:可以实现从一个文件跳转到另一个文件,与世界各地主机的文件连接

      在这里插入图片描述

    • 前端人员开发代码 ----> 浏览器显示代码(解析、渲染) -----> 生成最后的 Web 页面

  • 作用

    • 读取 HTML 文档,并以网页的形式显示出它们。
    • 浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容

2. 标签

  • 概念

    • 标签也称为标记或元素,用于在网页中标记内容
  • 语法

    • 标签使用< >为标志,在< >内部写标签名和标签属性

      <!-- 此处为注释 -->
      
  • 说明

    • 标签名不区分大小写,推荐小写表示。
  • 分类

    • 双标签:成对出现,包含开始标签和结束标签。

      <html><!-- 内容或其他标签 -->
      </html>
      
    • 单标签:只有开始标签,没有结束标签,可以手动添加“/”表示闭合。

      <br>
      <br/>
      
  • 标签属性

    • 标签属性书写在开始标签中,使用空格与标签名隔开,用于设置当前标签的显示内容或者修饰显示效果。由属性名和属性值组成,属性值使用双引号表示。

      <meta charset="utf-8">
      
    • 同一个标签中可以添加若干组标签属性,使用空格间隔。

      <a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>
      

3. 使用

  1. 创建网页文件,使用.html或.htm作为文件后缀

  2. 添加网页的基本结构

    <!doctype html>
    <html><head><title>网页标题</title><meta charset="utf-8"></head><body>网页主体内容</body>
    </html>
    
    • 专业的开发工具支持HTML代码补全功能,如VSCode中,创建好HTML文件后可以输入英文感叹号(!) html:5按tab键 补全页面基本结构(不同的开发工具补全的基本结构有细微的差别,可以忽略)。
  3. 标签嵌套

    • 在双标签中书写其他标签,称为标签嵌套
  • 嵌套结构中,外层元素称为父元素,内层元素称为子元素;
    • 多层嵌套结构中,所有外层元素统称为祖先元素,内层元素统称为后代元素
    • 平级结构互为兄弟元素

4. 注释

  • 介绍

    • 用于对代码的描述与说明,便于阅读与理解
  • 特点

    • 只在编辑文档时可见,在浏览器展示页面时并不会显示
  • 语法

    <!-- 此处为注释 -->
    

5. 基本结构解析

<!-- 文档类型声明,便于浏览器正确解析标签及渲染样式 -->
<!doctype html> <!-- HTML文档开始的标志 -->
<html> <!-- 头部设置,可在head中设置网页标题,网页选项卡图标,引入外部的资源文件,设置网页相关信息等 --><head><!-- 设置网页标题,显示在浏览器选项卡上方 --><title>网页标题</title><!-- 设置网页字符编码(默认) --><meta charset="utf-8"> <!-- 设置文档与外部资源的链接 --><link rel="stylesheet" href="#"><!-- 设置标签的样式 --> <style></style></head><!-- 网页主体部分,显示网页主要内容 --><body> 网页主体内容</body><!-- 文档结束-->
</html>
  • 说明
    • <!DOCTYPE html> 声明浏览器使用哪种HTML版本(HTML5)来显示网页。
    • <head lang=“en”> en 就是英文网页, 定义为 zh-CN 就是中文网页(定义成en的文档也可以显示中文,定义成zh-CN的文档也可以显示英文 )
    • <meta charset=“utf-8”> 便计算机能够识别和存储各种文字,常用:GB2312、GBK等

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

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

相关文章

基于SpringBoot+Vue+uniapp微信小程序的教学质量评价系统的详细设计和实现

项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…

流批一体计算引擎-17-[Flink]中的Table API常用算子

文章目录 1 概述&示例1.1 data.csv1.2 代码示例2 操作算子2.1 扫描、投影和过滤2.1.1 from_path【流批】2.1.2 from_elements【流批】2.1.3 select【流批】2.1.4 alias【流批】2.1.5 where【流批】2.1.6 filter【流批】2.2 列操作2.2.1 add_columns【流批】2.2.2 add_or_re…

Linux 性能调优

在 Linux 系统上进行性能调优时&#xff0c;通常需要从多个方面入手。可以针对 CPU、内存、磁盘 I/O、网络以及系统进程进行优化&#xff0c;以提高系统的整体性能。以下是一些常见的 Linux 性能调优方法和工具&#xff0c;帮助你提高系统效率。 1. CPU 调优 1.1. 监控 CPU 使…

决策树(1)

原理 基础概念 决策树属于判别模型。 决策树算法属于监督学习方法。 决策树是一种树状结构&#xff0c;通过做出一系列决策&#xff08;选择&#xff09;来对数据进行划分&#xff0c;这类似于针对一系列问题进行选择。 决策树的决策过程就是从根节点开始&#xff0c;测试待分…

SpringBoot中的对象

BeanFactory 是 Spring 框架的核心接口之一&#xff0c;用于管理和创建 Bean。它提供了一种机制&#xff0c;通过配置文件或注解来定义和实例化 Java 对象&#xff0c;并将这些对象存储在一个容器中&#xff0c;以便在应用程序的其他部分进行使用。 主要功能 管理 Bean 的生…

UNION 联合查询

1.UNION ALL联合查询 同样为了演示方便&#xff0c;先向 teacher 表插入多条测试数据&#xff1a; INSERT INTO teacher (name,age,id_number,email) VALUES (姓名一,17,42011720200604077X,NULL), (姓名二,18,42011720200604099X,123qq.com), (姓名三,19,42011720200604020X…

007、链表的回文结构

0、题目描述 链表回文结构 1、法1 一个复杂的问题可以拆解成几个简单的问题&#xff0c;找中间节点和逆置链表&#xff08;翻转链表&#xff09;之前都做过。 class PalindromeList { public://1、找中间节点ListNode* FindMid(ListNode* A){if (A nullptr || A->next …

ConcurrentHashMap 存储机制(源码解析)

源码系列开更啦 &#x1f970;&#x1f970; 目录 1. 初始化 1.1. 无参 1.2. 带参 2. 存储操作 2.1. 计算下标 2.2. 初始化数组 2.3. 将数据插入到数组中 2.4. 协作扩容 2.5. 将数据插入到链表 2.6. 将数据插入到红黑树 2.7. 链表树化操作 1. 初始化 1.1. 无参 如…

【ROS2】订阅手柄数据,发布运动命令

1、相关消息 sensor_msgs::msg::Joy:用来描述手柄控制器数据 geometry_msgs::msg::Twist :用来描述物体运动时的线速度和角速度 参见博客: 【ROS2】geometry_msgs::msg::Twist和sensor_msgs::msg::Joy 2、订阅和发布 2.1 定义、创建订阅者和发布者 订阅手柄的按键、摇杆…

流程图 LogicFlow

流程图 LogicFlow 官方文档&#xff1a;https://site.logic-flow.cn/tutorial/get-started <script setup> import { onMounted, ref } from vue import { forEach, map, has } from lodash-es import LogicFlow, { ElementState, LogicFlowUtil } from logicflow/core …

前端学习---(2)CSS基础

CSS 用来干什么&#xff1f; CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。 css语法: 选择器{ 属性名: 属性值; 属性名: 属性值; } h1 {color: red;font-size: 5em; }h1: 选择器 color: 属性 冒号之前是属性&#xff0c;冒号之后是值。 font-size…

Jmeter监控服务器性能

目录 ServerAgent 安装 打开Jmeter ServerAgent 在Jmeter上监控服务器的性能比如CPU&#xff0c;内存等我们需要用到ServerAgent&#xff0c;这里可以下载我分享 ServerAgent-2.2.3.zip 链接: https://pan.baidu.com/s/1oZKsJGnrZx3iyt15DP1IYA?pwdedhs 提取码: edhs 安装…

[云] Project Analysis

项目要求分析&#xff1a; 开放性选题&#xff1a; 主题范围&#xff1a;任何与云计算系统相关的主题。项目类型&#xff1a;可以是技术、商业或研究项目。团队规模&#xff1a;最多可组成三人小组。 示例主题&#xff1a; 分析公共云数据&#xff1a;例如&#xff0c;AWS公共数…

System.Text.Json类库进行json转化时ValueKind:Object问题

当你的使用的Json库是System.Text.Json&#xff0c;而不是Newtonsoft.Json库的时候&#xff0c;你可能遇到以下问题及其解决办法。通常的解决办法是进行一些对应的配置。此外就需要根据情况使用自定义转换器实现你的需求。以下是通常遇到的使用自定义转换器解决的例子: Q1.当遇…

FPGA图像处理之均值滤波

文章目录 一、什么是图像滤波&#xff1f;1.1 噪声类型1.2 滤波类型 二、均值滤波原理2.1 3*3窗口滑动过程2.2 图像扩展 三、Matlab实现均值滤波四、FPGA实现均值滤波4.1 生成 3*3 矩阵4.2 仿真3*3矩阵4.3 计算均值4.4 仿真均值滤波 一、什么是图像滤波&#xff1f; 图像滤波是…

调整Android板子的分辨率

Android板子通过HDMI连接外屏发现很模糊&#xff0c;先用以下命令查询下板子的分辨率&#xff1a; adb shell wm size 发现板子目前的分辨率是&#xff1a; Physical size: 800x480 调整分辨率命令行&#xff1a; adb shell wm size 1920x1080 注意&#xff1a;系统是roo…

得物App3D创新应用引关注,世界设计之都大会启幕

近日&#xff0c;2024世界设计之都大会&#xff08;WDCC&#xff09;在上海盛大启幕。此次大会以“设计无界 新质生长”为主题&#xff0c;汇聚了全球设计领域的精英与前沿成果&#xff0c;展现了设计作为新质生产力的巨大潜力。主场展览占据了整整3个楼面&#xff0c;总面积达…

Python字符串格式化方法format()

字符串.format(变量1, 变量2, ...)使用大括号{}作为占位符,格式化的两种方法&#xff0c;参数序号法和关键字法&#xff0c;即在大括号中填入关键字还是序号&#xff0c;代码举例 # 参数序号法 print("姓名{0}&#xff0c;班级{1}&#xff0c;年龄{2}".format(张三,…

C#学习笔记(十)

C#学习笔记&#xff08;十&#xff09; 第七章 对象的构造方法与实例方法一、对象的构造方法1. 构造方法初识2. 构造方法的创建3. this关键字4. 构造方法的规范和重载4.1 构造方法的规范 5. 对象初始化器5.1 对象初始化器和构造方法的区别 二、对象的实例方法1. 简单应用2.实例…

代码随想录算法训练营第二天(补) | 滑动窗口、模拟、前缀和

目录 3.4 长度最小的子数组 3.5螺旋矩阵II 3.6 区间和 文章讲解&#xff1a;[58. 区间和 | 代码随想录 3.4 长度最小的子数组 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 文章讲解&#xff1a;代码随想录 视频讲解&#xff1a;拿下滑动窗口&#xff…