html入门教程

已于 2023-04-04 15:59:32 修改
阅读量4.2k 收藏 73
点赞数 7
分类专栏： 前端 文章标签： html 前端 css
于 2023-03-17 16:49:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rulaixiong/article/details/129623458
版权
本文详细介绍了HTML的基础概念和结构，包括HTML的标签体系，如双标签、单标签、注释、head标签中的title、meta等，以及文本、媒体、列表、表格、表单、框架和标签类型的用法。通过学习，读者可以掌握搭建网页结构的基本技能。
摘要由CSDN通过智能技术生成

文章目录

一、 前端

在这里插入图片描述

构成 语言 描述
结构 HTML 网页元素和内容
表现 CSS 网页元素的外观和位置等页面样式（如颜色、大小等）
行为 JavaScript 网页交互

二、HTML

2.1 HTML概念

HTML，超文本标记语言（Hyper Text Markup Language），是一门描述性语言。标记，标签，元素，叫法不同，意思相同。HTML超文本标记语言主要通过标签的方式，对网页页面的文本、图片、音频、视频等内容进行描述。学习HTML，就是学习各种标签，来搭建网页的结构。

2.2 HTML结构

在这里插入图片描述

结构：!DOCTYPE

说明：作用是告诉浏览器用哪个文档规范来解析文档

标签：html

说明：用于搭建HTML网页文档结构和网页布局

标签：head

说明：用于定义HTML网页文档的头部,它是所有头部元素的容器

标签：body

说明：用来定义HTML网页文档的主体区域

标签：meta

说明：用来描述HTML网页文档的属性

标签：title

说明：用来放到HTML网页文档的头部，是搜索引擎首要抓取的目标代码

2.21 标签

标签，也叫作标记，是由一对尖括号<>，里面包含单词组成

2.4.1 双标签
<html></html>
2.4.2 单标签
<br>
2.4.3 标签关系

嵌套关系

<html>
    <head>
    </head>
</html>

并列关系

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

2.3 注释

注释用来帮助程序员记录程序设计方法，辅助程序阅读

在这里插入图片描述

2.4 head标签

2.4.1 title标签

双标签，定义网页的标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

在这里插入图片描述

2.4.2 meta标签

是单标签，用来描述HTML网页文档的属性

2.4.2.1 name属性
属性值 说明
keywords 网页关键字，多个关键字用逗号隔开
description 网页描述
author 作者
copyright 版权信息 
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 网页关键字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 网页描述 -->
    <meta name="description" content="基础前端知识">
    <!-- 网页作者 -->
    <meta name="author" content="buddha">
    <!-- 网页版权信息 -->
    <meta name="copyright" content="版权所有，翻版必究">
</head>
<body>

</body>
</html>

在这里插入图片描述

标签属性：

1、标签的属性写在开始标签内部

2、标签名与属性之间要有空格隔开

3、一个标签可以同时存在多个属性

4、属性之间以空格隔开

5、属性没有先后顺序之分

2.4.2.2 http-equiv属性
属性值 说明
Content-Type 定义网页所使用编码
refresh 定义网页自动刷新跳转 
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 设置网页编码完整写法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 设置网页编码简写写法 -->
    <meta charset="UTF-8">
    <!-- 网页打开3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>
2.4.3 style标签

是双标签，用来定义标签的css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css内联样式写这里 */
    </style>
</head>
<body>

</body>
</html>
2.4.4 link标签

是单标签，是用来引入外部css样式文件

<link rel="stylesheet" href="css/index.css" type="text/css">
2.4.5 script标签

是双标签，是用来写JavaScript代码的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 这里写JavaScript代码 */
    </script>

</head>
<body>

</body>
</html>
2.4.6 base标签

是单标签，是用来设置整个网页的基础路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

开发中很少用到，有人使用知道就行

上面所述标签是放在head标签里的，接下来接触的标签都是放在body标签内的

2.5 文本标签

2.5.1 标题标签

是双标签，h是header的缩写

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

在这里插入图片描述

特点：

1、字体加粗

2、独占一行

3、从h1到h6，字体逐渐减小

4、使用标签的主要意义是告诉搜索引擎这是一段文字的标题

5、

在一个页面最多只能有一个，不要用多个

2.5.2 段落标签

是双标签，p是paragraph的缩写

<p>这是一段文字</p>
<p>这是一段文字</p>
<p>这是一段文字</p>

在这里插入图片描述

特点：

1、独占一行

2、段落与段落之间，存在间隙

