前端HTML基础笔记

HTML(HyperText Markup Language,超文本标记语言)是一种用于创建网页的标准标记语言。它通过一系列的元素(或称为标签)来定义网页的结构和内容。HTML文档由一系列的元素组成,这些元素可以包含文本、图片、链接、表格、列表等。
教程学习网站推荐:

  1. https://www.w3.org/
  2. https://developer.mozilla.org/zh-CN/docs/Web/HTML

在这里插入图片描述3. https://www.w3cschool.cn/tutorial
在这里插入图片描述

HTML的基本结构通常包括以下几个部分:

<!DOCTYPE html>:文档类型声明,告诉浏览器这是一个HTML5文档。
<html>:根元素,所有其他HTML元素都包含在其中。
<head>:包含了文档的元数据,如<title>(页面标题)、<link>(链接外部CSS文件)、<script>(嵌入或引用外部JavaScript文件)等。
<body>:包含了网页的可见内容,如文本、图片、视频等。
一个简单的HTML页面示例如下:

<!DOCTYPE html> <!--html版本 当先这个是html5的版本,为最新版本,简单,大小写不敏感-->
<html lang="en"><!--语言-->
<head><meta charset="UTF-8">  <!--编码格式 对应的浏览器的解码格式,编码错误数据丢失,解码错误数据丢失--><meta name="viewport" content="width=device-width, initial-scale=1.0"><!--浏览器的设置--><title>My First Web Page</title><!--标题,就是显示在浏览器标签页上的内容-->
</head>
<body>
<!--浏览器页面真正显示的内容--><h1>Hello, World!</h1><!--一级标题,总共有6个对应的是h1~h6,前面三个常用后面三个不常用--><p>This is my first HTML page.</p><!--段落标签-->
</body>
</html>

在这个示例中,<h1> 标签定义了一个标题,<p> 标签定义了一个段落。
HTML是构建网页的基础,但它通常需要与CSS(层叠样式表)和JavaScript一起使用,以创建具有丰富样式和交互性的网页。
在HTML中,块级元素(block-level elements)和行内元素(inline elements)是两种不同的元素类型,它们在页面上的表现和布局方式有所不同。

块级元素(Block-level elements):通常用于创建一个“块”或区域,它们会在页面上占据一整行,并且可以设置宽度、高度、对齐方式等属性。常见的块级元素包括<div><section><article><header><footer><aside><ul><ol><li><table><p>等。

行内元素(Inline elements):通常用于文本内容,并且不会创建新的块区域。它们的大小仅由其内容决定,不能设置宽度和高度。常见的行内元素包括<span><a><img><strong><em><input>等。

块级标签包裹行级标签
块级元素可以包裹行内元素,。实际上,大多数HTML结构都是由块级元素作为容器,里面包含行内元素或其他块级元素。例如:

<div><a href="#">这是一个链接</a><img src="image.jpg" alt="示例图片"><strong>这是加粗文本</strong>
</div>

在这个例子中,

是一个块级元素,它包裹了三个行内元素: <a><img><strong>
理论上,行内元素可以包含块级元素,但这种行为在HTML规范中并不推荐,因为它可能会导致不符合预期的布局效果。在某些情况下,浏览器可能会将行内元素内的块级元素视为非法内容,并对其进行特殊处理,这可能导致不一致的渲染结果。

为什么这样做?这么做有什么好处?
结构化和语义化:使用块级元素作为容器可以帮助你更好地组织和结构化你的HTML文档,使其更易于维护和理解。语义化很重要,这里关乎浏览器对于你网站的理解,也就是影响到你最终你网站的呈现
样式化:块级元素可以更容易地应用CSS样式,如宽度、高度、边距、填充等,这使得它们成为控制布局的理想选择。
嵌套和布局:块级元素可以嵌套其他块级或行内元素,这为创建复杂的页面布局提供了灵活性。
注意事项
不要滥用块级元素:虽然块级元素可以包裹行内元素,但过度使用块级元素可能会导致不必要的布局问题和性能问题。合理使用行内元素和块级元素,根据内容和布局需求选择合适的元素。
语义化HTML:尽量使用具有明确语义的HTML标签,这不仅有助于搜索引擎优化(SEO,想成为一个优秀的前端,SEO优化是必须要了解和掌握的技能之一),也使得代码更易于理解和维护。
总之,块级元素包裹行内元素是HTML中常见的做法,它有助于创建结构化、语义化和可维护的网页。

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

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

