Web前端基础之HTML

一、浏览器

火狐浏览器、谷歌浏览器(推荐)、IE浏览器

推荐谷歌浏览器原因:
1、简洁大方,打开速度快
2、开发者调试工具(右键空白处->检查,打开调试模式)

二、开发工具

核心IDE工具

  1. Visual Studio Code (VS Code)‌
    微软开发的免费跨平台编辑器,支持智能提示、Git集成、调试功能及丰富的扩展插件‌。
    轻量高效,适用于HTML/CSS/JavaScript及主流前端框架开发‌。

  2. WebStorm‌
    JetBrains推出的专业前端IDE,提供智能代码补全、重构、调试及ESLint集成‌。
    适合复杂JavaScript/TypeScript项目,支持React/Vue等框架‌。

  3. HBuilder‌
    专为前端设计的国产工具,支持uni-app框架实现多平台开发(小程序、H5、App)‌。
    提供实时预览和高效语法提示,适合快速迭代项目‌。

三、VSCode使用

- VSCode常用快捷键

  1. 生成浏览器文件的快捷方式:!+回车
  2. 代码格式化:Shift+Alt+F
  3. 向上或向下移动一行:Alt+Up或Alt+Down
  4. 快速复制一行代码:Shift+Alt+Up或Shift+Alt+Down
  5. 快速保存:Ctrl+S
  6. 快速查找:Ctrl+F
  7. 快速替换:Ctrl+H
  8. 快速生成ul+li的布局:ul>li*3(数字根据自己的需要的li数量修改,ol标签同理)
  9. 快速生成表格结构:table>tr3>td2{单元格}

- VSCode常用插件

1.快速打开浏览器
扩展->搜索open in browser ->点击安装

四、相关概念介绍

  1. HTML5介绍
    HTML5是用来描述网页的一种语言,被称为超文本标记语言。用HTML5编写的文件,后缀以.html结尾。
    HTML是一种标记语言,标记语言是一套标记标签。标签是由尖括号包围的关键字,例如:

标签有两种表现形式:

  • 双标签,例如:<html></html>
  • 单标签,例如:<img>
  1. HTML5的DOCTYPE声明
    DOCTYPE是document type(文档类型)的缩写。是H5的声明位于文档的最前面,处于标签之前。他是网页必备的组成部分,避免浏览器的怪异模式。
    作用:避免同样的代码在不同的浏览器上展示不同的效果

3.HTML5基本骨架

  • html标签
    定义HTML文档,这个元素我们浏览器看到后就明白这是个HTML文档了,所以你的其他元素要包裹在它的里面,标签限定了文档的开始点和结束点。
<!DOCTYPE html>
<html>
</html>
  • head标签
    head标签用于定义文档的头部。文档的头部秒速文档的各种属性和信息,包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
<!DOCTYPE html>
<html><head></head>
</html>
  • body标签
    body元素定义文档的主体。
    body元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)
    它会直接在页面中显示出来,也就是用户可以直观看到的内容
<!DOCTYPE html>
<html><head></head><body>我会显示在浏览器中</body>
</html>
  • title标签
  1. 可定义文档的标题
  2. 它显示在浏览器窗口的标题栏或状态栏上
  3. title标签是head标签中唯一必须要求包含的东西,就是说写head一定要写title
  • meta标签
    meta标签用来描述一个HTML网页文档的属性,关键词等,例如:charset="utf-8"是说当前使用的是utf-8编码格式,在开发中我们经常会看到utf-8或是gbk,这些都是编码格式,通常使用utf-8。
    以下是基本骨架:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>我是标题</title></head><body>我会显示在浏览器中</body>
</html>

五、基础语法

1. 标题介绍与应用

标题(Heading)是通过h1-h6标签进行定义的。
h1定义最大的标题 h6定义最小的标题
示例代码:

<!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>

技巧:快速生成h1~h6快捷键:h$*6

  • 正确使用标题
    请确保将HTML标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
    正确使用标题有益于SEO
    应该将h1用作主标题(最重要的),其后是h2(次重要的),再其次是h3,以此类推

  • 标题标签位置摆放
    在标签中添加属性:align="left|center|right"默认居左
    示例代码:

<!DOCTYPE html>
<html >
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1 align="center">一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6>
</body>
</html>

2.标签之段落§、换行(br)、水平线(hr)

  • 标签之段落
    段落是通过<p>标签定义的
