自学前端——HTML篇

HTML标签

’HTML‘全程是‘hypertext Markup langage(超文本标记语言) HTML通过一系列的’标签（也称为元素）‘来定义文本、图像、链接。HTML标签是由尖括号包围的关键字。

标签通常成对存在，包括开始标签和结束标签（也称为双标签），内容位于两个标签之间，例如：

<p>这是一个段落。</p>
<h1>这是一个标题。</h1>
<a href="#">这是一个超链接。</a>

 除了双标签，也存在单标签，例如：

<input type="text"
<br>
<hr>

区别：单标签用于没有内容的元素，双标签用于有内容的元素。

HTML文件结构

<!-- 这里放置文档的元信息 -->
<!DOCTYPE html>//告诉浏览器这是一个HTML文件
<html>//HTML标签对，也是根元素，HTML的起始点也是文档的最外层容器，包含整个文档的结构<head>文档的头部，包含了文档的原信息<!-- 这里放置文档的元信息 --><title>文档标题</title>文档标题<meta charset="UTF-8">文档编码格式<!-- 连接外部样式表或脚本文件等 --><link rel="stylesheet" type="text/css" href="styles.css">外部样式表css文件<script src="script.js"></script>外部样式表js文件</head><body>实际显示浏览器页面的内容比如文本，图像，链接等<!-- 这里放置页面内容 --)<h1>这是一个标题</h1><p>这是一个段落。</p >这是一个链接<!-- 其他内容 --></body>
</html>//HTML标签对，也是根元素

各个标签的含义

</head><body><h1>一级标题标签</h1><h2>二级标题标签</h2><h3>三级标题标签</h3><h4>三级标题标签</h4><h5>四级标题标签</h5><p>这是一个段落标签</p><p>更改文本样式：<b>字体加粗</b>、<i>斜体</i>、<u>下划线</u>、<s>删除线</s></p><ul>/无序列表<li>无序列表元素一</li><li>无序列表元素二</li><li>无序列表元素三</li></ul><ol>//有序列表<li>有序列表元素一</li><li>有序列表元素二</li><li>有序列表元素三</li></ol><h1>table row</h1><h2>table date</h2><h3>table header</h3><table border="1"> //制作表格 <tr><th>列标题1</th><th>列标题2</th><th>列标题3</th></tr><tr><td>元素1</td><td>元素2</td><td>元素3</td></tr><tr><td>元素11</td><td>元素12</td><td>元素13</td></tr><tr><td>元素21</td><td>元素22</td><td>元素23</td></tr></table></body></html>

HTML属性

属性在HTML中起到非常重要的作用，它们用于定义元素的行为外观，以及与其他元素的关系

基本语法：

<开始标签 属性名=“属性值”>

每个HTML元素可以具有不同的属性

<p id="describe" class="section">这是一个段落标签</p>
<a href="https://www.baidu.com">这是一个超链接</a>

属性名称不区分大小写，属性值对大小写敏感

<img src="example.jpg" alt="">
<img SRC="example.jpg" alt="">
<img src="EXAMPLE.JPG" alt="">
<!--前两者相同，第三个与前两个不一样-->
属性描述
class为HTML元素定义一个或多个类名（类名从样式文件引入）
id定义元素唯一id
style规定元素的内行样式

例如：

<h1 id="title"></h1>
<div class="nav-bar"></div>
<h2 class="nav-bar"></h2>

<a>标签常用于创建链接到其他的网页或者位置

href属性定义了这个链接到的目标，可以是其他网页的URL文件的路径、电子邮箱地址、手机号等。

target属性定义链接的打开方式，

_self是一个默认值表示链接在当前窗口或者标签页中打开

_blank表示链接将会在新的窗口或者标签页打开

_parent表示链接在副窗口或者副框架中打开

_top表示链接在顶层窗口或者顶层框架中打开

例如：

    <a href="https://docs.geeksman.com">这是一个超链接</a> <br> //换行标签  <a href="https://docs.geeksman.com"target="_blank">这是二个超链接</a><br><a href="https://docs.geeksman.com"target="_self">这是三个超链接</a><br><a href="https://docs.geeksman.com"target="_parent">这是四个超链接</a><br><a href="https://docs.geeksman.com"target="_top">这是五个超链接</a><hr>//水平分割线

img图片标签

src属性定义了要显示图像文件的路径或者URL，可以是文件的相对路径、绝对路径，也可以是一个URL。

alt属性用于定义图像的这个替代文本，图片如果无法加载，浏览器就会显示出来alt属性中指定的文本。

设置图像的宽高