相关文章

LEAP模型在能源环境发展、碳排放建模预测及分析中实践应用

在国家“3060”碳达峰碳中和的政策背景下&#xff0c;如何寻求经济-能源-环境的平衡有效发展是国家、省份、城市及园区等不同级别经济体的重要课题。根据国家政策、当地能源结构、能源技术发展水平以及相关碳排放指标制定合理有效的低碳能源发展规划需要以科学准确的能源环境发…

培训第九周(部署k8s基础环境)

一、前期系统环境准备 1、关闭防火墙与selinux [rootk8s-master ~]# systemctl stop firewalld[rootk8s-master ~]# systemctl disable firewalldRemoved symlink /etc/systemd/system/multi-user.target.wants/firewalld.service.Removed symlink /etc/systemd/system/dbus-o…

机器学习-神经网络:循环神经网络(RNN)详解

引言 在当今人工智能(AI)和深度学习(DL)领域,循环神经网络(RNN)作为一种专门处理序列数据的模型,具有不可忽视的重要性。RNN 的设计目标是模拟和处理序列中的时间依赖关系,使其成为许多应用场景的理想选择,如自然语言处理(NLP)、时间序列预测和语音识别等。它不仅…

【C语言】插入排序、希尔排序——动图展示

目录 1. 插入排序1.1 基本概念1.2 实现思路1.3 代码部分 2. 希尔排序2.1 为什么会有希尔排序&#xff1f;2.2 基本概念2.3 实现思想1&#xff09;单组排序2&#xff09;多组排序 2.4 代码部分 3. 总结 1. 插入排序 1.1 基本概念 把待排序的记录逐个插入到一个已经排好序的有序…

[数据集][目标检测]电动车头盔佩戴检测数据集VOC+YOLO格式4235张5类别

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

在OpenEuler(欧拉)系统上用kubeadm部署(k8s)Kubernetes集群

一、OpenEuler(欧拉) 系统简介 openEuler 是开放原子开源基金会&#xff08;OpenAtom Foundation&#xff09;孵化及运营的开源项目&#xff1b; openEuler作为一个操作系统发行版平台&#xff0c;每两年推出一个LTS版本。该版本为企业级用户提供一个安全稳定可靠的操作系统。…

[数据集][目标检测]智慧农业草莓叶子病虫害检测数据集VOC+YOLO格式4040张9类别

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

10个好用的AI写作工具【亲测免费】

1. 光速写作 传送入口&#xff1a;http://u3v.cn/6hXWYa AI打工神器&#xff0c;一键生成文章&ppt 2. 讯飞写作 传送入口&#xff1a;http://m6z.cn/5ODiSw 3. 讯飞绘文 传送入口&#xff1a;https://turbodesk.xfyun.cn/?channelidgj3 4. AI排版助手 传送入口&#…

jenkins 安装

jenkins安装 jenkins官网 中文网址 安装设置 所有jenkins版本 内存512M以上&#xff0c;10Gb磁盘&#xff1b;安装jdk&#xff0c;需要java8以上下载较新的版本&#xff0c;否则安装插件时可能报错版本过低 # 搜索java yum search java | grep -iE "jdk"# 安装jd…

网络安全知识科普:什么是网络准入控制系统?有哪些?

在当今数字化时代&#xff0c;网络安全已成为企业和组织不可忽视的重要议题。随着远程工作模式的普及和物联网设备的增加&#xff0c;网络边界越来越模糊&#xff0c;传统防火墙已经不足以应对日益复杂的威胁环境。在这种背景下&#xff0c;网络准入控制系统(Network Access Co…

最多购买宝石数目