<p>这是一个段落</p>
<p>这是另外一个段落</p>
  • 标签之换行—单标签
    如果希望在不产生一个新段落的情况下进行换行(新行),请使用<br>标签
    <br/>元素是一个空的HTML元素。即是单标签
<p>我是一个段落标签</p>
<p>如果你希望在不产生一个<br/>新段落的情况下进行换行</p>
  • 标签之水平线—单标签
    <hr/>标签在HTML页面中创建水平线
<hr color="" width="" size="" align=""/>

属性:

  • color:设置水平线的颜色
  • width:设置水平线的宽度
  • size:设置水平线的高度
  • align:设置水平线的对齐方式(默认居中),可取值left|right
    <hr color="green"  width="300px" size="20px" align="left"/>
3. 图片标签<image>

<image>标签定义HTML页面中的图像

注意事项
<image>是单标签,不需要进行闭合操作

(1)、属性:

  • src:路径(图片地址与名字)
  • alt:规定图像的替代文本,如图片加载失败时,有个占位和文本提示
  • width:规定图像的宽度
  • height:规定图像的高度
  • title:鼠标悬停在图片上给与提示

示例代码:

<img src="1.jpeg" alt="图片加载失败了!" width="300" height="300px" title="风景画">

(2)、图片路径

  • 绝对路径
    绝对路径是电脑的盘符存储与访问的具体地址
    E:\workplace\Web\1.jpeg

  • 相对路径
    两者相对关系,两者在同一路径下可以直接访问
    子级关系:/
    父级关系:…/
    同级关系:./(可以省略)

  • 网络路径
    具体的网络地址

4. 超文本链接

超链接指想跳哪里跳哪里
超链接描述
HTML使用标签<a>来设置超文本链接
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的
文档或者当前文档中的某个部分

<a href="url">链接文本</a>
示例代码:<a href="https://www.baidu.com/">点击</a>

超链接属性
在标签<a>中使用了href属性来描述链接的地址
默认情况下,链接将以,以下形式出现在浏览器中(默认效果):
一个未访问过的链接显示为蓝色字体并带有下划线
访问过的链接显示为紫色并带有下划线
点击链接时,链接显示为红色并带有下划线

特别提示:
后期我们会通过CSS样式修改掉这些效果

5. 常用文本标签

标签描述
<em>定义着重文字
<b>定义粗体文本
<i>定义斜体字
<strong>定义加重语气
<del>定义删除字
<span>元素没有特定的含义

特别提示
常用文本标签和段落是不同的,段落代表一段文本,而文本标签一般表示文本词汇

6.列表标签之有序列表

  • 有序列表
    有序列表是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol><li>有序标签1</li><li>有序标签2</li>
</ol>
  • type属性
    <ol>的属性type 拥有的选项
  1. 1 表示列表项目用数字标号(1,2,3…)
  2. a 表示列表项目用小写字母标号(a,b,c…)
  3. A 表示列表项目用大写字母标号(A,B,C…)
  4. i 表示列表项目用小写罗马数字标号(i,ii,iii…)
  5. I 表示列表项目用大写罗马数字标号(I,II,III…)
  • 有序列表嵌套
    列表是可以进行嵌套的
<ol><li>有序标签主目录1</li><li><ol><li>有序标签子目录1</li><li>有序标签子目录2</li></ol></li><li>有序标签主目录2</li>
</ol>

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><ol><li>苹果</li><li>橘子</li><li>香蕉</li></ol><ol type="a"><li>苹果</li><li>橘子</li><li>香蕉</li></ol><ol><li>水果</li><li>蔬菜<ol><li>白菜</li><li>油菜</li><li>黄瓜</li></ol></li></ol>
</body>
</html>

7.列表标签之无序列表

无序列表实现

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记

无序列表始于 <ul> 标签。每个列表项始于 <li> 标签。

<ul><li>无序列表1</li><li>无序列表2</li>
</ul>
type属性

<ul>的属性type 拥有的选项

  • disc 默认实心圆

  • circle 空心圆

  • square 小方块

  • none 不显示

无序列表嵌套

列表是可以进行嵌套的

<ul><li>无序列表主目录1</li><li><ul><li>无序列表子目录1</li><li>无序列表子目录2</li></ul></li><li>无序列表主目录2</li>
</ul>
常见应用场景
  1. 无序的列表效果
  2. 导航效果

代码示例:

<body><ul><li>无序列表1</li><li>无序列表2</li></ul><ul type="square"><li>无序列表1</li><li>无序列表2</li></ul><ul><li>无序列表主目录1</li><li><ul><li>无序列表子目录1</li><li>无序列表子目录2</li></ul></li><li>无序列表主目录2</li></ul>
</body>

