HTML快速入门学习笔记

最新推荐文章于 2023-01-13 19:42:50 发布

Goallegoal

最新推荐文章于 2023-01-13 19:42:50 发布

阅读量353

点赞数

分类专栏： web技术文章标签： html5

本文链接：https://blog.csdn.net/qq_40644809/article/details/105997740

版权

本文是HTML快速入门的学习笔记，介绍了HTML的基本概念、开发工具选择，详细讲解了HTML网页结构、标签、元素、属性的关系，以及如何创建第一个网页。内容涵盖HTML头部、标题、水平线、段落、文本格式化、超链接、列表、表格、表单和排版布局，强调了HTML语义化标签的重要性。

摘要由CSDN通过智能技术生成

HTML快速入门学习笔记

HTML 介绍

HTML（HyperText Markup Language）即超文本标记语言，是用来描述网页的一种语言。用 HTML 编写的文档称为 HTML 文档，也叫做Web 页面，包括了 HTML 标签、文本、图片、视频等内容。标记语言是一套标记标签(markup tag)，不同于编程语言，markdown 语言也是一种标记语言。

HTML、CSS、JavaScript 的关系：
HTML、CSS、JavaScript 都是 Web 开发工程师必备的语言，HTML 用于承载网页的内容(文本、图片、语音、视频)；CSS 用于实现网页内容的装饰(字体、颜色、布局)；JavaScript 用于实现网页内容的特效(交互、弹出、滑动)。

开发工具

HTML、CSS、JavaScript 是Web开发工程师必备的语言，有很多 IDE 和编辑器都能支持这几种语言。
WebStorm：最强大的 Web 开发 IDE，JetBrains 出品。如果打算做全栈工程师，建议 JetBrains 系列都可以入手，代码支持、插件支持、项目管理等都能全部支持。
Sublime Text：最推荐的代码编辑器。跨平台、颜值高、速度快，算是代码编辑器里面的神器。
Dreamweaver：Adobe 出品的图形化 Web 开发工具，比较适合新手。

HTML网页结构

HTML 的网页结构由 HTML 版本声明、HTML 头部、HTML主体等几个部分组成。HTML 头部涉及页面标题、字符集、样式、链接等内容。HTML 主体部分是浏览器展现给用户的内容，包括标题、文本、段落、链接、图片、媒体等。所有的页面内容都由 HTML 标签来实现。

HTML标签、元素、属性关系

标签：HTML 页面由标签和内容组成，标签是成对出现，由开始和结束标签组成。
元素：HTML 元素指的是开始标签到结束标签的所有代码；元素的内容是开始和结束标签之间的内容；HTML 文档由嵌套的 HTML 元素组成。
属性：HTML 元素可以设置属性，属性是 HTML 元素提供的附加信息，属性一般描述于开始标签，属性总是以名称-值对的形式出现。

第一个网页

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>第一个网页-</title>
</head>

<body>
	<h1>第一个网页</h1>
    <p>2020/5/8</p>
</body>

</html>

网页结构

<!DOCTYPE html> <!-- 告知 Web 浏览器页面使用了哪种 HTML 版本，帮助浏览器正确显示网页 -->
<html lang="en"> <!-- html 标签，包括 head 和 body 两个模块 -->
<head>  <!--头部标签，里面的内容一般不显示在网页，主要给搜索引擎和浏览器使用-->
    <meta charset="UTF-8"> <!-- 设置 HTML 编码，防止出现乱码 -->
    <title>网页结构</title> <!-- 设置浏览器标题 -->
</head>
<body> <!-- 网页主体部分，内容会被浏览器解析显示给用户 -->
<h1>标题</h1>
<p>段落</p>
<a href="pinginglab.net">链接</a>
<img src ="pinginglab.net" alt="图片">
</body>
</html>

HTML头部

概述

head 元素包含了所有的头部标签元素。在 head 元素中你可以插入脚本（scripts）、样式文件（CSS）及各种 meta 信息。

头部标签

head，定义关于文档的信息。
title，定义文档标题。
base，定义页面上所有链接的默认地址或默认目标。
link，定义文档与外部资源之间的关系。
meta，定义关于 HTML 文档的元数据。
script，定义客户端脚本。
style，定义文档的样式信息。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--为网页定义描述内容-->
    <meta name="description" content="HTML 头部用于设置页面标题、关键词、链接、样式、脚本等">
    <!--为网页定义关键词-->
    <meta name="keywords" content="HTML">
    <!--定义作者-->
    <meta name="author" content="student">
    <title>头部</title>
    <!-- rel 规定当前文档与被链接文档之间的关系，其中 stylesheet 代表文档的外部样式表-->
    <!-- type 规定被链接文档的 MIME 类型-->
    <!-- href 规定被链接文档的位置-->
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <!-- script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件-->
    <script src="myscript.js"></script>
</head>
<body>

</body>
</html>

HTML标题

标题通过 <h1> - <h6> 标签进行定义， <h1> 定义最大的标题， <h6> 定义最小的标题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>
</html>

注：Ctrl + d 复制上一行；Ctrl + x 删除选中行。
在这里插入图片描述

HTML水平线

<hr> 标签在 HTML 页面中创建水平线，可以实现内容上下文的分隔。

HTML段落

段落是通过 <p> 标签定义的，一个<p>标签内的全部字符为一段，每个段落后会自动换行。

若希望在段落内实现换行，则需要使用<br>标签。

//折行
<br>标签可以实现在不产生一个新段落的情况下进行换行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <p>使用P标签实现段落功能</p>
    <p>每个P标签会自动换行</p>
    <p>P标签会忽略源码中的
    换行</p>
    <p>通过br标签实现<br>段内换行</p>
</body>
</html>

在这里插入图片描述

HTML文本

概述

HTML 文本具备多种格式化标签，可以实现文本的加粗、斜体、上下标、计算机输出等处理。常用文本处理标签主要涉及文本格式化标签、计算机输出标签、引用标签。

文本格式化标签

<b>，定义粗体文本。
<big>，定义大号字。
<em>，定义着重文字。
<i>，定义斜体字。
<small>，定义小号字。
<strong>，定义加重语气。
<sub>，定义下标字。
<sup>，定义上标字。
<ins>，定义插入字，下划线。
<del>，定义删除字，删除线。

计算机输出标签

<code>，定义计算机代码。
<kbd>，定义键盘码。
<samp>，定义计算机代码样本。
<tt>，定义打字机代码。
<var>，定义变量。
<pre>，定义预格式文本，例如保留空格和分行。

引用标签

<abbr>，定义缩写。
<acronym>，定义首字母缩写。
<address>，定义地址。
<bdo>，定义文字方向。
<blockquote>，定义长的引用，实现一段长文字段落的引用，并且会自动缩进。
<q>，定义短的引用语，实现一段短段落的引用，被引用文字会自动加上双引号。
<cite>，定义引用、引证。
<dfn>，定义一个定义项目。

HTML超链接

HTML 使用标签 <a> 来设置超文本链接。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。
可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

文本链接

<a href="http://www.baidu.com">百度</a>

最低0.47元/天解锁文章

Goallegoal

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录