【web前端】第一天-HTML标签（上）

最新推荐文章于 2024-07-26 15:05:55 发布
最新推荐文章于 2024-07-26 15:05:55 发布
阅读量261 收藏 1
点赞数
文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zero_Fiend/article/details/122421596
版权

目标

  • 说出标签的书写注意规范
  • 写出HTML骨架标签
  • 写出超链接标签
  • 写出图片标签并说出alt和title的区别
  • 说出相对路径的三种形式

一、HTML语法规范

  • 1.基本语法概述

1.1 HTML标签是由尖括号包围的关键词，例如<html>。

1.2  HTML标签通常是成对出现的，例如<html></html>，我们称为双标签。标签对中第一个标签称为开始标签，第二个标签是结束标签。

1.3 有些特殊的标签必须是单个标签（极少情况），例如<br/>，我们称为单标签。

  • 2.标签关系

可以分为两类：包含关系和并列关系。

二、HTML基本结构标签

  • 第一个HTML网页
<html>
    <head>
        <title> 第一个文件 </title>
    </head>
    <body>
        Hello World!!!
    </body>
</html>

    

标签名

定义

说明

<html></html>

HTML标签

页面中最大的标签，我们称为根标签

<head></head>

文档的头部

注意在head标签中我们必须要设置的标签是title

<title></title>

文档的标题

让页面拥有一个属于自己的网页标题

<body></body>

文档的主体

元素包含文档的所有内容，页面内容基本上都是放到body里面的

三、开发工具

Vscode

输入感叹号回车可以直接生成骨架标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个页面文件</title>
</head>
<body>
    Hello World!!!
</body>
</html>

  • VS Code工具生成骨架标签新增代码
    • <!DOCTYPE>标签

文档类型的声明标签（DOC-type）作用就是告诉浏览器使用的是哪种版本的HTML的版本。

注意：它必须位于文档最前面的位置，处于<html>标签之前；它不是一个HTML标签，它就是文档类型声明标签。

  • lang语言

用来定义当前文档显示的语言。

en定义语言为英语，zh-CN定义语言为中文。

实际上定义为en也能写中文，定义为zh-CN也能写英文。

  • charset字符集

字符集是多个字符的集合，以便计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该采用哪种字符编码。

Charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，其中包含了全世界所有国家需要用到的字符。

  • 总结

1.<!DOCTYPE html>文档声明类型标签，告诉我们浏览器这个页面采取html5版本来显示页面。

2.<html lang="en">告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示。

3.<meta charset="UTF-8"/>必须写，采取UTF-8来保存文字，如果不屑就会乱码，具体原理后面分析。

四、HTML常用标签

  • 标签语义

根据标签语义，在合适的地方给一个最为合理的标签，可以让界面结构更清晰。

  • 标题标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

HTML提供了6个等级的网页标题，即<h1>-<h6>。

单词head的缩写意为头部、标题。

特点：加了标题标签的文字会加粗变大，且占一行。

  • 段落和换行标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>在中国IT教育行业发展的轨迹中，<br /> 能始终秉承着初心做教育的企业为数不多，
    而在李开复老师的心中，传智播客就是其中之一。在11年的风雨历程中，传智播客在中国I
    T教育行业留下了“为莘莘学子改变命运而讲课，为千万学生少走弯路而著书”的独特烙印。
    同时，传智播客也凭借着良好的口碑、更注重品质的教学及优秀的业绩增长成功吸引了众多
    知名投资者们的青睐，其中不乏创新工场、经纬、君度、蓝图、北城壹号等多个投资机构。</p>
    
    <p>不久前，传智播客新加入了几位知名股东，其中包括创投圈的大咖——创新工场的李开复
        老师。在中国，李开复老师至少影响了70和80后两代人，然而翻开他的履历，我们并没
        有看到诸如马云、马化腾那样堪称传奇的成功经历，我们看到的只是一位厚积薄发、深
        耕在世界IT互联网行业多年的“导师”：</p>
