HTML | DOM | 网页前端 | 常见HTML标签总结

文章目录

        • 1.前端开发简单分类
        • 2.前端开发环境配置
        • 3.HTML的简单介绍
        • 4.常用的HTML标签介绍

1.前端开发简单分类

前端开发，这里是一个广义的概念，不单指网页开发，它的常见分类

  • 网页开发：前端开发的主要领域，使用HTML、CSS 和 JavaScript等技术来创建运行在浏览器中的应用
  • 桌面应用开发：虽然桌面应用通常是由后端语言（如C++、Java或C#）开发的，但现在也可以使用前端技术来开发桌面应用（电脑上的应用）。例如，Electron框架允许开发者使用HTML、CSS和JavaScript来创建跨平台的桌面应用
  • 移动应用开发：开发手机应用，比如使用Java开发Android应用。

本篇博客分享网页开发的前端技术！网页开发，使用HTML、CSS和JavaScript这套技术来解决实际问题！而HTML负责网页的结构（页面元素和内容），CSS负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等），JavaScript负责网页的行为（交互效果）。

2.前端开发环境配置

下载vscode

官网中下载对应的安装包，安装即可。

插件下载

  • Auto Rename Tag：自动补全功能
  • view-in-browser：在vscode中打开页面。鼠标右键选择：View-in-Browser选项
  • Live Server：自动刷新页面。鼠标右键选择：Open with Live Server选项
3.HTML的简单介绍

HTML（HyperText Markup Language，超文本标记语言），所谓的超文本，不仅可以定义文本信息还可以定义图片、音频、视频、表格、链接等内容。而标记语句是由标签构成的语言！HTML页面通过浏览器的渲染展示出来。

通过基础的HTML标签界面，展示Hello world

<html><head><title>the first page</title></head><body>Hello world</body>
</html>

html 标签是整个 html 文件的根标签、head 标签中写页面的属性、body 标签中写的是页面上显示的内容、title 标签中写的是页面的标题

什么是DOM树

DOM（Document Object Model）树是一个用于表示HTML或XML文档结构的模型。 Document 文档：对应的一个HTML文件或XML文件就是一个文档，而HTML和XML之间的区别在于，HTML侧重于展示信息，展示数据；而XML更侧重于存储数据！Object：一切皆对象，对应的文档是一个对对象，一个标签本质也是对象！

DOM树将文档表示为一个节点树，每个节点对应文档中的一个部分，如标签、属性、文本等。比如上面的基础代码可以表示成DOM树结构：

Document
└── html├── head│   └── title│       └── "the first page"└── body└── "hello world

DOM树是动态的，可以使用JavaScript来修改DOM树，如添加、删除或修改节点，这将直接反映到浏览器显示的网页上。这是实现动态网页和Web应用程序的基础。

标签之间的简单关系

html和head，body这些是父子关系，而head和body标签是兄弟关系。

快速生成HTML的基础结构

在VSCode中我们安装插件可以通过快捷方式：！+ 回车键 生成HTML的基础结构代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
  • 称为 DTD (文档类型定义), 描述当前的文件是一个 HTML5 的文件.

  • <html lang="en"> 其中 lang 属性表示当前页面是一个 “英语页面”(有些浏览器会根据此处的声明提示是否进行自动翻译).

  • <meta charset="UTF-8"> 描述页面的字符编码方式，告诉浏览器按照UTF-8的方式解码，当然编写代码的时候IDE设置的编码也要是UTF-8
    在这里插入图片描述

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">,viewport 表示用户在设备上可以看到的网页的区域，"width=device-width, initial-scale=1.0" 在设置可视区和设备宽度等宽, 并设置初始缩放为不缩放

4.常用的HTML标签介绍

段落标签：h1-h6

六个标签, 从 h1 - h6 数字越大，则字体越小；快捷键：ALT + Shift + 下箭头，快速复制粘贴