8.标签之表格

表格标签

表格:<table>

行:<tr>

单元格(列):<td>

表格属性
  1. border:设置表格的边框
  2. width:设置表格的宽度
  3. height:设置表格的高度

代码示例:

<body><table border="1" width="400px" height="200px"><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr><tr><td>单元格</td><td>单元格</td></tr></table>
</body>

9.表格单元格合并

  • 水平合并(横向合并,即列之间):colspan
  • 垂直合并(竖向合并,即行之间):rowspan
  • 合并技巧:
    水平合并:保留左边,删除右边
    垂直合并:保留上边,删除下边

代码示例:
创建55表格进行合并示例,快速创建命令:table>tr5>td*5>{单元格}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>合并单元格6和7:colspan,水平合并</p><p>合并单元格15和20:rowspan,垂直合并</p><p>合并单元格16和17:colspan,水平合并,将合并后的16作为一个整体,垂直合并21和22,rowspan</p><p>水平合并:保留左边,删除右边</p><p>垂直合并:保留上边,删除下边</p><table border="1" width="600px" height="400px"><tr><td>单元格1</td><td>单元格2</td><td>单元格3</td><td>单元格4</td><td>单元格5</td></tr><tr><td colspan="2">单元格6,7</td><td>单元格8</td><td>单元格9</td><td>单元格10</td></tr><tr><td>单元格11</td><td>单元格12</td><td>单元格13</td><td>单元格14</td><td rowspan="2">单元格15,20</td></tr><tr><td colspan="2" rowspan="2">单元格16,17,21,22</td><td>单元格18</td><td>单元格19</td></tr><tr><td>单元格23</td><td>单元格24</td><td>单元格25</td></tr></table>
</body>
</html>

10.Form表单

表单在 Web 网页中用来给用户填写信息,从而能采用户信息,使网页具有交互的功能。

所有的用户输入内容的地方都用表单来写,如登录注册、搜索框

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等,这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件

<form action="url" method="get|post" name="myform"></form>

属性说明

action服务器地址

name表单名称

method中Get和Post的区别

  1. 数据提交方式,get把提交的数据url可以看到,post看不到
  2. get一般用于提交少量数据,post用来提交大量数据
表单元素

一个完整的表单包含三个基本组成部分:表单标签、表单域、表单按钮

  1. 表单标签
  2. 表单域
  3. 表单按钮
<form><input type="text"><input type="submit">
</form>

11.表单元素

文本框

文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域

密码框

密码字段通过标签<input type="password"> 来定义

温馨提示

密码字段字符不会明文显示,而是以星号或圆点替代

提交按钮

当用户单击确认按钮时,将数据发送给服务器

<form name="input" action="url" method="get">Username: <input type="text" name="user"><input type="submit" value="Submit">  //value 可以更改文本内容
</form>

12.块元素与行内元素(内联元素)

HTML5出现之前,经常把元素按照块级元素和内联元素来区分。在HTML5中,元素不再按照这种⽅式来区分, 而是按照内容模型来区分,分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何⼀个类别,被称为穿透的,元素可能属于不止⼀个类别,称为混合的

详细参考地址:https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories

虽然到了HTML5的版本,元素分类更细致了,但是这对初学者并不友好,所以我们仍然按照块元素和内联元素做区分,这对我们的布局起到了至关重要的作用

内联元素和块级元素的区别

块级元素内联元素
块元素会在页面中独占一行(自上向下垂直排列)行内元素不会独占页面中的一行,只占自身的大小
可以设置width,height属性行内元素设置width,height属性无效
⼀般块级元素可以包含行内元素和其他块级元素⼀般内联元素包含内联元素不包含块级元素

常见块级元素

div、form、h1~h6、hr、p、table、ul、等

常见内联元素(行内元素)

a、b、em、i、span、strong等

行内块级元素(特点:不换行、能够识别宽高)

button、img、input等

13.HTML5新增标签