</body>
</html>

在HTML标签中，<p>标签用于定义段落，意为paragraph，它可以将整个文章分段。

特点：文本在一个段落中会根据浏览器大小自动换行；段落和段落之间会有较大空隙。

在HTML标签中，<br />标签用于强制换行，意为break，将文字强制换行。

特点：<br />是一个单标签，且每行之间没有间隙。

  • 文本格式化标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>
<body>
    <p>我是<strong>加粗</strong>的文字</p>
    <p>我是<b>加粗</b>的文字</p>
    <p>我是<em>倾斜</em>的文字</p>
    <p>我是<i>倾斜</i>的文字</p>
    <p>我是<del>删除</del>的文字</p>
    <p>我是<s>删除</s>的文字</p>
    <p>我是带<ins>下划线</ins>的文字</p>
    <p>我是带<u>下划线</u>的文字</p>
</body>
</html>

在网页中，有时候需要给文字设置粗体、斜体或下划线等效果，就需要HTML中的文本格式化标签，突出重要性，比普通文字更重要。

语义

标签

说明

加粗

<strong></strong>或者<b></b>

更推荐使用<strong>标签加粗 语义更强烈

倾斜

<em></em>或者<i></i>

更推荐使用<em>标签倾斜 语义更强烈

删除线

<del></del>或者<s></s>

更推荐使用<del>标签删除 语义更强烈

下划线

<ins></ins>或者<u></u>

更推荐使用<ins>标签下划 语义更强烈

  • <div>和<span>标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div和span标签</title>
</head>
<body>
    <div>一个div分区占一行</div>
    <div>一个div分区占一行</div>
    <span>多个span可以占一行</span>
    <span>多个span可以占一行</span>
    <span>多个span可以占一行</span>
</body>
</html>

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。

<div>是division的缩写，表示分割、分区。<span>意为跨度、跨距。

特点：<div>标签用来布局，但是现在一行只能放一个<div>，大盒子；

 <span>标签用来布局，一行上可以多个<span>，小盒子。

  • 图像标签和路径（重点）
    • 图像标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签的使用</title>
</head>
<body>
    <h4>图像标签的使用:</h4>
    <img src="01.jpeg" />
    <h4>alt 替换文本 图像显示不出来时显示的文字:</h4>
    <img src="00.jpeg" alt="背景图片" />
    <h4>title 提示文本 鼠标放在图片上显示的文本:</h4>
    <img src="01.jpeg" alt="背景图片" title="背景图片" />
    <h4>给图像设置尺寸和边框:</h4>
    <img src="01.jpeg" alt="背景图片" title="背景图片" width="200" border="15" />
</body>
</html>

在HTML标签中，<img>标签用于定义HTML页面中的图像。

<img>是image的缩写，意为图像。

<img src="" />

图像标签的起他属性：

属性

属性值

说明

src

图片路径

必须属性

alt

文本

替换文字，图像不能显示的文字

title

文本

提示文本，鼠标放到图片上，显示的文字

width

像素

设置图像的宽度

height

像素

设置图像的高度

border

像素

设置图像的边框粗细

border一般不在图像属性中更改。

使用注意点：图像标签可以拥有多个属性，在标签名之后；属性之间不分先后顺序，属性与属性之间都用空格分开；属性采取键值对的形式，即key="value"的格式，就是 属性="属性值"。

  • 路径（前期铺垫知识）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路径使用</title>
</head>
<body>
    <img src="01.jpeg" />
    <img src="images/01.jpeg" />
    <img src="../01.jpeg" alt="背景图片" />
    <img src="D:\ZFiend\study\code-program\codefiles\vscode\HTML\study\day 01\01.jpeg" alt="绝对路径"/>
</body>
</html>

  • 目录文件夹和根目录

实际工作中，我们的文件应当放在一个目录文件夹中管理他们。

目录文件夹：就是普通文件夹，里面存放了我们做页面所需要的相关素材，比如html文件、图片等。

