当前位置：首页 > news >正文

自学前端第一天

news 2025/9/8 12:01:03

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>

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

自学前端第一天

HTML标签

HTML文件结构

HTML属性

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

HTML表单

相关文章：

自学前端第一天

SQL Server几种琐

redis 一些笔记1

【计网复习】应用层总结（不含HTTP和错题重点解析）

carbondata连接数优化

云和运维(SRE)的半生缘-深读实证02

java基础操作5——java自定义获取任意年、月、日的起始和结束时间

【Java04】引用变量数组初始化的内存机制

基于JSP的足球赛会管理系统

博客摘录「 AXI三种接口及DMA DDR XDMA介绍（应用于vivado中的ip调用）」2024年6月10日

Bigtable： A Distributed Storage System for Structured Data

RAG下的prompt编写探索

【计算机组成原理】指令系统考研真题详解之拓展操作码！

北航第六次数据结构与程序设计作业（查找与排序）选填题

Optional详解和常用API

Unity 3D 物体的Inspector面板

闪烁与常亮的符号状态判断机制（状态机算法）

Hyper-V如何将文件复制到虚拟机？教您3个简单的方法！

Vue主要使用-03

LoadBalance客户端负载均衡

IDEA运行Tomcat出现乱码问题解决汇总

【Oracle APEX开发小技巧12】

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

OkHttp 中实现断点续传 demo

MySQL 8.0 OCP 英文题库解析（十三）

Swagger和OpenApi的前世今生

深度学习水论文：mamba＋图像增强

【Linux系统】Linux环境变量：系统配置的隐形指挥官

Chromium 136 编译指南 Windows篇：depot_tools 配置与源码获取（二）

LOOI机器人的技术实现解析：从手势识别到边缘检测