HTML简介

什么是HTML

站在显示文本内容的角度去看，浏览器与word的原理一样，我们可以将浏览器当成一个网页版的只读word，浏览器也必须有一套自己能识别的标记文本的规范，该规范被称为HTML, HTML全称是超文本标记语言（HyperText Markup Language）。

“超文本”指的是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

“标记”指的是在编辑文本时用特殊的记号标记一下各部分内容的意义，该记号称之为标签。

标签的具体表现

在HTML中规定标签使用英文的的尖括号即<和>包起来，如、、都是标签。

HTML中标签通常情况下是成对出现的，分为开始标签和结束标签，结束标签比开始标签多了一个/，开始标签和结束标签之间的就是标签的内容。

如果你想要让浏览器能够渲染出你写的页面，你就必须遵循HTML语法

我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)

<h1>hello world</h1>
<a href="https://www.mzitu.com/">click me!</a>
<img src="https://img1.baidu.com/it/u=154732648,1003669300&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1706720400&t=ada6d6b0a1cbafef3e07d7d2ba3ac764"/>

HTML就是书写网页的一套标准，除了HTML可以书写前端页面之外，还有xml也可以书写前端页面，odoo框架内部的前端页面全部都是用xml书写。

HTML注释

注释: 注释是代码之母

<!--单行注释-->
<!--
多行注释
多行注释
多行注释
-->
由于HTML代码非常的杂乱无章并且很多，所以我们习惯性的用注释来划定区域方便后续的查找。
例如:
<!--导航条开始-->
导航条所有的html代码
<!--导航条结束-->

<!--左侧菜单栏开始-->
左侧菜单栏的html代码
<!--左侧菜单栏结束-->

HTML文档结构

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

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

<!DOCTYPE html> 声明定义了当前文件是一个 HTML 文件。
<html>: 根标签，所有的网页标签都在<html></html>中
<head></head>: head内的标签不是给用户看的，而是定义一些配置主要是给浏览器看的
<title> : 设置页面标题，<meta> 设置字符编码、关键词等。
<body></body>: body内的标签写什么，浏览器就渲染什么，用户就能看到什么

注意:

HTML 的标签是有层级关系的，内部的标签必须位于外部标签的范围之内，无法单独存在。
文件的后缀名其实是给用户看到的，只不过对应不同的文件后缀名有不同的软件来处理并添加很多功能
HTML代码是没有格式的，可以写在一行都没有问题，只不过我们习惯了缩进来表示代码

两种打开HTML文件的方式

找到文件所在的位置右键选择浏览器打开
在pycharm内部，集成了自动调用浏览器的功能，直接点击即可(前提是你的电脑上安装了对应的浏览器)，建议使用谷歌搜索引擎

标签的分类

1.双标签
<h1></h1>
<a href="https://www.mzitu.com/"></a>

2.单标签(自闭合标签)
<img/>

head内常用标签

在书写HTML代码的时候，你只需要写标签名然后tab键就能自动补全

<title>亚洲最大的线上交易场所</title>  网页标题
<style>
        h1{
            color: greenyellow;
        }
</style>  内部用来书写css代码
    <script>
        alert(123)
    </script>  内部用来书写js代码
    <script src="myjs.js"></script>  还可以引入外部js文件(可以是本地的也可以是外部的)
    <link rel="stylesheet" href="mycss.css">  引入外部css文件
 <!--    2秒后跳转到对应的网址，注意引号(了解)-->
    <meta http-equiv="refresh" content="2;URL=http://www.baidu.com">

<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">  
当你在用浏览器搜索的时候，只要输入了keywords后面指定的关键字，那么该网页都有可能被百度搜索出来展示给用户

<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！">  
网页的描述性信息，如下图

<title>亚洲最大的线上交易场所</title> : 网页标题
<style></style>: 内部用来书写CSS代码
<script></script>: 内部用来书写JS代码(可以引入外部JS文件)
<link rel="stylesheet" href="">: 引入外部CSS文件

