一篇文章带你快速学习前端之HTML
https://i-blog.csdnimg.cn/blog_migrate/50175a8cb7fcd6935a4b84f6906c219e.gif#pic_center你好，我是安然无虞。
https://i-blog.csdnimg.cn/blog_migrate/f758308c2fce20f249517b6f3f77f331.gif#pic_center
网页与前端
学习前端之前, 我们首先得明白网页与前端之间的关系, 前端是构建网页的一部分, 负责用户在浏览器中看到和与之交互的内容. 以下是它们之间的关系的扼要说明:
[*]网页: 网页是浏览器中呈现内容的文档或页面. 通常使用HTML (Hypertext Markup Language) 编写, HTML 界说了页面的结构和内容, 包括文本、图像、链接等. 网页通常还包括 CSS (Cascading Style Sheets) 用于界说页面的样式和结构, 以及 JavaScript 用于添加交互性和动态功能.
[*]前端: 前端开发是创建页面的过程, 它涵盖了 HTML、CSS和 JavaScript 的开发. 前端开发职员负责将 UI 计划的页面转化为可在浏览器中渲染的现实页面.
[*]HTML: HTML是网页的骨架, 界说了页面的结构, 包括标题、段落、图像、链接等.
[*]CSS: CSS用于控制页面的样式, 包括字体、颜色、间距、结构等. 它使网页看起来漂亮且同等.
[*]JavaScript: JavaScript是一种编程语言, 用于添加交互功能. 前端开发职员使用 JavaScript 来创建动态元素、处理用户输入、与服务通讯等, 以提供更丰富的用户体验.
总之, 页面是通过前端开发来创建和维护的, 前端技术包括HTML、CSS和 JavaScript, 它们共同构建了用户在浏览器中看到和与之交互的内容. 前端开发的目的是提供具有吸引力、易用性和高性能的网页.
相比于后端而言, 前端更容易入门, 只要掌握了 HTML、CSS、JavaScript, 就可以开发一些简单的页面了.
HTML界说了网页的结构和内容, CSS控件网页的样式和表面, JavaScript增强网页的交互性和动态性.
我们可以这么理解:
HTML 是网页的结构, CSS 是网页的表面, JavaScript 是网页的行为.
随着技术的进步, 前端开发社区开发了许多框架和库, 如Vue、React、Angular等. 这些框架简化了前端开发流程, 提供了组件化开发, 状态管理和路由等功能, 使开发更高效.
HTML
HTML (Hypertext Markup Language) 中文名就是 超文本标记语言, 用于创建网页的结构和内容.
HTML是Web页面的基础, 它描述了页面的语义结构, 使浏览器能够准确的显示和解释内容. 它使用一些列的标签(也称为元素), 来界说文本、图像、表格等在网页上的排布和呈现方式.
HTML 标签是由尖括号包围的关键字, 例如:
<p>这是一个段落.</p>
在HTML中, 标签用于界说和包围网页中的各个元素. 标签分为两种主要范例: 单标签和双标签.
[*]单标签:
[*]单标签通常用于表示没有内容的元素, 例如图像、换行、横线等.
[*]它们以自封闭的方式出现, 不必要闭合标签, 由于它们没有内部内容.
[*]单标签的典型形式是<tagname>, 其中 tagname 是标署名称. 示例: <img src='image.jpg' />表示插入一张图片, <br>表示换行
[*]双标签:
[*]双标签用于界说包含内容的元素, 例如段落、标题、列表等.
[*]双标签由两部分组成: 开始标签和结束标签
[*]开始标签用于界说元素的起始位置, 结束标签用于界说元素的结束位置.
[*]在开始标签和结束标签之间可以包含元素的内容. 示例: <p>这是一个段落. </p>表示一个段落元素, 其中<p>是开始标签, </p>是结束标签, 之间的文本是该段落的内容.
相识了 HTML 的标签之后, 我们再来相识 HTML 的文件结构, 一个 HTML 文档通常由以下部分组成:
<!DOCTYPE html>
<html>
<head>
<!-- 这里放置文档的元信息 -->
<title>文档标题</title>
<meta charset="UTF-8">
<!-- 连接外部样式或者脚本文件等 -->
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<!-- 这里放置页面内容 -->
<h1>这是一个标题</h1>
<p>这是一个段落</p>
<a href="https://www.example.com">这是一个链接</a>
<!-- 其他内容 -->
</body>
</html>
[*]<!DOCTYPE html>: 生命文档范例为HTML5.
[*]<html>: HTML文档的根元素, 包含了整个文档的内容.
[*]<head>: 包含了一些文档的元信息, 如标题、字符编码等.
[*]<title>: 界说网页标题, 会显示在浏览器的标签页上.
[*]<body>: 包含现实的页面内容.
语法
相识了 HTML 的基本结构之后, 我们来学习一下 HTML 的基本语法.
[*]文本内容: 使用<p>标签界说段落, <h1>到<h6>标签界说标题, <strong>、<del>和<em>标签可以用于强调文本.
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
<p>这是一个段落</p>
<p><strong>重要信息: </strong>这是一个重要的内容</p>
<p>
更改段落文本样式<b>字体加粗</b>、<i>斜体字</i>、<u>下划线</u>、<s>删除线</s>
</p>
https://i-blog.csdnimg.cn/direct/c843252122204384beb62e7028152601.png
[*]列表: 使用<ul>和<li>标签创建无序列表, 使用<ol>和<li>标签创建有序列表.
<ul>
<li>无序列表元素1</li>
<li>无序列表元素2</li>
<li>无序列表元素3</li>
</ul>
<ol>
<li>有序列表元素1</li>
<li>有序列表元素2</li>
<li>有序列表元素3</li>
</ol>
https://i-blog.csdnimg.cn/direct/71684d939a0f46ec8f0d1a018ad61a3c.png
[*]表格: 使用<table>、<tr>、<td>、<th>等标签创建表格, <table>是表格标签的根元素, 然后是<tr>表格的行标签, 在<tr>(table row)内部是<td>(table data)与<th>(table header)
<table>
<tr>
<th>列标题 1</th>
<th>列标题 2</th>
<th>列标题 3</th>
</tr>
<tr>
<td>元素 11</td>
<td>元素 12</td>
<td>元素 13</td>
</tr>
<tr>
<td>元素 21</td>
<td>元素 22</td>
<td>元素 23</td>
</tr>
<tr>
<td>元素 31</td>
<td>元素 32</td>
<td>元素 33</td>
</tr>
</table>
https://i-blog.csdnimg.cn/direct/1b92b5b8dd7e4f7ebbc8ff1f0338bb33.png
我们发现上面的表格并没有显示边框, 假如我们想让其显示边框只必要加上 border属性即可.
<table border="1">
<tr>
<th>列标题 1</th>
<th>列标题 2</th>
<th>列标题 3</th>
</tr>
<tr>
<td>元素 11</td>
<td>元素 12</td>
<td>元素 13</td>
</tr>
<tr>
<td>元素 21</td>
<td>元素 22</td>
<td>元素 23</td>
</tr>
<tr>
<td>元素 31</td>
<td>元素 32</td>
<td>元素 33</td>
</tr>
</table>
https://i-blog.csdnimg.cn/direct/470442b65c8d423c9d3057d2d0d7df32.png
[*]图像: 使用 <img>标签插入图像.
<img src="图片路径" alt="当前图片无法显示">
[*]链接: 使用<a>标签创建链接.
<a href="https://github.com/">访问 GitHub </a>
[*]注释: 使用<!-- 注释内容 -->添加注释, 不会在浏览器中显示.
<!-- 这是一个注释 -->
属性
属性在HTML中起到非常重要的作用, 它们用于界说元素的行为和表面, 以及与其他元素的关系.
在HTML中, 每个元素都可以有一个或多个属性, 用于描述元素的特征和行为.
属性的基本语法是: <开始标签 属性名="属性值">, 其中属性名用于标识该属性, 属性值则界说该属性的值, 属性名和属性值之间用等号=隔开, 属性值一般要用引号括起来:
<img src="image.png" alt="当前图片无法显示">
其中, src 是指定图片的文件路径的属性, alt 是指定在无法加载图片是显示的替代文本的属性. 这些属性可以让用户相识图像的内容, 同时也有助于调整图片的巨细和位置.
属性是用来界说元素的性质和功能的, 它们可以指定元素的尺寸、颜色、文字方向、链接目的等, 有助于页面的定位和结构. 下面是一些常见的属性用法:
[*]class 属性: class属性用于向元素添加一个或多个类名, 以便通过CSS样式表界说样式. 此外, 类名还可以用来实现JavaScript的交互效果. 例如:
<p class="note">这是一个带有 note 类属性的 p 标签</p>
[*]id 属性: id属性是用于将元素标识为唯一的标识符. 它使得我们可以通过 JavaScript 或 CSS 来定位和操作该元素. 例如:
<div id="header">这是一个带有 header id 的 div 标签</div>
[*]style 属性: style属性是用于将CSS样式规则直接应用于元素. 它可以用于控制元素的颜色、字体、巨细和结构等. 例如:
<div style="color: red; font-size: 20px;">这是一段红色的文字</div>
以上三种属性是所有标签都有的属性, 也有一些标签具有独特的属性, 比如 a 标签的 href 属性, img 标签的 src 属性等.
<a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343">这是一个超链接</a>
会这样显示:
https://i-blog.csdnimg.cn/direct/a6690c5b055547148d95a54ea3082709.png
点击这个链接就会去访问对应的网页.
假如将代码改成这样:
<a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343">这是一个超链接</a>
<a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343", target="_blank">这是第二个超链接</a> https://i-blog.csdnimg.cn/direct/8e93a6c3bbff463abe0cf3486dae0823.png
我们看<a>标签的target属性里面的值表示什么含义:
https://i-blog.csdnimg.cn/direct/8caa16f23ce2415db398e94fee82a191.png
大概意思就是:
[*]_self: 表示在当前页面打开这个链接.
[*]_blank: 表示在新的页面打开这个链接.
我们发现上面的两个链接在同一行, 并没有换行, 假如我们想换行, 可以在末尾加上<br>标签:
<a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343">这是一个超链接</a>
<br><a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343", target="_blank">这是第二个超链接</a> <a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343">这是一个超链接</a>
<br><a href="https://blog.csdn.net/weixin_57544072?spm=1010.2135.3001.5343", target="_blank">这是第二个超链接</a><br><img src="./nanjing.jpg", alt="在南京相见!", width="300", height="150"><br><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.jObaSN3cLBxsl2AKGpY14gHaD4?rs=1&pid=ImgDetMain", alt="图片"><br> https://i-blog.csdnimg.cn/direct/4bcc87d9cf1a496c9c47b98dfa00656d.png
<img>标签的 alt 属性用于在没有找到图片的情况下显示一些类似于提示信息的语句(可设置自己想设置的). width和height属性用于设置图片的宽度和高度.
区块
当涉及到 HTML元素时, 可以将它们分为两个主要种别: 行内元素 和 块级元素.
这些不同范例的元素在 HTML 文档中的呈现和结构方面有很大的不同. 下面是关于这两种范例的元素的详细说明:
[*]块级元素 (block): 块级元素通常用于组织和结构页面的主要结构和内容, 例如段落、标题、列表、表格等. 它们用于创建页面的主要部分, 将内容分割成逻辑块.
[*]块级元素通常会重新行开始, 并占据整行的宽度, 因此它们会在页面上呈现为一块独立的内容块.
[*]可以包含其他块级元素和行内元素.
[*]常见的块级元素包括: <div>, <p>, <h1>到<h6>, <ul>, <ol>, <li>, <table>, <form>等.
[*]行内元素 (inline): 行内元素通常用于添加文本样式或为文本中的一部分应用样式. 它们可以在文本中插入小的元素, 例如超链接、强调文本等.
[*]行内元素通常在同一行内呈现, 不会独占一行.
[*]它们只占据其内容所需的宽度, 而不是整行的宽度.
[*]行内元素不能包含块级元素, 但可以包含其他行内元素.
[*]常见的行内元素包括 <span>, <a>, <strong>, <em>, <img>, <br>, <imput>等.
示例:
[*]<div>标签没有语义, 经常用于创建页面的结构结构.
[*]<span>用于内联样式化文本, 给文本的一部分应用样式大概标记
[*]上面这两个标签经常与CSS、JS一起搭配使用, 可以实现更加复杂的页面结构和样式化
<body>
<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>这是第 1 个span标签</span>
<span>这是第 2 个span标签</span>
<span>这是第 3 个span标签</span>
<hr>
<span>链接点击这里 <a href="#">链接</a></span>
</body>
https://i-blog.csdnimg.cn/direct/8b9c604a90b64a86915c3ac17eea6e73.png
表单form标签
HTML 表单 form 是一个重要的元素, 用于网络和提交用户输入的数据. 表单允许用户输入文本、选择选项、上传文件等, 然后将这些数据提交到服务器进行处理.
https://i-blog.csdnimg.cn/direct/58037d56c94e4de1b7b5754bb7991bce.png
表单在网页中是不可或缺的, 上面网页中就应用到了表单.
一个基本的 HTML 表单由以下几个主要部分组成:
[*]<form>元素: 表单元素是表单的容器, 它界说了数据提交到那里以及使用那种 HTTP 方法来提交数据. 它可以包含输入字段、按钮等元素
<form action="/submit" method="post">
<!-- 表单元素 -->
</form>
[*]输入字段: <input>标签是 HTML 中用于创建表单元素的最常见标签之一. 它允许用户输入文本、选择选项、上传文件等. <input>元素有多个属性, 用于指定不同范例的输入和控制输入的方式. 以下是一些常见的<input>标签的属性和它们的详细说明:
type属性: 指定输入字段的范例, 它可以有以下不同的值:
[*]text: 创建文本输入框, 用于用户输入文本.
[*]password: 创建密码输入框, 输入内容会被隐藏.
[*]radio: 创建单选按钮, 用户只能选择一个选项.
[*]checkbox: 创建复选框, 用户可以选择多个选型.
[*]number: 创建数字选择框, 允许用户输入数字.
[*]email: 创建用于输入电子邮件地址的输入框.
[*]file: 创建文件上传字段, 用户可以上传文件.
[*]submit: 创建提交按钮, 用于提交表单数据.
[*]reset: 创建重置按钮, 用于重置表单数据.
[*]button: 创建自界说按钮, 通常与 JavaScript 一起使用.
输入框
<body>
<form>
<input type="text" placeholder="请输入内容: "><br>
<input type="text" value="请输入内容: "><br>
</form>
</body>
https://i-blog.csdnimg.cn/direct/fbb4a51ed94a46299952364f44f31a8c.png
[*]placeholder属性: 表示的是提示信息, 并不是现实的值
[*]value属性: 文本框中的默认值, 是真实存在于其中的值.
假如我们想在输入框中前面显示一些提示信息, 比如账号名和密码这些:
<body>
<form>
<label>用户名: </label>
<input type="text" placeholder="请输入内容: "><br>
<label>密码: </label>
<input type="text" value="请输入内容: "><br>
</form>
</body>
https://i-blog.csdnimg.cn/direct/77353120030e4c3c95d8f851afa3e82e.png
固然也可以用我们前面提到的 <span>标签代替上面的<label>, 能实现一样的效果.
<body>
<form>
<label for="username">用户名: </label>
<input type="text" id="username" placeholder="请输入用户名: "><br><br>
<label for="pwd">密码: </label>
<input type="password" id="pwd" placeholder="请输入密码: "><br>
</form>
</body>
https://i-blog.csdnimg.cn/direct/f3f17acef9e04d9cba3610e64d6f7f9a.png
上面的代码中:
[*] label标签中的 for属性 用于将label标签与这里input表单元素关联起来, 当用户点击这个label标签时, 与之关联的表单元素(这里是<input>)会主动得到焦点. 例如点击用户名这个label标签, id为username的<input>框会主动被选中
https://i-blog.csdnimg.cn/direct/3e6e4cac7cc24b46b2370696758662d4.png
[*] 上面的密码范例有原来的text改为password, 好处是密码不可见
https://i-blog.csdnimg.cn/direct/c5b9a82fdccc4b579c457122fcd93a94.png
单选按钮
<body>
<form>
<label>性别: </label>
<input type="radio"> 男
<input type="radio"> 女
</form>
</body>
https://i-blog.csdnimg.cn/direct/28aff106a66e4114be2ae17abf6956f7.png
我们发现上面的单选按钮没有实现单选的功能, 必要这样改动:
<body>
<form>
<label>性别: </label>
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
</form>
</body>
https://i-blog.csdnimg.cn/direct/2138b5671cca4a7b8f7c55fc2e2c2398.png
多选按钮
<body>
<form>
<label>性别: </label>
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女<br><br>
<label>爱好: </label>
<input type="checkbox" name="hobby"> 唱歌
<input type="checkbox" name="hobby"> 跳舞
<input type="checkbox" name="hobby"> 跑步<br><br>
</form>
</body>
https://i-blog.csdnimg.cn/direct/421cde311ecd46b8899980c498a9e100.png
提交按钮
<body>
<form action="#">
<label for="username">用户名: </label>
<input type="text" id="username" placeholder="请输入用户名: "><br><br>
<label for="pwd">密码: </label>
<input type="password" id="pwd" placeholder="请输入密码: "><br><br>
<input type="submit" value="请提交">
</form>
</body>
https://i-blog.csdnimg.cn/direct/8e983d58816a49bf8e821926f5be85ed.png
这里必要说的是:
[*]<form>标签的action属性用于指定表单数据提交的目的URL, 即用户点击提交按钮后, 表单中的数据将被发送到这个指定的地址.
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" palceholder="密码">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
<input type="checkbox" name="subscribe" value="yes"> 订阅
<select name="country">
<option value="zh">中国</option>
<option value="us">美国</option>
<!-- 其他选项 -->
</select>
表单元素可以包含一些属性, 以指定表单的行为和样式. 常见的表单属性包括:
属性描述action指定表单数据提交到服务器的URLmethod指定用于提交数据的 HTTP 方法, 通常为 get 或 postname为表单命名, 以便在 JavaScript 中引用target指定表单提交后的目的窗口或框架 <h2>用户注册</h2>
<form action="/submit" method="post">
<label for="username">用户名: </label>
<input type="text"><br><br>
<label for="password">密码: </label>
<input type="password"><br><br>
<label for="email">电子邮件地址: </label>
<input type="text"><br><br>
<label for="age">年龄: </label>
<input type="number" width="5"><br><br>
<label>性别: </label>
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女<br><br>
<label>最喜欢的编程语言: </label>
<input type="checkbox" name="languages" value="python"> Python
<input type="checkbox" name="languages" value="javascript"> JavaScript
<input type="checkbox" name="languages" value="java"> Java
<input type="checkbox" name="languages" value="cpp"> C++<br><br>
<input type="submit" value="提交">
</form>
遇见安然遇见你，不负代码不负卿。 谢谢老铁的时间，咱们下篇再见～
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]