标签(1)(详解)

news/2024/7/5 1:59:04

目录

标签

部分标签

标签之标题

标题介绍与应用

VSCode插件

标签之段落

换行

水平线

 标签之图片

网站中最多的元素

图片路径详解

绝对路径

相对路径

网络路径

标签之超文本链接 

超链接描述

超链接属性

超链接表现

标签之文本

常用文本标签


标签

部分标签

  1. <html>:定义HTML文档的根元素。
  2. <head>:包含有关文档的元信息,如标题、字符集、外部样式表等。
  3. <title>:定义文档的标题,显示在浏览器的标签页上。
  4. <meta>:提供关于文档的元信息,如字符集、作者、描述等。
  5. <link>:用于引入外部资源,通常用于链接样式表。
  6. <style>:用于在文档内部定义样式信息。
  7. <body>:包含文档的可见内容。
  8. <h1><h6>:定义标题,从最高级别到最低级别。
  9. <p>:定义段落。
  10. <a>:定义超链接,链接到其他页面或资源。
  11. <img>:插入图像,指定图像的源、大小等属性。
  12. <ul>:创建无序列表。
  13. <ol>:创建有序列表。
  14. <li>:定义列表项。
  15. <div>:用于组合其他元素,可以用于布局目的。
  16. <span>:用于标记文本的特定部分,通常与CSS一起使用。
  17. <table>:创建表格。
  18. <tr>:定义表格行。
  19. <td>:定义表格单元格。
  20. <th>:定义表格表头单元格。
  21. <form>:创建表单,用于收集用户输入。
  22. <input>:定义输入字段,如文本框、复选框等。
  23. <textarea>:定义多行文本输入框。
  24. <button>:创建按钮。
  25. <select>:创建下拉选择框。
  26. <option>:定义下拉选择框中的选项。
  27. <label>:定义表单元素的标签。
  28. <br>:插入换行。
  29. <hr>:插入水平分隔线。

标签之标题

标题介绍与应用

标题(Heading)是通过 <h1> - <h6>标签进行定义的。

<h1>定义最大的标题 <h6>定义最小的标题

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

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

VSCode插件

快速打开浏览器

扩展 -> 搜索open in browser -> 点击安装

正确使用标题

请确保将 HTML 标题标签只用于标题。

不要仅仅是为了生成粗体或大号的文本而使用标题。

正确使用标题有益于SEO

应该将< h1> 用作主标题(最重要的),其后是 <h2>(次重要的),再其次是 <h3>,以此类推

image-20211014171609998

标题标签位置摆放

在标签中添加属性:align="left | center | right" 默认居左

image-20211017140517014

标签之段落

段落是通过<p>标签定义的

<p>这是一个段落 </p> 
<p>这是另一个段落</p>

image-20211017125215977

换行

如果您希望在不产生一个新段落的情况下进行换行(新行),请使用 <br>

<br /> 元素是一个空的 HTML 元素。

<p>这个<br>段落<br>演示了分行的效果</p>

image-20211014175748915

水平线

<hr/>标签在 HTML 页面中创建水平线

<hr color="" width="" size="" align=""/>

 标签之图片

网站中最多的元素

网站中最多的元素毋庸置疑,一定是图片

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

<img src="" alt="" title="" width="" height="">

注意事项

<img>是单标签,不需要进行闭合操作

属性:

  1. src:路径(图片地址与名字)
  2. alt:规定图像的替代文本
  3. width:规定图像的宽度
  4. height:规定图像的高度
  5. title:鼠标悬停在图片上给予提示

图片路径详解

绝对路径

绝对路径是电脑的盘符存储与访问的具体地址

E:\itbaizhanCode\1.jpg
<img src="E:\itbaizhanCode\1.jpg">

相对路径

两者相对关系,两者在同⼀路径下可以直接访问

  1. 子级关系: /

  2. 父级关系: ../

  3. 同级关系: ./(可以省略)

网络路径

具体的⽹络地址: http://iwenwiki.com/api/newworld/images/n1.png