width属性设置宽度：height属性设置高度。

   	<img src="logo.jpg" alt=""width="500"height="400"><hr><img src="log.jpg" alt="该图片无法显示"><hr><img src="" alt="">

HTML区块 - 块元素与行内元素（HTML 重要概念，学习CSS的前置内容）

快元素（block）

块级元素通常用于组织和布局页面的主要结构和内容，例如段落、标题、列表、表格等。它们用于创建页面的主要部分，将内容分隔成逻辑块。

快级元素通常会从新行开始，并占据整行的宽度，因此它们会在页面上呈现为一块独立的内容块。

可以包含其他块级元素和行内元素。

常见的块级元素包括<div>，<p>，<h1>到<h6>，<ul>，<ol>，<li>，<table>，<from>等。

行内元素（inline）

行内元素通常用于添加文本样式或为文本中的一部分应用样式。它们可以在文本中插入小的元素，例如超链接、强调文本等。

行内元素通常在同一行内呈现，不会独占一行。

它们只占据其内容所需的宽度，而不是整行的宽度。

行内元素不会包含块级元素，但可以包含其他行内元素。

常见的行内元素包括<span>，<a>，<strong>，<em>，<img>，br，<input>等。

div标签是一个块级标签通常用于创建一个可以包含其他HTML元素的容器块，没有任何语意，仅用于组织内容，创建页面的布局结构。

比如用div标签创建网页不同的部分，例如：页眉、导航栏、侧边栏、中间的内容区域、页角。

<div class="nav">//导航栏<a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a><a href="#">链接4</a><a href="#">链接5</a></div><div class="content">//主题内容区域<h1>文章标题</h1><p>文章内容</p> <p>文章内容</p> <p>文章内容</p> <p>文章内容</p> <p>文章内容</p> </div>

span标签相对于没有特殊元素的a标签和img标签，主要作用就是把一小部分文本给包装起来以便于它们使用样式、CSS，或者使用 JS 行为，span为行内元素，只会独占一行，只会占据它内容所需的一个宽度。

例如

 <span>这是第 1 个 span 标签</span><span>这是第 2 个 span 标签</span><span>这是第 3 个 span 标签</span><span>这是第 4 个 span 标签</span><span>这是第 5 个 span 标签</span><hr><span>链接点击这里 <a href="#">链接</a>   </span

总结：div标签通常用于创建块级容器以便于组织页面的结构和布局，而span标签，用于内联样式化文本给文本的一部分应用样式或者是标记使用这两个标签通常是与CSS和 JS 一起使用的，这样能实现更加复杂的页面布局和样式化。

HTML表单

form是表单的容器

action表示我们提交标签的时候，向何处发送我们的数据，action的属性值也就是URL,需要服务器也就是后端提供给我们的API

‘#’表示不跳转，锚点占位的作用

input是一个单标签

type属性规定了input元素的类型

placeholder属性的作用是在这个属性值里面填写你想要让它在文本框中显示的内容。给用户填写字段的标识

value属性的作用就是规定我们这个input元素的值

label标签专门为input元素做标记的标签，作用与span标签差不多，仅限于和input对应使用

radio单选，checkbox多选 id唯一 ，class不唯一

for属性是可以将label标签给绑定到input元素，一般input中的for属性与input中id所对应的，id对于每个元素每个标签都是唯一的

submit 显示提交，提交表单的数据。

<form><label for="username">用户名：</label><input type="text" id="username" placeholder="请输入用户名"><br><br><label for="pwd">密码：</label><input type="password" id="pwd" placeholder="请输入内容"><br><br><label >性别：</label><input type="radio" name="gender"> 男<input type="radio" name="gender"> 女<input type="radio" name="gender"> 其他<label>爱好 :</label><input type="checkbox" name="hobby"> 唱歌<input type="checkbox" name="hobby"> 跳舞<input type="checkbox" name="hobby"> rap<input type="checkbox" name="hobby"> 篮球<br><br>        <input type="submit" value="上传"></form>

注：刚开始接触前端，希望有大佬提出建议，本人虚心学习。

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

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

相关文章

ModbusTcp和ModbusRtu协议

ModbusTcp和ModbusRtu协议

1、功能码的通信格式modbus rtu （1）读设备的寄存器（保持寄存器）： 计算机发送命令：[设备地址] [命令号03] [起始寄存器地址高8位] [低8位] [读取的寄存器数高8位] [低8位] [CRC校验的低8位] [CRC校验的高8位] 例：[01][03][00][00][00][10][CRC低][CRC高] 意义如下： &l…
阅读更多...
安卓中使用ttf字体文件

安卓中使用ttf字体文件