根目录：打开目录文件家的第一层就是根目录。

  • 路径

通常我们会新建一个文件夹来放这些图片文件（images），这时候再查找图像，就需要采用”路径“的方式来指定图像文件的位置。

路径可分为：

1.相对路径

2.绝对路径

相对路径：以引用文件所在位置为参考基础，而建立的目录路径。

就是图片相对于HTML文件的位置。

相对路径分类

符号

说明

同一级路径

图像文件位于HTML文件同一级 如<img src="baidu.gif" />

下一级路径

/

图像文件位于HTML文件下一级 如

<img src="images/baidu.gif" />

上一级路径

../

图像文件位于HTML文件上一级 如<img src="../baidu.gif" />

绝对路径：是指根目录下到目标文件的位置路径。

注意：绝对路径符号为\。

  • 超链接标签（重点）

在HTML标签中，<a>标签用于定义超链接，作用是从一个网页链接到另一个页面。

  • 链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

<a>为单词anchor的缩写，意为：锚。

两个属性作用如下：

属性

作用

href

用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。

target

用于指定链接或页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

  • 链接分类
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接使用</title>
</head>
<body>
    <h4>1.外部链接</h4>
    <a href="http://www.baidu.com" target="_blank">百度一下</a>
    <h4>2.内部链接</h4>
    <a href="10.超链接使用.html" target="_self">我链接我自己</a>
    <h4>3.空链接</h4>
    <a href="#">空链接</a>
    <h4>4.下载链接</h4>
    <a href="01.zip" target="_blank">图片下载</a>
    <h4>5.网页元素的链接</h4>
    <a href="http://www.baidu.com"><img src="01.jpeg" width="200"></a>
</body>
</html>
  1. 外部链接：如<a href="http://www.baidu.com"">百度</a>。
  2. 内部链接：网站内部页面之间的相互链接 直接链接内部页面名称即可，例如<a href="index.html">首页</a>。
  3. 空链接：如果当时没有确定链接目标时，<a href="#">空链接</a>。
  4. 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
  5. 网页元素的链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。

锚点链接：在我们点击链接，可以快速定位到页面中的某个位置。

  • 在链接文本的href属性中，设置属性值为#名字的形式，如<a href="#two">第二集</a>
  • 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如：<h3 id="two">第二集介绍</h3>

五、HTML中的注释和特殊字符

  • 注释

在HTML文件中便于阅读理解内容含义。

HTML中的注释以"<!--"开头，以"-->"结束。

快捷键crtl+/

  • 特殊字符

特殊字符

描述

字符的代码

空格符

&nbsp;

<

小于号

&lt;

>

大于号

&gt;

&

和号

&amp;

￥

人民币

&yen;

版权

&copy;

注册商标

&reg;

摄氏度

&deg;

+-

正负号

&plusmn;

X

乘号

&times;

除号

&divide;

平方

&sup2;

立方

&sup3;

        

