【3.0】HTML基础

【一】HTML简介

【1】什么是HTML

超文本标记语言
如果想要让浏览器能够渲染出写的页面，都必须遵从HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)

【2】最基础的页面

<h1>hellow dream</h1>
<a href="https://meizitu.com">click me!</a>
<img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.XJ-2yBSMNIAvjkHkW8-r9gHaHa?w=190&h=190&c=7&r=0&o=5&pid=1.7" alt="my wifi">

上述语法就是HTML 用于构建网页的骨架(所有的网页都是由HTML组成)

【3】总结

HTML就是书写页面的一套标准

【二】HTML中的注释语法

由于HTML代码非常杂乱无章且非常多，所以我们习惯性的用注释来划分区域方便后续的查找

【1】单行注释

<!-- 单行注释 -->

【2】多行注释

<!--
多行注释1
多行注释2
多行注释3
-->

【三】HTML的文档结构

【1】基础结构

<html>
    <head></head>：head内的标签不是给用户看的，而是定义一些配置，主要是给浏览器看的
    <body></body>：body内的标签，写什么浏览器就渲染什么，用户就能看到什么
</html>

注意：HTML代码是没有格式的，可以全部写在一行，只不过我们习惯了缩进来表示代码

【2】基本结构

HTML的文档结构通常遵循以下基本结构

<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
    <meta charset="UTF-8">
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

首先，<!DOCTYPE html> 声明定义了当前文件是一个 HTML 文件。
- 接下来是 <html> 标签，它是整个 HTML 文档的根元素。
- 在 <html> 标签之内，有两个主要的部分： <head> 和 <body>。
<head> 用于定义文档的头部信息，其中可以包含一些重要的元素
- 例如 <title> 设置页面标题，<meta> 设置字符编码、关键词等。
- 这些元素通常不会展示在浏览器中，而是提供一些关于页面的描述和配置。
<body> 则包含了整个页面的可见内容
- 例如段落、标题、图像、链接等。
- 这些元素将直接影响和呈现到用户所看到的页面上。
需要注意的是，HTML 的标签是有层级关系的，内部的标签必须位于外部标签的范围之内，无法单独存在。

【四】HTML标签的分类

根据标签的闭合情况，可以分为单标签和双标签

【1】双标签

有头有尾
内容写在中间

<h1></h1>
<a href=""></a>

【2】单标签(自闭标签)

标签自己闭合，不需要另一半标签

<img/>

【五】head常用标签

【1】title

标题标签
控制网页小标题

<title>Title</title>

【2】style

内部用来书写CSS代码

<style></style>

【3】script

内部用来书写JS代码(可以引入外部JS文件)

<script></script>

【4】link

引入外部CSS文件

<link rel="stylesheet" href="">

【5】meta

（1）介绍

<meta>标签是一种HTML标签，用于在网页中提供元数据（metadata）。
<meta>标签是一种HTML标签，用于在网页中提供元数据（metadata）。
- 元数据是描述数据的数据，它们提供关于网页内容、字符集、作者、关键字等信息，帮助搜索引擎和浏览器理解和处理网页。

<meta http-equiv="refresh" content="">

（2）常见的`<meta>`标签

<meta charset="字符集">：
- 指定网页文档使用的字符集，常见的字符集有UTF-8、ISO-8859-1等。
<meta name="viewport" content="viewport设置">：
- 用于指定网页在移动设备上的视口（viewport）设置，包括网页的宽度、初始缩放比例等。
<meta name="keywords" content="关键词">：
- 用于指定网页的关键词，帮助搜索引擎判断网页的相关性。
<meta name="description" content="网页描述">：
- 用于提供对网页内容的简要描述，显示在搜索结果页面中作为网页摘要。
<meta name="robots" content="指令">：
- 指定搜索引擎对网页的索引和抓取规则，如通过"noindex"禁止索引网页。
<meta http-equiv="参数" content="内容">：
- 用于设置HTTP响应头信息
- 如<meta http-equiv="refresh" content="5;url=http://example.com/">可在5秒后自动跳转到指定地址。

<meta>标签通常放置在HTML文件的<head>标签内，起到提供关于网页的元数据的作用。

正确使用<meta>标签可以优化网页的SEO、改善用户体验以及与搜索引擎的交互。

【六】body常用标签

【1】`<h1>`

级别标题标签
用于显示网页标题的级数(1-6级)

<h1></h1>

【2】`<b>`

加粗文字

 <b></b>

【3】`<i>`

斜体

<i></i>

【4】`<u>`

下划线

<u></u>

【5】`<s>`

删除线

<s></s>

【6】`<p>`

段落标签

<p></p>

一个 p 标签就是一行

【7】`br`

换行

【8】`hr`

水平分割线

【小结】常用的`<body>`标签