2.5.3 换行标签
最低0.47元/天 解锁文章
程序员buddha2080
关注
专栏目录
HTML基础入门教程
lanadelrey13的博客
04-13 3489
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 一、HTML编辑器推荐 博主使用的是VS Code工具(Visual Studio Code)来编辑HTML，也可以使用其他更专业的编辑器。 VS Code安装教程参考：VScod..
HTML基础（新手入门教程）
华夏天骄
05-17 5163
「学习笔记」HTML基础 前言 勤做笔记不仅可以让自己学的扎实，更重要的是可以让自己少走弯路。有人说:“再次翻开笔记是什么感觉”，我的回答是:“初恋般的感觉”。或许笔记不一定十全十美，但肯定会让你有种初恋般的怦然心动。???????? 本章着重复习Html的基础内容，学习Html究竟要学些什么呢？主要是学习各种标签，来搭建网页的“结构”。✨✨ 本篇文章主要由五个章节构成，从WEB标准到初识HTML，接着学习HTML常用标签，最后学习表格列表和表单。????????开始充电之旅啦~~~ 一、认识WEB **「
HTML基础学习
weixin_73870552的博客
12-04 2444
1.HTML简介HTML（Hyper Text Markup Language）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行语义化的描述。HTML和其他编程语言不同，HTML不是一门真正意义上的编程语言，而是一种标记语言，通过带有尖角号的标签对文本进行标记，从而实现网页的结构搭建。
HTML基础知识入门大全
最新发布
HTDiiii的博客
08-20 1506
HTML 什么是 HTML HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。两端的标签可以使内容变成超链接，以连接到另一个页面；使字体表现为斜体等。 HTML 标签/元素 HTML 属性 第一个 HTML <!-- 文档的类型 ，根据类型可以知道当前文档的版本-->
【前端学习笔记】HTML 基础
2401_84304834的博客
04-18 2331
HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。它允许用户通过结合文本、图像、链接、格式等元素来构建网页，并通过浏览器进行解析和显示。HTML文件通常以.html或.htm为扩展名，包含一系列的标签（tags），这些标签用于定义网页的结构、样式和内容。
HTML入门教程
乐于探索,乐于奉献,追求极致,向往生活
09-02 748
初学前端内容，首先要学的当然是H5喽！目前HTML版本一直在演化，迭代；在了解HTML之前我们应该了解下基于Internet内容；Internet-（网）：由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构。 基于Internet上的程序         1、C / S 结构：Client / Server          特点：必须通过指定的客户端软件才能访问服务器端的一种...
HTML入门
2303_78892316的博客
03-06 537
HTML是超文本标记语言。超文本：比文本更强大，可以包含图片，链接等。标记语言：由标签构成的语言。所以我们学习HTML就是在学习标签。
HTML教程
m0_47599604的博客
01-27 249
简介 超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 HTML版本 HTML编辑器 常用的有：VS Code https://code.visualstudio.com/ Sublime Text http://www.sublimetext.com/ Notepad++ HTML元素语法 以开始标签开始，结束标...
html教程
qq_38266792的博客
05-31 1273
HTML（HyperText Markup Languag）1.代码格式：  &lt;!doctype html&gt;                 // html的声明  &lt;html lang="en"&gt;                // html的编码语言  &lt;head&gt;                        // html的网页头部   &lt;meta...
离线版单机版html基础教程html入门教程html自学手册.zip
04-14
这个离线版单机版的HTML基础教程是为初学者设计的，旨在帮助他们快速入门并掌握HTML的基本概念和用法。 教程可能包含以下几个主要部分： 1. **HTML简介**：解释HTML的起源、作用以及它在网页开发中的地位。这部分...
html初学者入门教程
05-22
在探讨HTML初学者入门教程之前，我们首先需要理解HTML是什么。HTML，全称为超文本标记语言（Hypertext Markup Language），是一种用来创建网页的标准标记语言。HTML文件是包含文本内容和标记（tags）的特殊文本文件...
HTML5基础教程PDF版
07-22
本课程是基于尚硅谷李立超老师的Web前端零基础入门HTML5+CSS3基础教程，旨在帮助初学者掌握HTML5的基本概念和语法。 首先，HTML（HyperText Markup Language）是一种标记语言，用于构建和呈现网页内容。HTML5作为...
html基础教程
07-22
资源名称：html基础教程内容简介：HTML基础-第一讲HTML基础-第二讲HTML基础第三讲---字体HTML基础第四讲---图像HTML基础第五讲---控制表格及其表项的对齐方式HTML基础第六讲---表格HTML基础第七讲---框架HTML基础第...
html新手教程
SUNNY_PLAY的博客
07-08 700
一.谈谈网页制作 1.制作一个静态网页的步骤为：确认目标-收集素材-网页布局-代码编写 2.网页布局：浏览器是根据.html文档的顺序逐行实现代码。 常见网页布局方式是将网页分成一块一块的区域组合而成。 常见块元素有：p div ul-li h1 h1…等，块元素独占一行。 常见内联元素：a img span等，内联元素里面不允许套块元素。 二.分区元素 1.div: div是较为重要的分区元素，...
HTML入门（详细）
热门推荐
qq_63525426的博客
05-03 3万+
HTML（全称为“超文本标记语言”）是一种用于创建Web页面的标记语言。它是Web开发的基础，允许开发者定义页面的结构、内容和样式。HTML使用一些标记或“标签”来描述文本和媒体内容的结构和格式，这些标签可以指示网页浏览器如何显示内容，包括标题、段落、列表、超链接、图像、音频、视频等等。HTML还可以与其他Web技术（如CSS和JavaScript）结合使用，以实现更复杂和交互性的Web应用程序。这篇文章只是介绍HTML的基础标签的使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员buddha2080

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值