前端入门篇 | HTML标签

最新推荐文章于 2024-08-09 21:30:00 发布

鹤茗_515

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量657

点赞数 10

分类专栏： web软件文章标签：前端 html

本文链接：https://blog.csdn.net/m0_55483876/article/details/140887713

版权

下一篇持续更新中… 如有错误欢迎指正！！！

文章目录

前言
- 学习安排
网页的相关概念
HTML标签（上）
网页开发工具-VSCode使用
- 安装插件
- 快捷键
vscode工具生成骨架标签新增代码
HTML标签（下）
综合案例
查阅文档（学习方法）

前言

关于学习

学习安排

这套笔记主要记录的是“网页布局”，通过H5C3来布局页面，这里分成两大块：

PC端的网页布局
移动端的网页布局
响应式布局（一套代码，多端适配）
- 学习目的:精通网页布局，也是前端人员必备的技能，为后面学习JavaScript打下坚实的基础
- 学习路线：

网页的相关概念

我们接下来是进行网页开发，一下相关概念需了解：

网页？

在这里插入图片描述

HTML？

在这里插入图片描述

网页的形成？

网页是由前端人员在一个HTML文件里面写上各种各样的HTML标签，写完后通过浏览器打开就能看到一个网页。

常用浏览器

在这里插入图片描述
GOOGLE浏览器站的市场份额较大，所以必备

浏览器内核

在这里插入图片描述

web标准

web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

为啥需要web标准

在这里插入图片描述

web标准的构成

在这里插入图片描述

HTML标签（上）

前言

学习目标

在这里插入图片描述

学习内容

在这里插入图片描述

HTML语法规范

基本语法概述

HTML标签是由尖括号包围的关键词，例如。
HTML标签通常是成对出现的，例如和,我们称为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如
,我们称为单标签

标签关系

包含关系（父子关系）

<head>
		<title></title>
</head>

并列关系（兄弟关系）

<head></head>
<body></body>

HTML基本结构标签

每个网页都有一个基本的结构标签（也成为骨架标签），页面内容也是在这些基本标签上书写的

HTML页面也称为HTML文档

<html>
	<head>
		<title>我的第一个页面</title>
	</head>
	<body>
		鹤茗的第一个HTML页面
	</body>
</html >

在这里插入图片描述

HTML常用标签

标签语义

学习标签是有技巧的，重点是记住每个标签的含义，是用来干嘛的标签。

标题标签< h1-h6 >（重要）

为了使网页结构更清晰，我们经常在页面中用到标题标签。HTML提供了6个等级的网页标题，即< h1 > ~ < h6 >

h是head缩写

//格式如下：
<h1>我是一级标题</h1>
//标题标签是一个双标签

标签含义：作为标题使用，并且根据重要性递减

特点：

加了标题的文字会变粗大
一个标题独占一行

<!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>
	<h1>一级标题</h1>
</body>
</html>

段落标签（重要）

在网页中，要把文字有条理地显示出来就需要将这些文字分段显示。在HTML标签中，< p >标签用于定义段落。它可以将整个网页分为若干个段落。

<p>我是一个段落标签</p>

单词paragraph的缩写，意为段落
标签含义：可以把HTML文档分割为若干段落。
特点：

文本在一个段落中会根据浏览器窗口的大小自动换行
段落和段落之间留有空隙

换行标签（重要）

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，那就需要使用换行标签< br/ >。

break的缩写

标签含义：强制换行
特点：

< br/ >是个单标签
换行标签只是简单的开始新的一行,跟段落标签不一样，段落之间会插入一些垂直的间距。

文本格式化标签

在网页中，有时需要为文字设置粗体斜体或下划线_等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签含义：突出，重要性比普通文字更重要。
在这里插入图片描述

< div >和< span >标签

< div >和< span >是没有含义的，他们就是一个盒子，用来装内容的。
例如：在这里插入图片描述

//格式：
<div>这是</div>
<span>那是</span>

div是division的缩写，意为分割
span意为跨距

特点：

< div >标签用来布局，

最低0.47元/天解锁文章

鹤茗_515

关注

10
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
前端入门篇 | HTML标签

这套笔记主要记录的是“网页布局”，通过H5C3来布局页面，这里分成两大块：PC端的网页布局移动端的网页布局响应式布局（一套代码，多端适配）学习目的:精通网页布局，也是前端人员必备的技能，为后面学习JavaScript打下坚实的基础HTML标签是由尖括号包围的关键词，例如。HTML标签通常是成对出现的，例如和,我们称为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。有些特殊的标签必须是单个标签（极少情况），例如,我们称为单标签表格的主要作用。
复制链接

扫一扫

专栏目录