官方文档中提供的方法要设备能访问google&#xff1f; 官方方法 直接下载字体的fft文件 我要使用的是lexend 需要的格式可以在里面搜索 使用下载的ttf文件 解压出来 可以单独使用static里面的&#xff0c;里面是直接的lexend的各种格式 但是我这里直接使用Lexend-Vari…
阅读更多...
odoo的采购询价单，默认情况下显示‘draft‘,‘sent‘,‘purchase‘，请问什么情况下才会显示‘to approve‘?

odoo的采购询价单，默认情况下显示‘draft‘,‘sent‘,‘purchase‘，请问什么情况下才会显示‘to approve‘?

odoo的采购询价单&#xff0c;默认情况下显示’draft’,‘sent’,‘purchase’&#xff0c;请问什么情况下才会显示’to approve’? 见下图&#xff1a; 这与操作人员的角色是相关的&#xff1a; 当操作人员是群组 “采购 / 用户”时&#xff0c;点击“confirm order/确认订…
阅读更多...
Day59 代码随想录打卡|二叉树篇---把二叉搜索树转换为累加树

Day59 代码随想录打卡|二叉树篇---把二叉搜索树转换为累加树

题目&#xff08;leecode T538&#xff09;&#xff1a; 给出二叉 搜索 树的根节点&#xff0c;该树的节点值各不相同&#xff0c;请你将其转换为累加树&#xff08;Greater Sum Tree&#xff09;&#xff0c;使每个节点 node 的新值等于原树中大于或等于 node.val 的值之和。…
阅读更多...
vuex的深入学习[基于vuex3]----篇(二)

vuex的深入学习[基于vuex3]----篇(二)

store对象的创建 store的传递图 创建语句索引 创建vuex的语句为new Vuex.Store({…})Vuex的入口文件是index.js,store是index.js导出的store类store类是store.js文件中定义的。 Store的构造函数constructor 判断vuex是否被注入&#xff0c;就是将vue挂载在window对象上&am…
阅读更多...
【算法】二叉树 - 理论基础

【算法】二叉树 - 理论基础

1.种类 1.1 满二叉树 只有度为0和2的节点&#xff0c;且度为0的节点都都在同一层。深度为k&#xff0c;有2^k-1个节点。 1.2 完全二叉树 在完全二叉树中&#xff0c;除了最底层节点可能没填满外&#xff0c;其余每层节点数都达到最大值&#xff0c;并且最下面一层的节点都…
阅读更多...
【QML】用 Image(QQuickPaintedItem) 显示图片

【QML】用 Image(QQuickPaintedItem) 显示图片

大体功能&#xff1a; 频繁地往界面推送图片&#xff0c;帧率达到视频效果。捕获画布上的鼠标事件和键盘事件。 代码如下&#xff1a; // DrawImageInQQuickPaintedItem.pro 代码如下&#xff1a; QT quick# You can make your code fail to compile if it uses deprecated…
阅读更多...
常说的云VR是什么意思？与传统vr的区别

常说的云VR是什么意思？与传统vr的区别

虚拟现实&#xff08;Virtual Reality&#xff0c;简称VR&#xff09;是一种利用计算机技术模拟产生一个三维空间的虚拟世界&#xff0c;让用户通过视觉、听觉、触觉等感官&#xff0c;获得与现实世界类似或超越的体验。VR技术发展历程可追溯至上世纪&#xff0c;经历概念提出、…
阅读更多...
某大厂程序员吐槽：离职交接时，新人被工作量吓退，领导却污蔑我故意劝退新人，我怒晒工作短信反击证明，新人看了后也决定走人了！

某大厂程序员吐槽：离职交接时，新人被工作量吓退，领导却污蔑我故意劝退新人，我怒晒工作短信反击证明，新人看了后也决定走人了！

一位知名大公司的程序员分享了他离职时的遭遇&#xff1a;在交接工作时&#xff0c;新进的同事因工作量过大而感到压力&#xff0c;但出乎意料的是&#xff0c;他们的领导却指责我故意吓唬新人。为了证明自己的清白&#xff0c;我晒出了工作短信作为反击&#xff0c;结果连新人…
阅读更多...
Linux系统编程--软/硬连接

Linux系统编程--软/硬连接

真正找到磁盘上文件的并不是文件名&#xff0c;而是inode。 其实在linux中可以让多个文件名对应于同一个inode。 命令&#xff1a; 软连接&#xff1a;ln -s 原文件名 新文件名 硬链接&#xff1a;ln 原文件名 新文件名 删除链接文件&#xff1a;unlink 文件名执行上面两条命令…
阅读更多...
matplotlib之常见图像种类

matplotlib之常见图像种类