题目描述 橱窗里有一排宝石&#xff0c;不同的宝石对应不同的价格&#xff0c;宝石的价格标记为 gems[i] 0≤i<nn gems.length 宝石可同时出售0个或多个&#xff0c;如果同时出售多个&#xff0c;则要求出售的宝石编号连续; 例如客户最大购买宝石个数为m&#xff0c;购买…

Nginx 负载均衡+高可用 集群部署(Keepalived+LVS DR模式)

一、LVS负载均衡简介 1.1 LVS基本介绍 LVS&#xff08;Linux Virtual Server&#xff09;即Linux虚拟服务器&#xff0c;是由章文嵩博士主导开发的开源负载均衡项目&#xff0c;目前LVS已经被集成在Linux内核中。该项目在Linux内核中实现了基于IP地址的请求数据负载均衡调度方…

如何使用正则表达式替换字符串中的特定位置数字

如何使用正则表达式替换字符串中的特定位置数字 1、效果 把字符串中的第一个123替换掉: 2、代码 使用正则中的sub函数: re.sub(pattern,repl,string,count=0,flags=0) pattern:表示需要匹配的模式,即需要被替换的字符或字符串。 repl:表示替换后的字符串或函数,用于…

多目标应用:四种多目标优化算法(NSGA2、NSPSO、NSDBO、NSCOA)求解柔性作业车间调度问题(FJSP),MATLAB代码

一、柔性作业车间调度问题 柔性作业车间调度问题(Flexible Job Scheduling Problem, FJSP) 的描述如下&#xff1a;n个工件 { J , J 2 , . . , J n } \{J,J_2,..,J_n\} {J,J2​,..,Jn​}要在 m m m 台机器 { M 1 , M 2 , . . , M m } \{M_1,M_2,..,M_m\} {M1​,M2​,..,Mm​} …

spring 事物使用场景说明

事务使用场景。 在某些业务场景下&#xff0c;如果一个请求中&#xff0c;需要同时写入多张表的数据。为了保证操作的原子性&#xff08;要么同时成功&#xff0c;要么同时失败&#xff09;&#xff0c;避免数据不一致的情况&#xff0c;我们一般都会用到spring事务。 确实&am…

【Shiro】Shiro 的学习教程(五)之 SpringBoot 集成 Shiro + JWT

与 Spring 集成&#xff1a;与 Spring 集成 与 SpringBoot 集成&#xff1a;与 SpringBoot 集成 1、SpringBoot Shiro Jwt ①&#xff1a;引入 pom.xml&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-…

【网络安全】服务基础第二阶段——第三节:Linux系统管理基础----Linux用户与组管理

目录 一、用户与组管理命令 1.1 用户分类与UID范围 1.2 用户管理命令 1.2.1 useradd 1.2.2 groupadd 1.2.3 usermod 1.2.4 userdel 1.3 组管理命令 1.3.1 groupdel 1.3.2 查看密码文件 /etc/shadow 1.3.4 passwd 1.4 Linux密码暴力破解 二、权限管理 2.1 文件与目…

sping boot 基于 RESTful 风格,模拟增删改查操作

RESTful -> 增&#xff1a;post 删&#xff1a;delete 改: put 查: get RESTful 资源路径&#xff0c;一般以 s 复数结尾 以下是代码示例&#xff1a; package com.example.springboot.controller;import org.springframework.web.bind.annotation.*;RestControll…

Mac+Pycharm配置PyQt6教程

安装包 pip install PyQt6 PyQt6-tools #查看Qt版本 pip show PyQt6 pip show pyqt6-tools 配置扩展工具 QTD(界面设计) Program&#xff1a;/Users/wan/PycharmProjects/NewDemo/venv/lib/python3.11/site-packages/qt6_applications/Qt/bin/Designer.app Working directo…

虚拟机ubuntu配置opencv和opencv_contrib

前期准备 1.下载opencv和opencv_contrib源码 opencv-4.6.0&#xff1a;https://opencv.org/releases/ opencv_contrib-4.6.0&#xff1a;https://github.com/opencv/opencv_contrib 在ubuntu直接下载或者在window上下好传到虚拟机里都可以 自己找个地方把他们解压&#xf…