html基础学习(一)

本文介绍了HTML相关知识。HTML是超文本标记语言,用于制作网页,有HTML 4.01和HTML5两个版本,后缀名常见为.html。还阐述了HTML文档基本结构,包括头部和主体部分,介绍了开发工具、浏览器、字符编码、SEO等内容,以及标签的组成、分类、关系、属性和HTML颜色的定义。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

HTML(超文本标记语言——HyperText Markup Language)是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其他技术则通常用来描述一个网页的表现与展示效果(如 CSS),或功能与行为(如 JavaScript)。 “超文本”(hypertext)是指连接单个网站内或多个网站间的网页的链接。链接是网络的一个基本方面。只要将内容上传到互联网,并将其与他人创建的页面相链接,你就成为了万维网的积极参与者。 HTML 使用“标记”(markup)来注明文本、图片和其他内容,以便于在 Web 浏览器中显示。HTML 标记包含一些特殊“元素”如<title>,<img>,<a>,<p>等等。 HTML 元素通过“标签”(tag)将文本从文档中引出,标签由在“<”和“>”中包裹的元素名组成,HTML 标签里的元素名不区分大小写。也就是说,它们可以用大写,小写或混合形式书写。例如,<title> 标签可以写成 <Title>,<TITLE> 或以任何其他方式。然而,习惯上与实践上都推荐将标签名全部小写。

一、HTML简介

1. HTML是什么

HTML:全称是Hyper Text Markup Language 中文名是超文本标记(标签)语言 作用:由各种标签组成,用来制作网页,告诉浏览器该如何显示页面

  • HTML不是一种编程语言,而是一种标记语言,它有一套标记标签 。

  • HTML使用标记标签来描述网页。

  • HTML文档包含了HTML标签及文本内容,HTML文档也叫做 Web 页面。

2. 作用

  • 制作网页,控制网页和内容的显示

  • 插入图片、音乐、视频、动画等多媒体

  • 通过链接检索信息

  • 使用表单获取用户信息,实现交互

3. 版本

W3C:World Wide Web Consortium 万维网联盟,制定Web技术相关标准和规范组织,HTML就是W3C制定的标准 两个版本:HTML 4.01、HTML5 官网:w3cschool官网 - 1000多本编程教程免费学

4. 后缀名

HTML文档的后缀名包含.html、.htm(常用的是.html)

二、HTML文档结构

1. 基本结构

1.1 简介

  • HTML标签是由尖括号包围的关键词,如 <html > ,通过都是成对出现的,如 <html></html>

  • 以<html>为根标签,包含: <head></head> 头部和 <body></body>主体部分

  • 头部提供关于网页的相关信息,如标题、文档类型、字符编码、关键字等摘要信息

  • 主体部分提供网页的具体内容,真正显示在页面中

  • 合理的进行缩进

  • 标签名不区分大小写,但一般都习惯全小写

1.2 开发工具

记事本notepad、Sublime、Notepad++、Dreamweaver、VSCode、WebStorm等 使用步骤:

  1. 新建文件(Ctrl+N),然后保存(Ctrl+S),指定后缀名为.html

  2. 编写HTML代码

  3. 在浏览器中打开文件

使用技巧:

  • 先保存再写代码,否则没有颜色提示

  • 创建一个文件夹,用于保存所有的网页内容,将文件夹拖放到Sublime中,便于管理

  • 显示/隐藏侧边栏

      方式1:查看——>侧边栏——>显示/隐藏侧边栏       方式2:先按Ctrl+K,紧接着按B

  • 显示多栏

      方式1:查看——>布局——>列数:2列       方式2:按Alt+Shift+2

1.3 浏览器

常见浏览器:IE微软、Chrome谷歌、Firefox火狐、Safari苹果 浏览器的作用是读取HTML文件,并以网页的形式显示 浏览器不会直接显示HTML标签,而是使用标签来解释网页的内容

1.4 网页结构

基本结构:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> 
<title>这是页面标题(w3cschool.cn)</title>
</head>
<body>
  <h1>这是一个标题。</h1>
  <p>这是一个段落。</p>
</body>
</html>

注意:

  • 对于中文网页需要使用 <meta charset="utf-8">声明编码,否则会出现乱码。

  • 有些浏览器(如 360 浏览器)会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">

  • 虽然 Web 浏览器读取 HTML 文件作为网页显示,但并不直接显示 HTML 标签。

  • HTML 标签的使用决定了如何向用户展现 HTML 页面的内容。

这基础结构出现的标签是 <html> 标签

<html> 元素定义了整个 HTML 文档。
​
这个元素拥有一个开始标签<html>,以及一个结束标签</html>。

<head> 标签 html <head>元素包含了所有的头部标签元素。

<head>元素必须包含文档的标题(`title`),可以包含样式、脚本、meta元数据信息以及其他更多的信息 <body>标签html <body> 元素定义文档的主体。

1.5 字符编码

<meta charset="UTF-8"> 识别网页所使用的字符编码

作用:保存和打开的字符编码需要统一设置,否则可能会出现乱码。 常见字符编码:

  1. UTF-8:万国码,国际化的字符编码,收录了全球语言的文字

  2. GB2312:6000+ 汉字

  3. GBK:20000+ 汉字

注意点:开发中 统一使用 UTF-8 字符编码 即可

<!--告诉浏览器所使用的HTML版本为HTML5-->
<!DOCTYPE html>
<!-- 中文网站 -->
<html lang="zh-CN">
<head>
    <!--charset="UTF-8" 规定网页的字符编码  -->
    <meta charset="UTF-8">
​
    <!-- ie(兼容性差) / edge -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
​
    <!-- 宽度 = 设备宽度 : 移动端网页的时候要用 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

1.6  SEO

1,简介 SEO(Search Engine Optimization):搜索引擎优化 作用:让网站在搜索引擎上的排名靠前 提升SEO的常见方法:

  1. 竞价排名

  2. 将网页制作成html后缀

  3. 标签语义化(在合适的地方使用合适的标签)

  4. ……

2,SEO三大标签

  1. title:网页标题标签

  2. description:网页描述标签

  3. keywords:网页关键词标签

1.7 ico图标设置

场景:显示在标签页标题左侧的小图标,习惯使用.ico格式的图标

image.png

语法格式:

<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">

实例:

     <!-- link:favicon : 浏览器标题栏图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

1.6 HTML5文档头部相关标签

1.设置页面标题标签<title>

标签之间的内容将显示在浏览器窗口的标题栏中

2.定义页面元信息标签<meta>

在HTML中,<meta>标签一般用于定义页面的特殊信息,例如页面关键字,页面描述等。他是提供给“搜索蜘蛛”看的。

在WEB技术中,我们一般形象地称搜索引擎为“搜索蜘蛛”或“搜索机器人”

简单地说,<meta>标签就是告诉“搜索蜘蛛”这个页面是做什么的。让更多人可以搜到/

<meta>属性:

  • name:用于指定元数据的名称

  • http-equiv:用于指定HTTP头部信息。可以改变浏览器对待页面的行为方式

name属性的取值如表所示:

属性值说明
keywords网页关键字,可以有多个,而不只一个
description网页描述
author网页作者
copyrght(版权)网页信息
2.1 <meta>中name属性
  1. 在<meta>标签中使用name和content属性可以为搜索引擎提供信息。

<meta name="名称" content="值">

属性说明:

  • name属性用于提供搜索内容的名称

  • content属性用于提供对应的搜索内容值

实例:

  • 设置网页关键字,例如中国大学MOOC网站的关键字设置如下:

<meta name-"keywords"
content="中国大学Mooc,Mooc,慕课,在线学习,在线教育,
大规模开放式在线课程,网络公开课,视频公开课,大学公开课,大学Mooc,Icourse163,
幕课网,MOOc学院"/>

参数说明:

  • name属性的值为keywords,用于定义搜索内容名称为网页关键字

  • content属性用于定义关键字的具体内容,多个关键字内容之间可以用“,”分割。

  • 设置网页描述,例如某图片网站的描述信息设置如下:

<meta name="description"  itemprop-"description" content-"中国大学MoOc(蒸课)是爱课程网携手网易云课堂打造的在线学习平台,每一个有提升意愿的人,
都可以在这里学习我国优质的大学课程,学完还能获得认证证书。
中国大学Mooc是国内优质的中文Mooc学习平台,拥有众多985高校的大学课程,与名师零距离接触。"/>

参数说明:

  • name属性的值为description,用于定义搜索内容名称为网页描述

  • content属性用于定义描述的具体内容

  • 设置网页作者,例如可以为网站增加作者信息:

<meta name="author" content="技术部">
  • name属性的值为author,用于定义搜索内容名称为网页作者

  • content属性用于定义具体的作者信息

  • 如果要声明网页文档的版权归属于某个人或某个组织,可以在meta标签中使用name属性,属性值为"copyright":

<meta name="copyright" content="Copyright © 2023 TOM">
2 . <meta>中http-equiv属性

在<meta>标签中使用http-equiv和content属性可以设置服务器端发送给浏览器的头部信息,为浏览器显示该页面提供相关的参数标准

<meta http-equiv="名称" content="值">

属性说明:

  • http-equiv属性提供参数

  • content属性提供对应的参数值。

实例:

  • 设置字符集

例如,将字符集设置为GBK,代码如下:

<meta http-equiv="Content-Type" content="text/html;charset=gbk">
  • http-equiv属性的值为Content-Type

  • Content属性的值为text/html和charset=gbk,这两个属性值中间用";"隔开。

这段代码用于说明当前文档类型为HTML,字符集为中文编码

在HTML5中,字符集的写法简化,变为如下代码:

<meta charset="utf-8">
  • 设置页面自动刷新与跳转

例如,定义某个页面6s后跳转到百度页面,代码如下:

<meta http-equiv="refresh" content="6; url=http://www.baidu.com">
  • http-equiv属性的值为refresh

  • content的值为数值和URL,中间用“;”隔开。

这段代码用于在规定的时间后跳转到目标页面,时间以秒为单位

2. 标签

2.1 标签组成

一个完整的HTML标签的组成:

<标签名 属性名="属性值">内容</标签名>

说明:属性值要用引号引起来,一般使用双引号

2.2 标签分类

根据标签是否关闭,分为:关闭型、非关闭型

  • 关闭型:有结束标签,即成对出现

<title></title>
<body></body>
<h1></h1>
  • 非关闭型:没有结束标签 根据标签是否独占一行,分为:块级标签、行级标签

  • 块级标签:显示为块状,独自占一行

<h1></h1>
<hr/>
  • 行级标签:在行内显示,可以与其他内容在同一行显示

<span></span>
  • 行内块标签:具有行内元素的特性,又具有块级元素的特性。

<textarea rows="4" cols="50" style="width: 100%; height: 50px;"></textarea>
<img>
<input>

提示:行内块标签可以在一行内显示,并且可以设置宽度和高度。

2.3 标签关系

包含(嵌套)关系:<head> <title></title> </head> 
父子关系,<title>嵌套在<head>中<head>为父、<title>为子。
​
并列关系:<html> <head></head> <body></body> </html>  
兄弟姐妹<head>`与`<body>`并列同级于<html>`中,<head>和<body>是兄弟关系。

注意: 在并列关系的例子中,<head><body>两者与<html>也是父子关系。

2.4 标签属性

属性是 HTML 元素提供的附加信息。

  • HTML 元素可以设置属性

  • 属性可以在元素中添加附加信息

  • 属性一般描述于开始标签

  • 属性总是以键值对(名称/值)的形式出现,比如:name="value"。

设置属性的基本语法格式:

<标签名 属性1=“属性值”  属性2=“属性值”  属性3=“属性值”....>内容</标签名>

属性实例: 这是一个链接使用了 href 属性。

<a href="http://www.baidu.cn">这是一个链接</a>  <!--点击该标签,跳转到地址所在的地方-->

键值对的定义:

  • 键:值的编号或名称。

  • 值:要存放的数据。

2.4.1 html属性值

属性值应该始终被包括在**引号内**

注意:**双引号**是最常用的,不过使用单引号也没有问题。

在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:

name='Bill "HelloWorld" Gates'

注意:

  • 属性和属性值对大小写不敏感。

  • 但在推荐标准中,依然推荐使用小写的属性/属性值。

2.4.2 HTML 常用的属性

下面列出了 HTML 常用的属性,适用于大多数 HTML 元素。

属性描述
class为 html 元素定义一个或多个类名(类名从外部样式文件引入或在 HTML 文件的<style>标签中定义)
id定义元素的唯一 id
style规定元素的内联样式
title规定元素的额外信息(可在工具提示中显示)

class 属性 定义: 为 HTML 元素定义一个或多个类名

注意:class 属性通常用于指向样式表中的类。可重复

例子

<p class="intro">这是一个段落,定义了一个类名。</p>
​
<p class="intro color">这是另一个段落定义多个类名。</p>

id 属性 定义: HTML 元素的唯一的 id

注意:id 在 HTML 文档中必须是唯一的

例子:

<h1 id="header">hello,world</h1>

注意: 一个 id 属性只能定义给一个 HTML 元素,id 是唯一的。**

style属性 定义:用于为元素提供内联CSS样式

注意: 内联CSS是指直接在HTML元素中应用CSS样式,而不是在外部或内部样式表中定义样式。

<p style="background-color:blue; color:white;">这是一个段落。</p>
<!-- 该标签使p标签范围中的背景颜色是蓝色,字体颜色是白色 -->

多个属性要用 分号(;)隔开

2.5 HTML颜色

HTML颜色除了特定的标签要求外,都是由十六进制符号,颜色的英文单词

1. HTML 颜色由一个十六进制符号来定义,这个符号就由红色绿色蓝色的值组成(RGB)。

每种颜色的最小值是 0(十六进制:#00),最大值是 255(十六进制:#FF)

rgb:red green blue的缩写

2. 由英文单词来定义,就是普通的red(红色),blue(蓝色),orange(橙色)等。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值