<body><h1>hello</h1><h2>hello</h2><h3>hello</h3><h4>hello</h4><h5>hello</h5><h6>hello</h6>   
</body>

段落标签：p

在HTML代码中回车，浏览器不会解析成换行，需要加上p标签

<body>纸上得来终觉浅，绝知此事要躬行。<p>纸上得来终觉浅，</p><p>绝知此事要躬行。</p>
</body>

换行标签：br

br 是 break 的缩写. 表示换行

<body><p>纸上得来终觉浅，<br> 绝知此事要躬行。</p> 
</body>

格式化标签

在实际中，这种格式化的工作是让CSS来做的，但是HTML也提供一些，了解。

<body><strong>strong 加粗</strong><b>b 加粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><s>删除线</s><ins>下划线</ins><u>下划线</u>
</body>

效果展示：strong 加粗 b 加粗 倾斜 倾斜 删除线 删除线 下划线 下划线

图片标签：img

  • img 标签必须带有 src 属性，表示图片的路径，当然路径的设置可以是相对路径也可以是绝对路径，对应绝对路径可以是磁盘路径或网络路径。

  • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.

  • title: 提示文本. 鼠标放到图片上, 就会有提示.

  • width/height: 控制宽度高度.

  • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

<body><img src="./image/百度一下.jpg" alt="百度一下" title="百度一下">
</body>

超链接标签：a

  • href: 必须具备, 表示点击后会跳转到哪个页面
  • target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开
<body><a href="https://www.baidu.com/"></a>
</body>

在这里插入图片描述

<body><a href="https://www.baidu.com/">百度一下</a>
</body>

超链接跳转的几种方式：

  • 外部链接: href 引用其他网站的地址

  • 内部链接: 网站内部页面之间的链接. 写相对路径即可

<body><a href="./html02.html">跳转</a>
</body>
  • 空链接: 使用 # 在 href 中占位
<body><a href="#">空链接</a>
</body>
  • 下载链接: href 对应的路径是一个文件 (可以使用 zip 文件)
<body><a href="test.zip">下载文件</a>
</body>
  • 网页元素链接: 可以给图片等任何元素添加链接
<body><a href="https://www.baidu.com/" target="_blank"><img src="./image/百度一下.jpg" alt="图片加载失败" title="百度首页" ></a>   
</body>
  • 锚点链接: 可以快速定位到页面中的某个位置

<body><a href="#one">第一集</a><a href="#two">第二集</a><p id="one">第一集剧情 <br>第一集剧情 <br>...</p><p id="two">第二集剧情 <br>第二集剧情 <br>...</p>
</body>

表格标签

基本使用：table 标签: 表示整个表格、tr: 表示表格的一行、td: 表示一个单元格、th: 表示表头单元格. 会居中加粗、thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)、tbody: 表格得到主体区域

  • align 是表格相对于周围元素的对齐方式. align=“center”，整个表格居中
  • border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框
  • cellpadding: 内容距离边框的距离, 默认 1 像素
  • cellspacing: 单元格之间的距离. 默认为 2 像素
  • width / height: 设置尺寸
<body><table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>张三</td><td>男</td><td>18</td></tr><tr><td>李四</td><td>男</td><td>18</td></tr></table>
</body>

合并单元格

  • 跨行合并: rowspan=“n”
  • 跨列合并: colspan=“n”
<body><table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>张三</td><td rowspan="2">男</td><td>18</td></tr><tr><td>李四</td><td>18</td></tr></table>
</body>

列表标签

  • 无序列表[重要] ul li

  • 有序列表[用的不多] ol li

  • 自定义列表[重要] dl (总标签) dt (小标题) dd (围绕标题来说明) 上面有个小标题

  • 快捷方式：ul>li*n[tab]同理ol>li*n[tab]