在HTML中，<body>标签是用来定义页面的主体内容的。
它是HTML文档的必需标签之一，包围了展示在浏览器窗口中的实际内容。
<h1>到<h6>：这些标签用于定义标题的级别，<h1>表示最高级别的标题，<h6>表示最低级别的标题。
<p>：该标签用于定义段落，在网页中呈现一段文本。
<a>：用于创建一个超链接，可以使用户点击链接跳转到其他页面或下载文件。
<img>：用于在网页中插入图像，可以通过指定图像的URL来显示图片。
<ul>和<li>：这些标签用于创建无序列表，其中<ul>定义列表，而<li>定义每个列表项。
<ol>和<li>：这些标签用于创建有序列表，其中<ol>定义列表，而<li>定义每个列表项。
<div>：该标签可以用来将文档分成逻辑部分或组合内容。
<span>：该标签用来对文本进行样式化或划定特定区域，通常与CSS一起使用。
<table>、<tr>和<td>：这些标签用于创建表格，其中<table>定义整个表格，<tr>定义表格的行，<td>定义表格的单元格。
<form>：用于创建一个表单，用户可以在表单中输入信息并提交。

【七】标签的分类

HTML中的标签可以分为两种主要类型：块级标签和行内标签。

【1】块级标签（Block-level elements）

（1）介绍

块级标签是指一类会独自占据一行的HTML元素。
它们从新的一行开始，直到遇到下一个块级标签或行内标签。
块级标签通常用于组织和结构化页面的不同部分，并且可以包含其他块级元素和行内元素。

（2）常见的块级标签

<div>：用于定义文档中的一个区域或一个区块。
<p>：用于定义段落。
<h1>-<h6>：用于定义标题的级别。
<ul>：用于创建无序列表。
<ol>：用于创建有序列表。
<table>：用于定义表格。

【2】行内标签（Inline elements）

（1）介绍

行内标签是指在一行内显示的HTML元素，它们不会打断当前行并且只占据所需的内容宽度。
行内标签通常用于插入和标记文本中的小片段或注释，并且不能包含块级元素，只能包含其他行内元素。

（2）常见的行内标签

<span>：用于对文本的某个部分进行样式化或划定特定区域。
<a>：用于创建超链接。
<strong>：使文本加粗显示。
<em>：使文本斜体显示。
<img>：用于插入图像。
<br>：用于换行。

（3）补充

需要注意的是，HTML5中引入了一些新的标签和元素，它们的性质可能介于块级和行内之间，被称为块级行内元素（block-level inline element）或行内块级元素（inline block-level element）
- 如 <button>、<input> 等，其具体表现取决于CSS的属性和样式。

【3】总结

块级标签可以修改长度，行内标签不可以，修改了也不会发生变化
块级标签内部可以嵌套任意的块级标签和行内标签
- 但是 p 标签虽然是块级标签，但是他只能嵌套行内标签不能嵌套块级标签
- 如果套用这个，浏览器也会帮助处理，有报错，用户也感觉不到
小结
- 只要是块级标签都可以嵌套任意块级标签和行内标签(P标签除外)
行内标签不能嵌套块级标签可以嵌套行内标签

【八】特殊符号

【1】空格` `

&nbsp;

【2】大于号`>`

&gt;

【3】小于号`<`

&lt;

【4】&符`&`

&amp;

【5】￥符`¥`

&yen;

【6】版权`©`

&copy;

【7】商标`®`

&reg;

【小结】

特殊符号是指在文本中使用的一些非常规字符，这些字符通常不直接出现在键盘上，需要通过特定的键盘组合或者字符实体来输入。以下是一些常见的特殊符号及其对应的表示方法：
- 版权符号：©，表示方法为 © 或者 ©。
- 注册商标符号：®，表示方法为 ® 或者 ®。
- 商标符号：™，表示方法为 ™ 或者 ™。
- 惊叹号：！，直接输入 "!" 即可。
- 问号：？，直接输入 "?" 即可。
- 减号：-，直接输入 "-" 即可。
- 加号：+，直接输入 "+" 即可。
- 百分号：%，直接输入 "%" 即可。
- 等于号：=，直接输入 "=" 即可。
- 乘号：×，表示方法为 × 或者 ×。
- 除号：÷，表示方法为 ÷ 或者 ÷。
- 分号：；，直接输入 ";" 即可。
- 冒号：：，直接输入 ":" 即可。
- 单引号：'，直接输入 "'" 即可。
- 双引号："，直接输入 """ 即可。

【九】常用标签

【1】div标签

它是最常见的HTML容器标签，用于将文档分隔成独立的区块。
Div标签可以用来包裹其他标签，通过设置样式来控制其中内容的布局和外观。
它没有具体的语义含义，常用于定义页面的整体结构或划分不同的内容区域。

【2】span标签

它是一个内联元素，主要用于对文本或一小段文本进行样式上的控制。
Span标签通常用于对特定部分进行样式修饰或添加特殊效果
- 例如修改文字颜色、加粗、斜体等，或者配合CSS实现一些交互效果。
与Div标签不同，Span标签没有具体的语义意义，更多地用于样式上的调整。
在构造初期最常使用，页面的布局一般先用div和span占位后再去调整样式，尤其是div使用最为频繁
可以把div标签看成一块区域
- 也就意味着div标签来提前规划所有的区域。之后再向该区域内填写内容即可
普通的文本先用span占位
- 然后再去装饰页面

【3】img标签

图片标签