Matplotlib 是一个用于绘制图表和数据可视化的 Python 库。它支持多种不同类型的图形&#xff0c;以满足各种数据可视化需求。以下是一些 Matplotlib 支持的主要图形种类&#xff1a; 折线图&#xff08;Line Plot&#xff09;&#xff1a; 用于显示数据随时间或其他连续变量的…
阅读更多...
Git使用过程中涉及的几个区域

Git使用过程中涉及的几个区域

一. 简介 Git 是一个开源的分布式版本控制系统&#xff0c;可以有效、高速的处理从很小到非常大的项目版本管理&#xff0c;也是 Linus Torvalds 为了帮助管理 Linux内核开发而开发的一个开放源码的版本控制软件。 本文简单了解一下 git涉及的几个部分&#xff0c;以及git 常…
阅读更多...
vue登陆密码加密，java后端解密

vue登陆密码加密，java后端解密

前端 安装crypto-js npm install crypto-js加密 //引入crypto-js import CryptoJS from crypto-js;/** ---密码加密 start--- */ const SECRET_KEY CryptoJS.enc.Utf8.parse("a15q8f6s5s1a2v3s"); const SECRET_IV CryptoJS.enc.Utf8.parse("a3c6g5h4v9sss…
阅读更多...
基于网络搜索的长篇问答能力优化：FoRAG

基于网络搜索的长篇问答能力优化：FoRAG

检索增强生成&#xff08;RAG&#xff0c;Retrieval Augmented Generation&#xff09;可以利用搜索引擎检索技术来提升长篇问答质量&#xff0c;因而在 QA 任务中广受欢迎。尽管有多种开源方法和网络增强的商业系统如 Bing Chat 出现&#xff0c;但生成长篇答案的事实性和逻辑…
阅读更多...
ruoyi添加自己的菜单

ruoyi添加自己的菜单

先把自己自定义的view填写好 在菜单管理模块 因为我已经新增过&#xff0c;所以就看看我填的啥就行了 我发现一个问题&#xff0c;路由地址可以填index2或者scooldemo/index2都可以&#xff08;这个包含了文件夹路径&#xff09;&#xff0c;反正组件路径一定要填对就可以了。 …
阅读更多...
【UML用户指南】-21-对基本行为建模-活动图

【UML用户指南】-21-对基本行为建模-活动图

目录 1、概念 2、组成结构 2.1、动作 2.2、活动节点 2.3、控制流 2.4、分支 2.5、分岔和汇合 2.6、泳道 2.7、对象流 2.8、扩展区域 3、一般用法 3.1、对工作流建模 3.2、对操作建模 一个活动图从本质上说是一个流程图&#xff0c;展现从活动到活动的控制流 活动图…
阅读更多...
六套Matlab人脸识别源码 可运行 (含PCA Adaboost DLDA算法等）

六套Matlab人脸识别源码 可运行 (含PCA Adaboost DLDA算法等）

以PCA人脸识别为例： 随着社会发展与科技进步，人们对生活和工作环境有了更高的要求。大家对外界的需求不再局限于刚性的满足，追求目标逐渐上升到对家居和办公智能化、自动化的台阶上。与此同时，人脸识别技术越来越广泛的应用于某些重要场所的身份检测和确认环节[1]。在公共…
阅读更多...
MySQL命名规范(自用)

MySQL命名规范(自用)

MtySQL命名规范 基本通用规范 1.【推荐】关键字必须大写 所有关键字必须大写&#xff0c;如&#xff1a;INSERT、UPDATE、DELETE、SELECT及其子句&#xff0c;IF……ELSE、CASE、DECLARE等 2.【强制】字段和建表必须写备注 COMMENT写备注 3.【强制】字母数字下划线 采用26个英…
阅读更多...
国产MCU芯片（2）：东软MCU概览及触控MCU

国产MCU芯片（2）：东软MCU概览及触控MCU

前言： 国产芯片替代的一个主战场之一就是mcu，可以说很多国内芯片设计公司都打算或者已经在设计甚至有了一款或多款的量产产品了，这也是国际大背景决定的。过去的家电市场、过去的汽车电子市场，的确国产芯片的身影不是很常见，如今不同了，很多fabless投身这个行业，一种是…
阅读更多...
OpenGL3.3_C++_Windows(18)

OpenGL3.3_C++_Windows(18)

接口块&#xff1a; glsl彼此传输数据&#xff0c;通过in / out&#xff0c;当更多的变量&#xff0c;涉及数组和结构体接口块(Interface Block)类似struct&#xff0c;in / out 块名{……}实例名 Uniform缓冲对象&#xff1a; 首先理解uniform Object&#xff1a;负责向gl…
阅读更多...
最新文章

Copyright @ 2022~2023