标签之超文本链接 

超链接描述

HTML使用标签 <a>来设置超文本链接

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档

<a href="url">链接文本</a>

超链接属性

在标签<a>中使用了href属性来描述链接的地址

默认情况下,链接将以,以下形式出现在浏览器中:

  1. 一个未访问过的链接显示为蓝色字体并带有下划线。

  2. 访问过的链接显示为紫色并带有下划线。

  3. 点击链接时,链接显示为红色并带有下划线。

特别提示

后期我们会通过CSS样式修改掉这些效果

超链接表现

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

标签之文本

常用文本标签

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

特别提示

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


http://lihuaxi.xjx100.cn/news/1459205.html

相关文章

复习vue3,简简单单记录

这里的知识是结合视频以及其他文章一起学习&#xff0c;仅用于个人复习记录 ref 和reactive ref 用于基本类型 reactive 用于引用类型 如果使用ref 传递对象&#xff0c;修改值时候需要写为obj.value.attr 方式修改属性值 如果使用reactive 处理对象&#xff0c;直接obj.att…

用pytorch实现google net

GoogleNet&#xff08;也称为Inception v1&#xff09;是由Google在2014年提出的一个深度卷积神经网络架构。它在ImageNet Large Scale Visual Recognition Challenge (ILSVRC) 2014比赛中取得了优秀的成绩&#xff0c;并引起了广泛的关注。 GoogleNet的设计目标是构建一个更…

学校信息管理系统说明文档

目录 0学生信息管理系统体验教程. 4 0.0Student management异地打开方法&#xff1a;. 4 1. 管理系统设计需求分析. 6 1.1 需求介绍. 6 1.2功能需求. 6 1.2.1 学生信息录入. 6 1.2.2 学生信息查询. 6 1.2.3 权限管理. 6 1.2.4 添加学生信息验证. 6 2.功能介绍. 7 2.1…

百度又开源一款压测工具,可模拟几十亿的并发场景,太强悍了

dperf 是百度开源的一款基于 DPDK 的 100Gbps 网络性能和负载测试软件&#xff0c;能够每秒建立千万级的 HTTP 连接、亿级别的并发请求和数百 Gbps 的吞吐量。 优点 性能强大&#xff1a; 基于 DPDK&#xff0c;使用一台普通 x86 服务器就可以产生巨大的流量&#xff1a;千万…

由于找不到d3dx9_43.dll无法继续执行代码怎么解决

我们在安装PS&#xff0c;吃鸡等软件跟游戏的时候&#xff0c;有可能安装完之后出现以下问题&#xff08;特别是win7或者win8系统&#xff09; 错误&#xff1a; 打开PS或者吃鸡等游戏的时候出现这个错误&#xff1a;无法启动此程序&#xff0c;因为计算机中丢失d3dx9_43.dll。…

05-微信小程序常用组件-表单组件

05-微信小程序常用组件-表单组件 文章目录 表单组件button 按钮案例代码 form 表单案例代码 image 图片支持长按识别的码案例代码 微信小程序包含了六大组件&#xff1a; 视图容器、 基础内容、 导航、 表单、 互动和 导航。这些组件可以通过WXML和WXSS进行布局和样式设…

MOM or MES:如何选择适合工厂的制造管理系统?

在现代制造业中&#xff0c;有效的制造管理系统对于工厂的生产效率和竞争力至关重要。这衍生出来了两个常见的解决方案&#xff1a;MOM&#xff08;Manufacturing Operations Management&#xff09;制造管理系统和MES&#xff08;Manufacturing Execution System&#xff09;制…

程序的DAC检查与LSM简介

程序的DAC检查 在Linux中&#xff0c;程序的DAC&#xff08;Discretionary Access Control&#xff0c;自主访问控制&#xff09;检查是指操作系统对程序执行期间对文件和资源的访问权限进行的检查。 Linux使用一种基于权限的访问控制模型&#xff0c;其中每个文件和资源都与…