<body><ul><li>这是无序列表1</li><li>这是无序列表2</li><li>这是无序列表2</li></ul> <ol type="a"><li>这是有序列表1</li><li>这是有序列表2</li><li>这是有序列表3</li></ol><dl><dt>这是自定义列表</dt><dd>这是自定义列表1</dd><dd>这是自定义列表2</dd><dd>这是自定义列表3</dd></dl></body>

表单标签

在HTML中，表单是由<form>标签创建的，它用于收集用户输入的数据。表单域: 包含表单元素的区域（重点是from）；表单控件: 输入框, 提交按钮等（重点是input）

<form>标签：

<body><!--action：跳转的路径，method：请求的方法  --><form action="跳转的路径" method="post"><!-- form标签中的内容 --></form>
</body>

<input>标签：各种输入控件, 单行文本框, 按钮, 单选框, 复选框

  • type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等
  • name: 给 input 起了个名字. 尤其是对于单选按钮
  • value: input 中的默认值
  • checked: 默认被选中. (用于单选按钮和多选按钮)
  • maxlength: 设定最大长度
<body><form action="跳转的路径" method="post"><input type="text"> 文本框<br><input type="password"> 密码框<br><input type="radio" name="sex" checked="checked">男<input type="radio" name="sex" >女 单选框<br><input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox"> 打游戏 复选框<br><input type="button" value="我是个按钮" onclick="alert('hello')"><br>       </form></body>
  • 提交按钮
<form action="test.html" method="get"><input type="text" id="name" name="username"><input type="submit" value="提交">
</form>
  • 清空按钮
<form action="test.html"><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="清空">
</form>
  • 文件按钮
<body><form action="跳转的路径" method="post"><input type="file"> </form>
</body>

label 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验（下面：点击男也能选中）；for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应

<body><form action="跳转的路径" method="post"><label for="male">男</label><input type="radio" name="sex" id="male"></form>
</body>

select 标签

option 中定义 selected=“selected” 表示默认选中

<form action="跳转的路径" method="post"><select><option>--请选择年份--</option><option selected="selected">1991</option><option>1992</option><option>1993</option><option>1994</option><option>1995</option></select>
</form>

textarea 标签

<textarea rows="3" cols="50"></textarea>

rows 和 cols 也都不会直接使用, 都是用 css 来修改

无语义标签: div 和 span

div 标签, division 的缩写, 含义是 分割；span 标签, 含义是跨度，就是两个盒子. 用于网页布局，div 是独占一行的, 是一个大盒子. span 不独占一行, 是一个小盒子.

<body><div><span>再见 </span><span>晚安 </span>       </div><div><span>再见 </span><span>晚安 </span>       </div>
</body>

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

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

相关文章

Python setattr函数

Python setattr函数

在Python编程中&#xff0c;setattr()函数是一个有用且灵活的内置函数&#xff0c;用于设置对象的属性值。它可以在运行时动态地设置对象的属性&#xff0c;无论是新建对象还是已有对象。本文将深入探讨setattr()函数的用法、语法、示例代码&#xff0c;并探讨其在实际编程中的…
阅读更多...
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之NavRouter组件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之NavRouter组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之NavRouter组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、NavRouter组件 导航组件&#xff0c;默认提供点击响应处理&#xff0c;不需要…
阅读更多...
C语言strstr函数

C语言strstr函数

简介 strstr(str1,str2) 函数用于判断字符串str2是否是str1的子串。如果是&#xff0c;则该函数返回 str1字符串从 str2第一次出现的位置开始到 str1结尾的字符串&#xff1b;否则&#xff0c;返回NULL。 实验 #include "stdio.h" #include "string.h"c…
阅读更多...
学生成绩管理系统|基于Springboot的学生成绩管理系统设计与实现(源码+数据库+文档)

学生成绩管理系统|基于Springboot的学生成绩管理系统设计与实现(源码+数据库+文档)

学生成绩管理系统目录 目录 基于Springboot的学生成绩管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员功能模块 2、学生功能模块 3、教师功能模块 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源…
阅读更多...
windows一开机一直循环：No Boot Device Found. Press any key to reboot the machine解决方法

windows一开机一直循环：No Boot Device Found. Press any key to reboot the machine解决方法

一、长按F12 二、选择Settiings/General/Boot Sequence 三、选择UEFI模式&#xff0c; 四、选择下方APPLY 五、退出&#xff1a;
阅读更多...
HTML-多媒体嵌入-MDN文档学习笔记

HTML-多媒体嵌入-MDN文档学习笔记

HTML-多媒体与嵌入 查看更多学习笔记&#xff1a;GitHub&#xff1a;LoveEmiliaForever MDN中文官网 HTML-中的图片 将图片放入网页 可以使用<img/>来将图片嵌入网页&#xff0c;它是一个空元素&#xff0c;最少只需src属性即可工作 <img src"图片链接"…
阅读更多...
计算机组成原理：存储系统【三】

计算机组成原理：存储系统【三】

&#x1f308;个人主页&#xff1a;godspeed_lucip &#x1f525; 系列专栏&#xff1a;计算机组成与原理基础 &#x1f680;1 只读存储器ROM✈️1.1 总览✈️1.2 各种ROM✈️1.3 计算机内部重要的ROM✈️1.4 总结 &#x1f680;2 主存储器与CPU的连接&#x1f6e9;️2.1 总览&…
阅读更多...
二维数组传参的本质(详解）

二维数组传参的本质(详解）

目录 一、前言二、分析本质三、总结 一、前言 有时候我们有⼀个⼆维数组的需要传参给⼀个函数的时候&#xff0c;我们是这样写的&#xff1a; #include <stdio.h> void test(int a[3][5], int r, int c) {int i 0;int j 0;for (i 0; i < r; i){for (j 0; j <…
阅读更多...
@ControllerAdvice 的介绍及三种用法

@ControllerAdvice 的介绍及三种用法

ControllerAdvice 的介绍及三种用法 浅析ControllerAdvice 首先&#xff0c;ControllerAdvice本质上是一个Component&#xff0c;因此也会被当成组建扫描&#xff0c;一视同仁&#xff0c;扫扫扫。 然后&#xff0c;我们来看一下此类的注释&#xff1a; 这个类是为那些声明了&…
阅读更多...
代码随想录算法训练营29期|day53 任务以及具体安排

代码随想录算法训练营29期|day53 任务以及具体安排

第九章 动态规划part10 121. 买卖股票的最佳时机 // 解法1 class Solution {public int maxProfit(int[] prices) {if (prices null || prices.length 0) return 0;int length prices.length;// dp[i][0]代表第i天持有股票的最大收益// dp[i][1]代表第i天不持有股票的最大收…
阅读更多...
人工智能学习与实训笔记（二）：神经网络之图像分类问题

人工智能学习与实训笔记（二）：神经网络之图像分类问题

目录 四、图像分类问题 4.1 尝试使用全连接神经网络 4.2 引入卷积神经网络 4.3 分类函数Softmax 4.4 交叉熵损失函数 4.5 学习率优化算法 4.6 图像预处理算法 4.6.1 随机改变亮暗、对比度和颜色等 4.6.2 随机填充 4.6.3 随机裁剪 4.6.4 随机缩放 4.6.5 随机翻转 4.…
阅读更多...
【2024】如何订阅Netflix奈飞？Netflix奈飞购买教程

【2024】如何订阅Netflix奈飞？Netflix奈飞购买教程

【2024】如何订阅Netflix奈飞&#xff1f;Netflix奈飞购买教程 Netflix奈飞作为全球领先的在线流媒体平台之一&#xff0c;拥有丰富的影视资源和独家内容&#xff0c;成为了人们追剧的热门选择。本文将为您介绍如何订阅Netflix奈飞&#xff0c;并提供详细的购买教程&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023