HTML5HTML最新的修订版本,2014年10月由万维网联盟(W3C)`完成标准制定

HTML5出现之前,我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点,HTML5新增了很多新的语义化标签
注意:如果要考虑兼容性问题,那就还得用DIV+CSS这种写法,不然,就可以直接用新的标签代替

扩展知识

div容器元素,也是页面中见到的最多的元素

H5新标签

  1. <header></header> 头部
  2. <nav></nav> 导航
  3. <section></section>定义文档中的节,比如章节、页眉、页脚
  4. <aside></aside> 侧边栏
  5. <footer></footer> 脚部
  6. <article></article> 代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子,一篇博客文章,一个用户评论等

上面代码等同于以下,不考虑兼容性问题,直接用上面的写法就可以,像小米商城等,为了考虑老版本的浏览器,所以还是采用了下面的写法:

<div id="header"></div><div id="nav"></div><div id="article"><div id="section"></div></div><div id="silder"></div><div id="footer"></div>

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

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

相关文章

11.TCP三次握手

TCP连接建立与传输 1&#xff0e;主机 A 与主机 B 使用 TCP 传输数据&#xff0c;A 是 TCP 客户&#xff0c;B 是 TCP 服务器。假设有512B 的数据要传输给 B&#xff0c;B 仅给 A 发送确认&#xff1b;A 的发送窗口 swnd 的尺寸为 100B&#xff0c;而 TCP 数据报文段每次也携带…

Python 爬虫入门 Day 3 - 实现爬虫多页抓取与翻页逻辑

Python 第二阶段 - 爬虫入门 &#x1f3af; 今日目标 掌握网页分页的原理和定位“下一页”的链接能编写循环逻辑自动翻页抓取内容将多页抓取整合到爬虫系统中 &#x1f4d8; 学习内容详解 &#x1f501; 网页分页逻辑介绍 以 quotes.toscrape.com 为例&#xff1a; 首页链…

分布式定时任务系列12:XXL-job的任务触发为什么是死循环?

传送门 分布式定时任务系列1&#xff1a;XXL-job安装 分布式定时任务系列2&#xff1a;XXL-job使用 分布式定时任务系列3&#xff1a;任务执行引擎设计 分布式定时任务系列4&#xff1a;任务执行引擎设计续 分布式定时任务系列5&#xff1a;XXL-job中blockingQueue的应用 …

位运算详解之异或运算的奇妙操作

位运算详解之异或运算的奇妙操作 一、异或运算的本质与核心性质1.1 异或运算的定义与逻辑规则1.2 异或运算的核心代数性质&#xff08;1&#xff09;自反性&#xff1a;a ^ a 0&#xff08;2&#xff09;恒等性&#xff1a;a ^ 0 a&#xff08;3&#xff09;交换律&#xff1…

Element Plus 去除下拉菜单周黑边

问题&#xff1a; 如上图所示&#xff0c;当鼠标移入&#xff08;hover&#xff09;和点击时就会围绕一圈黑色边框&#xff0c;但通过本文的方案 100% 完美解决。 解决方案: :deep(:focus-visible) {outline: none; } 备用方案 :deep(.el-tooltip__trigger:focus-visible) …

React Native 项目实战 —— 记账本应用开发指南

React Native 项目实战 —— 记账本应用开发指南 项目概述&#xff1a;本文将指导您使用 React Native 开发一个简单的记账本应用&#xff0c;帮助用户记录收入和支出。核心内容&#xff1a;我们将分析功能模块、设计接口、划分组件结构、管理数据流、实现页面跳转&#xff0c…

从 PPO、DPO 到 GRPO:大语言模型策略优化算法解析

从 PPO、DPO 到 GRPO&#xff1a;大语言模型策略优化算法解析 背景与简介 大语言模型&#xff08;LLM&#xff09;的训练通常分为预训练和后训练两个阶段。预训练阶段&#xff0c;模型在海量文本上学习下一词预测的能力&#xff1b;后训练阶段&#xff0c;我们希望进一步对齐…

React中使用Day.js指南

文章目录 引言什么是Day.js&#xff1f;Day.js的核心特性 安装和基础配置安装Day.js基础导入和使用 在React中的基础使用1. 显示格式化日期2. 实时时钟组件 常用插件配置1. 相对时间插件2. 高级格式化插件3. 时区处理插件 实战案例&#xff1a;博客文章时间组件高级应用场景1. …

【系统设计【1】】系统设计面试方法论:从0到百万用户的需求到架构的推演

文章目录 一、系统设计面试的底层逻辑&#xff1a;从需求到架构的推演&#xff08;一&#xff09;需求澄清&#xff1a;界定问题边界&#xff08;二&#xff09;分层设计&#xff1a;从单节点到分布式的演进1. Web层&#xff1a;无状态化与负载均衡2. 数据层&#xff1a;数据库…

京津冀城市群13城市空间权重0-1矩阵

京津冀城市群13城市空间权重0-1矩阵 1、数据说明&#xff1a;京津冀13个城市&#xff1a;北京市、保定市、沧州市、承德市、邯郸市、衡水市、廊坊市、秦皇岛市、石家庄市、唐山市、邢台市、张家口市、天津市、 2、指标解释&#xff1a;空间权重矩阵是一种用于表征空间表达式的…

七大技术路线解析:自动驾驶如何被数据重新定义

自动驾驶技术从实验室的算法验证走向大规模量产应用&#xff0c;是一场充满挑战的征程。这段征程的核心驱动力&#xff0c;不仅是芯片和传感器的升级&#xff0c;更是一场关于数据的“喂养”竞赛——从简单的像素标注到多模态大模型的理解&#xff0c;数据需求的演变悄然推动着…

计网复习知识(16)传输层及其协议功能

目录 考研大纲 1.传输层概述 端口号 有连接/无连接传输 可靠/不可靠传输 2.UDP协议 2.1 udp数据报 2.2 udp检验 3.TCP协议 3.1 TCP协议的框架梳理 3.2 TCP报文段**** 3.3 三次握手与四次挥手 三次握手 四次挥手 3.4 可靠传输与流量控制 流量控制&#xff1a;滑动…

每天一个前端小知识 Day 1

语义化 HTML&#xff08;Semantic HTML&#xff09; 1. 什么是语义化 HTML&#xff1f; 语义化 HTML 指的是使用符合内容含义的标签&#xff0c;而不仅仅为了布局或样式。例如&#xff1a; <article>…</article> <nav>…</nav> <header>…&l…

在docker中部署mysql

部署 MySQL&#xff08;端口 9006&#xff09; 1. 创建数据目录 mkdir -p ~/qihuang/mysql/data2. 启动 MySQL 容器 docker run -d \--name mysql-qihuang \-p 9006:3306 \-v ~/qihuang/mysql/data:/var/lib/mysql \-e MYSQL_ROOT_PASSWORDroot \-e MYSQL_DATABASEqihuangdb…

JavaScript基础-事件对象

一、前言 在前端开发中&#xff0c;用户与页面的交互行为&#xff08;如点击按钮、输入文本、滚动页面等&#xff09;都会触发相应的事件。而这些事件发生时&#xff0c;浏览器会自动创建一个 事件对象&#xff08;Event Object&#xff09;&#xff0c;它包含了当前事件的所有…

蓝桥杯_染色_bfs_Java

临时抱抱佛脚&#xff0c;太浮躁了&#xff0c;蓝桥杯已经快1个半月没做题了。 本人比较菜&#xff0c;感觉这个时间节点也只能把暴力题给尽量多做做&#xff0c;找找做题手感&#xff0c;其他就纯凭运气了吧。T-T。 题目 问题描述 小蓝有一个 n 行 m 列的白色棋盘, 棋盘的每一…

MySQL 究极奥义·动态乾坤大挪移·无敌行列转换术

导入大SQL文件 [mysqld] # 大批量导入优化 bulk_insert_buffer_size1G max_allowed_packet1G innodb_autoextend_increment512M innodb_buffer_pool_size4G innodb_log_buffer_size4G innodb_log_file_size4G动态行列转换 DROP TABLE IF EXISTS tb_score;CREATE TABLE tb_sco…

Excel大厂自动化报表实战(互联网金融-数据分析周报制作中)

这是Excel大厂自动化报表实战第三期--互联网金融-数据分析周报制作中 数据资源已经与这篇博客捆绑&#xff0c;有需要者可以下载通过网盘分享的文件&#xff1a;2.4自动化报表-8月成交数据.xlsx&#xff0c;2.4自动化报表-8月获客数据.csv等2个文件 链接: https://pan.baidu.c…

langchain从入门到精通(七)——利用回调功能调试链应用 - 让过程更透明

1. Callback 功能介绍 Callback 是 LangChain 提供的回调机制&#xff0c;允许我们在 LLM 应用程序的各个阶段使用 hook &#xff08;钩子&#xff09;。钩子的含义也非常简单&#xff0c;我们把应用程序看成一个一个的处理逻辑&#xff0c;从开始到结束&#xff0c;钩子就是在…

如何使用Postman做接口自动化测试

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 本文适合已经掌握 Postman 基本用法的读者&#xff0c;即对接口相关概念有一定了解、已经会使用 Postman 进行模拟请求等基本操作。 工作环境与版本&#xff1a; …