<img src="" alt="" title="" height="" width="">

src
- 存放图片的路径(可以是本地也可以是网页链接)
alt
- 当图片加载不成功时，加载出的图片描述性信息
title
- 当鼠标悬浮在图片上面之后，自动展示图片信息
height/width
- 高度和宽度
- 当你在调整其中一个参数时，另一个参数也会等比例缩放
- 当在调整两个参数而不考虑比例时，就会造成图片的失真

【4】a标签

链接标签

<a href="" target="_blank"></a>
<a href="" target="_self"></a>

href
- 指定 url 用户点击该链接就会跳转到目标链接
  - 当 a 标签指定的网址从来没有被点击过，那么a标签的字体颜色就是蓝色
  - 当 a 标签指定的网址从来被点击过后，那么a标签的字体颜色就是紫色
- 可以放其他标签的id值，点击即可跳转到对应的标签位置
target
- _self
  - 默认 a 标签是在当前页面完成跳转
- _blank
  - 跳转到新建的标签页

a标签的锚点功能

比如点击一个文本标题，自动跳转到标题对应的区域

<a href="" id="d1">顶部</a>
  <a href="" id="d2">中间</a>
  <a href="" id="d3">底部</a>

  <a href="#d1">回到顶部</a>
  <a href="#d2">回到中间</a>

【5】总结

Div标签用于对页面进行布局和结构划分
而Span标签则更多地用于对文字或一小段文本进行样式控制。
根据需要，可以通过设置不同的class或id来给这些标签添加样式，并使用CSS来对其进行进一步的控制和美化。

【十】标签的两个重要属性

【1】id值

是类似于标签的唯一标识符，用于在同一个页面上唯一标识一个特定的元素。
每个id值在整个文档中都必须是唯一的，不能重复使用。
通过id值，我们可以在JavaScript或CSS中引用特定标签，并对其进行操作或样式化。
类似于标签的身份证号，在同一个页面上id值不能重复

【2】class值

一个HTML标签可以具有多个class值，这样可以将多个不同的样式或行为应用于同一个标签。
多个class值之间使用空格分隔。
通过class值，我们可以定义一组相关的样式或行为，并将其应用于多个标签，实现代码的重用和简化。
类似于面向对象中类的继承，一个class可以继承多个class值

【十一】列表标签

【1】无序列表

<ul>
    <li>第一项</li>>
    <li>第二项</li>>
    <li>第三项</li>>
    <li>第四项</li>>
</ul>

第一项
第二项
第三项
第四项

无序列表是使用频率最高的列表标签
虽然ul标签很难看，但是只要是排版一直的几行数据基本上用的都是ul标签

【2】有序列表

<ol>
    <li>第一项</li>>
    <li>第二项</li>>
    <li>第三项</li>>
    <li>第四项</li>>
</ol>

自动为每一行加顺序

【3】标题列表

<dl>
    <dt>标题一</dt>
    <dd>内容一</dd>
    <dt>标题二</dt>
    <dd>内容二</dd>
    <dt>标题三</dt>
    <dd>内容三</dd>
    <dt>标题四</dt>
    <dd>内容四</dd>
</dl>

posted @ 2024-02-27 08:28 Chimengmeng 阅读(17) 评论(0) 编辑收藏举报

刷新页面返回顶部

Dream-Z

Hope Your Life Is Worth It !

【3.0】HTML基础

【一】HTML简介

【1】什么是HTML

【2】最基础的页面

【3】总结

【二】HTML中的注释语法

【1】单行注释

【2】多行注释

【三】HTML的文档结构

【1】基础结构

【2】基本结构

【四】HTML标签的分类

【1】双标签

【2】单标签(自闭标签)

【五】head常用标签

【1】title

【2】style

【3】script

【4】link

【5】meta

（1）介绍

（2）常见的<meta>标签

【六】body常用标签

【1】<h1>

【2】<b>

【3】<i>

【4】<u>

【5】<s>

【6】<p>

【7】br

【8】hr

【小结】常用的<body>标签

【七】标签的分类

【1】块级标签（Block-level elements）

（1）介绍

（2）常见的块级标签

【2】行内标签（Inline elements）

（1）介绍

（2）常见的行内标签

（3）补充

【3】总结

【八】特殊符号

【1】空格&nbsp;

【2】大于号&gt;

【3】小于号&lt;

【4】&符&amp;

【5】￥符&yen;

【6】版权&copy;

【7】商标&reg;

【小结】

【九】常用标签

【1】div标签

【2】span标签

【3】img标签

【4】a标签

【5】总结

【十】标签的两个重要属性

【1】id值

【2】class值

【十一】列表标签

【1】无序列表

【2】有序列表

【3】标题列表

公告

（2）常见的`<meta>`标签

【1】`<h1>`

【2】`<b>`

【3】`<i>`

【4】`<u>`

【5】`<s>`

【6】`<p>`

【7】`br`

【8】`hr`

【小结】常用的`<body>`标签

【1】空格` `

【2】大于号`>`

【3】小于号`<`

【4】&符`&`

【5】￥符`¥`

【6】版权`©`

【7】商标`®`