Zero_Fiend
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
斑码教育大前端课堂笔记-html第三天
10-10
在斑码教育的前端课程中，HTML第三天的学习内容主要集中在深化对HTML的理解，以及掌握HTML5的一些新特性。HTML（HyperText Markup Language）是网页设计的基础，它用于构建网页的结构和内容。在本节课中，我们将深入...
HTML复习1
qq_40992225的博客
02-14 447
2.< ul>< /ul> 中只能嵌套 < li>< /li>，直接在 < ul>< /ul> 标签中输入其他标签或者文字的做法是不被允许的。1.< ol>< /ol>中只能嵌套< li>< /li>，直接在< ol>< /ol>标签中输入其他标签或者文字的做法是不被允许的。2.cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。2.< tr> < /tr> 标签用于定义表格中的行，必须嵌套在 < table> < /table>标签中。
Web前端----初识Html-前端最基础入门教学
软件测试的坑，让我来踩吧
08-05 687
随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下Html的语法，用来对Html进行学习。一、Html是什么？HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。...
前端入门教程(一)
qq_51164450的博客
07-22 1844
1.网页 1.1 什么是网页 网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。 1.2 什么是HTML HTML指的是超文本标记语言(Hyper Text Markup Language),它是用来描述网页的一种语言。 HTML不是一
斑码教育大前端课堂笔记-html第四天
10-11
2. **HTML标签**：HTML标签分为块级元素（如、、至等）和内联元素（如、、、等）。理解它们的区别并正确使用能有效组织网页布局。 3. **文本格式化标签**：如（粗体）、（斜体）、（下划线）、（删除线）等，用于...
斑码教育大前端课堂笔记-html第五天
10-14
在“斑码教育大前端课堂笔记-html第五天”这一资源中，我们主要聚焦于HTML（HyperText Markup Language）的学习，这是构建网页的基础语言。HTML5是当前广泛使用的版本，它在HTML4的基础上进行了诸多改进和扩展，使得...
斑码教育大前端笔记-HTML第二天
10-09
在第一天的学习中，我们可能已经了解了HTML的基本语法和元素，如HTML文档的基本结构（<!DOCTYPE html>、<html>、、），以及如何创建标题（到）、段落（）和文本格式化标签（、、、）。第二天的内容可能会进一步深入...
黑马前端第一天资料
01-02
"黑马前端第一天资料"提供的是入门级别的学习资源，适合初学者系统地了解和掌握前端开发的基础知识。以下将详细阐述HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）这两个核心概念。 HTML是网页...
网站基本布局CSS
m0_46608027的博客
07-24 761
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
yangshuquan的专栏
07-24 780
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 252
【代码】TS如何处理js模块的类型？
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 319
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 321
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 998
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
【CTFWP】ctfshow-web42
LongL_GuYu的博客
07-23 969
CTFWP，ctfshow-web42
Spring Cloud微服务项目统一封装数据响应体
洛*璃的博客
07-26 440
在微服务架构下，处理服务之间的通信和数据一致性是一个重要的挑战。为了提高开发效率、保证数据的一致性及简化前端开发，统一封装数据响应体是一种非常有效的实践。本文博主将介绍如何在 Spring Cloud 微服务项目中统一封装数据响应体，并分享一些最佳实践。
技术实践—微前端技术应用
最新发布
iOceanMind的博客
07-26 430
微前端是一种新兴的前端架构模式，是一种类似于微服务的架构，将微服务的理念应用于浏览器端。其核心理念是将一个大而单一的前端应用拆分为多个小型独立的微应用。这些微应用各自独立，可以由不同团队开发维护，部署，组合这些微应用，行成一个聚合应用。
前端开发知识-vue
modi000的博客
07-26 196
2.在javascript标签中创建vue对象，数据模型。一、vue可以简化前端javascript的操作。可以src中可以是vue的网址，也可以是本地下载。1.javascript中引入vue.js。主要特点是可以实现视图、数据的双向绑定。二、ngix是前端使用的主流服务器。后端使用的主流服务器是tomcat。3.在body体中，实现视图（标签）绑定。
Vue事件总线（EventBus）的概念、使用以及注意事项
weixin_53216033的博客
07-23 741
在Vue开发中，组件间的通信是不可避免的需求。对于父子组件间的通信，Vue提供了props和$emit/$on等内置机制。然而，当需要在非父子关系的组件间进行通信时，这些内置机制就显得力不从心了。这时，Vue事件总线（EventBus）作为一种灵活的解决方案应运而生啦。本篇文章将详细讲解Vue事件总线的原理、安装、使用及最佳实践，帮助大家更好地去理解和应用这一技术。
"HTML标签及常用属性总结-Web前端知识点
Web前端知识点总结.doc是一份关于HTML知识点的文档，其中详细总结了HTML的功能、思想和常用标签。HTML是用来制作静态网页的语言，通过HTML语言可以展现网页的全部内容。HTML的思想是一切功能都由标签实现，标签具有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值