`<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内标签

<h1>我是h1</h1>  标题等级只有1 ~ 6
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<b>加粗</b>
<p>床前明月光，疑是地上霜</p> 段落标签
<br> 换行
<hr> 水平分割线

标签的分类2

块儿级标签: 独占一行

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

注意：

块儿级标签可以修改长宽，行内标签不可以，修改了也不会变化

块儿级标签内部可以嵌套任意的块儿级标签和行内标签
但是p标签虽然是块儿标签，但是它只能嵌套行内标签，不能嵌套块儿级标签。如果你套了，问题也不大，因为浏览器会自动帮你解开(浏览器是直接面向用户的，不会轻易的报错，哪怕有报错用户也基本感觉不出来)

行内标签: 自身文本多大就占多大

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

注意：行内标签不能嵌套块儿级标签，可以嵌套行内标签

总结

只要是块儿级标签，都可以嵌套任意的块儿级标签和行内标签；
但是p标签只能嵌套行内标签(HTML书写规范)

特殊符号

&nbsp; 空格
&gt;  大于号 >
&lt;  小于号 <
&amp;  and符号 &
&yen;  ￥
&copy;  © 版权
&reg;   ® 商标

小结

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

常用标签

div 块儿级标签

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

span 行内标签

它是一个内联元素，主要用于对文本或一小段文本进行样式上的控制。
Span标签通常用于对特定部分进行样式修饰或添加特殊效果
- 例如修改文字颜色、加粗、斜体等，或者配合CSS实现一些交互效果。
与Div标签不同，Span标签没有具体的语义意义，更多地用于样式上的调整。

注意：

页面的布局一般先用div和span占位之后再去调整样式，尤其是div使用非常的频繁。

div你可以把它看成是一块区域，也就意味着用div来提前规定所有的区域，之后往该区域内部填写内容即可，而普通的文本先用span标签

img标签

图片标签

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

src="":
- 图片的路径，可以是本地的也可以是网上的
- url 自动朝该url发送get请求获取数据
alt="":
- 当图片加载不出来的时候，给图片描述的图片信息
title="":
- 当鼠标悬浮在图片上之后，自动展示的提示信息
height="800px" width="":
- px调图片大小
- 高度和宽度当你只修改一个的时候，另外一个参数会等比例缩放
- 如果你修改了两个参数，并且没有考虑比例的问题，那么图片就会失真

a标签

（1）链接标签

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

当a标签指定的网址从来没有被点击过，那么a标签的字体颜色是蓝色，如果点击过了就会变成紫色(浏览器给你记忆了)

href="":

放url，用户点击就会跳转到该url页面
放其它标签的id值，点击即可跳转到对应的内容区域

target="":

_self：默认a标签是在当前页面完成跳转
_blank：你也可以修改为新建页面跳转

（2）a标签的锚点功能

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

<a href="" id="d1">顶部</a>
<h1 id="d111">hello world!!!</h1>
<div style="height: 1000px;background: red"></div>
<a href="" id="d2">中间</a>
<div style="height: 1000px;background: greenyellow"></div>
<a href="#d1">底部</a>
<a href="#d2">回到中间</a>
<a href="#d111">回到中间</a>

标签具有的两个重要属性

id值
- 是类似于标签的唯一标识符
- 类似于标签的身份证号，在同一个HTML页面上id值不能重复
class值
- 该值有点类似于面向对象里面的继承，一个标签可以继承多个class值

标签既可以有默认的书写也可以有自定义的书写

<p id="d1" class="c1" username="xiao" password="123"></p>

列表标签

无序列表(较多)

<ul>
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
        <li>第四项</li>
</ul>
在页面布局的时候，只要是排版一致的几行数据基本上用的都是ul标签

效果：

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

有序列表(了解)

<ol>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>
type=""

自动为每一行加顺序

标题列表(了解)

<dl>
    <dt>标题</dt>
    <dd>内容</dd>
    <dt>标题</dt>
    <dd>内容</dd>
    <dt>标题</dt>
    <dd>内容</dd>
</dl>

可以用来做多级目录

总结

学习前端心得：
学习前端就是死记硬背
学习HTML语言的时候，要知道它是一门标记语言
在学的时候，就记得每一个标签到底表示什么意思就可以了

标签：网页,标签,基础,HTML,浏览器,文本,页面
From： https://www.cnblogs.com/xiao01/p/18081294

前端基础之HTML标签基础

HTML简介

什么是HTML

标签的具体表现

HTML注释

HTML文档结构

两种打开HTML文件的方式

标签的分类

head内常用标签

`<meta>`标签:

body内标签

标签的分类2

块儿级标签: 独占一行

行内标签: 自身文本多大就占多大

总结

特殊符号

小结

常用标签

div 块儿级标签

span 行内标签

img标签

a标签

（1）链接标签

（2）a标签的锚点功能

标签具有的两个重要属性

列表标签

总结

相关文章

赞助商

阅读排行

前端基础之HTML标签基础

HTML简介

什么是HTML

标签的具体表现

HTML注释

HTML文档结构

两种打开HTML文件的方式

标签的分类

head内常用标签

<meta>标签:

body内标签

标签的分类2

块儿级标签: 独占一行

行内标签: 自身文本多大就占多大

总结

特殊符号

小结

常用标签

div 块儿级标签

span 行内标签

img标签

a标签

（1）链接标签

（2）a标签的锚点功能

标签具有的两个重要属性

列表标签

总结

相关文章

赞助商

阅读排行

`<meta>`标签: