• 手拉手一起学 HTML（上）

    🍓个人主页：bit.. 

    🍒系列专栏：Linux(Ubuntu)入门必看   C语言刷题      数据结构与算法

    目录

    一.网页

    二.常用浏览器

    三.web标准

    四.HTML 标签

    4.1 HTML 语法规范

    4.2标签关系

    五.HTML 基本结构标签

    六.网页开发工具

    6.1文档类型声明标签

    6.2字符集

    七.HTML常用标签

    7.1标签语义（标签含义）

    7.2标题标签

    7.3段落和换行标签

    7.4 文本格式标签

    7.5

    和标签

    一.网页

            HTML指的是超文本标记语言，他是描述网页的一种语言。

            HTML 不是编程语言，而是一种标记语言，标记语言是一套标记标签。

    所谓超文本有两层含义：

    • 它可以加入图片，声音，多媒体等类容(超越了文本限制）
    • 它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文件）

    二.常用浏览器

            浏览器内核（渲染引擎):负责读取网页内容，整理讯息，计算网页的显示方式并显示页面）

     

    Blink其实是WebKit的分支。国产360，uc，qq一般都是用的WebKit/Blink内核

    三.web标准

            web标准是w3c(万维网联盟)组织和其他标准化组织制定的一系列标准的集合，w3c是国际最著名的标准化组织 。

    web标准的构成

            主要包括 结构 表现和行为三个方面

     web标准提出的最佳体验方案：

    结构，样式，行为相分离。

    见到那理解：结构写到HTML文件中，表现写到css文件中，行为写到JavaScript文件中。

    四.HTML 标签

    4.1 HTML 语法规范

    1. HTMl标签是由尖括号包围的关键词，例如.
    2. HTML标签通常是成双成对的，例如：和,我们称为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。
    3. 单标签

    4.2标签关系

            双标签关系可以分为两类： 包含关系   并列关系

    （包含关系）父子关系

    1. <head>
    2.     <title> title>
    3. head>

    （并列关系）

    1. <head>  head>
    2. <body>  body>

    五.HTML 基本结构标签

    5.1第一个HTML网页

            每个网页都有一些基本的结构标签（也称之为骨架标签）页面内容也是在这些基本标签上书写的。

    HTML页面也称为HTML文档

    标签名定义说明
    HTML标签页面中最大的标签（根标签）
    文档的头部在head的标签中 我们必须要设置标签title
      文档的标题让页面拥有一个属于自己的页面标题
    文档的主题元素包含文档的所有内容，页面内容基本都到body里面
    1. <html>
    2.     <head>
    3.         <title>我的第一个页面title>
    4.     head>
    5.     <body>
    6.         你我之间...
    7.     body>
    8. html>

    六.网页开发工具

    6.1文档类型声明标签

    文档类型声明，作用就是告诉浏览器使用哪种HTML版本显示网页

    例如：

            这句代码的意思是：当前页面采取的是html 5版本来显示网页

    注意：

    • 声明位于文档中的最前面的位置，处于之前
    • 不是一个HTML标签，它就是文档类型声明标签 

    6.2字符集

            字符集是多个字符的集合，以便于计算机能够识别和存储各种文字

            在标签内，可以通过标签的charset属性规定HTML文档应该使用哪种字符编码

    charset 常用的值有：GB2312  简体中文  BIGS 繁体中文  GBK 国际标准  UTF-8 万国码

    七.HTML常用标签

    7.1标签语义（标签含义）

    7.2标题标签

    --

    我是一级标题

     h为head的缩写，意为头部标题

    <标签语义> 作为表示使用，并且依据重要性递减

    特点：

    • 加了标题的文字会变的加粗，字号也会依次变大
    • 一个标题独占一行
    1. <h1>标题标签h1>
    2. <h1>标题一共六行选h1>
    3. <h2>文字加粗一行显h2>
    4. <h3>由大到小一次减h3>
    5. <h4>从重到轻随之变h4>
    6. <h5>语法规范书写后h5>
    7. <h6>具体效果刷新见h6>

    7.3段落和换行标签

    在网页中，需要把文件有条理的显示出来，就需要将这些文字分段显示，在HTML标签中

    标签用于定义段落，它可以将整个网页分为若干个段落。

    例如：

    我是一个段落

            p是单词paragraph的缩写，译为段落。

    标签语义：可以把HTML文档分割为若干给段落

    特点：

    • 文本在一个段落中会根据浏览器窗口的大小自动换行
    • 段落和段落之间保有空隙

     段落和换行标签

            在HTML中，一个段落中的文字会从左到右依次排序，直到浏览器窗口的右端，然后自动换行，如果希望某段文本强制换行显示，就要使用换行标签

    特点：


    • 是一个单标签

    • 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

    7.4 文本格式标签

            在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这是就需要用HTML中的文本格式化标签，使文字以特殊的方式显示。

    标签语义： 突出标签的重要性，比普通文字更重要。

    加粗 标签    或者 更推荐使用 标签加粗，语义更加强烈。

    倾斜 标签 或者   更推荐使用 标签

    删除线 或者 推荐

    下划线或者 推荐 

     7.5
    和标签

    和 是没有语义的，他们就是一个盒子，用来装内容的

    这是头部

    今日价格

    特点：

    1. 标签用来布局，但是在一行只能放一个
      大盒子
    2. 标签用来布局，一行可以多个小盒子

    7.6图像标签和路径

      1.图像标签

            在HTML标签中标签用于定义HTML页面中的图像

    src是标签的必须属性，它用于指定图像文件的路径和文件名

    所谓属性：简单理解就是属于这个图像标签的特性。

    属性属性说明
    src图像必须为属性
    alt文本替换文本，图像不能显示的文字
    title文本提示文本，鼠标放到图像上，显示的文字
    width像素设置图像的宽度
    height像素设置图像的高度
    border像素设置图像的边框粗细

         图像标签属性注意点：

    • 图像标签可以拥有多个属性，必须写在标签名的后面。
    • 属性之间不分先后顺序，标签名与属性，属性与属性之间均可以用空格分开
    • 属性采取键值对的格式 key="value"的格式，属性="属性值"   

    7.7超链接标签

    在HTML标签中，标签用于定义超级链接，作用是从一个页面跳转到另一个页面。

    链接的语法格式<外部链接>

    文本或图像

    属性作用
    href用于指定链接目标的url地址（必须属性）当为标签应用href属性时，它就具有了超级链接的功能。
    target用与指定链接页面的打开方式其中_self为默认值 _blank为新窗口中打开方式
    <a href="http://www.qq.com" target="_blank">腾讯a>

    内部链接

            网站内部页面之间的相互链接，直接链接内部页面名称。

    <a href="index.html">首页a>

     空链接

            如果当时没有确定链接目标时，

    <a href="#">首页a>

    下载链接

            如果href里面地地址是一个文件或者压缩包，会下载这个文件

    <a href="xxx">首页a>

       

    网页元素链接

            在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加到超级链接中

    1. <a href="http://www.baidu.com"><img src="img.jpg">a>

    锚点链接

            点我们点击链接，可以快速定位到网页页面中某个位置

    在链接文本的href属性中，设置属性值为#名字的形式

    <a href="#two">第二集a>

    找到目标位置标签里面添加一个id属性=刚才的名字

    <h3 id="two">第二集介绍h3>

    7.8图像标签和路径

    1.路径

    （1）目录文件夹和根目录

    目录文件夹：

            就是普通文件夹，里面只不过存放了我们做的页面所需要的相关材料，例如：HTML文件，图片，视频等。

    根目录：

            打开目录文件夹的第一层就是根目录。

    （2)  vscode打开文件夹：

            文件——打开文件夹，选择目录文件夹，后期非常方便管理文件。

    相对路径：

            以引用文件所在位置为参考基础而建立出的目录路径这里简单来说，图片相对于HTML页面的位置。

    相对路径符号说明
    同一级路径图像文件与HTML文件位于同一级
    下一级路径/下一级
    上一级路径../..上一级

     2.绝对路径

            是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

    例如："D:\web\img\logo.gif" 或完整的网络地址

    7.9 HTML中的注释和特殊字符

    注释：

            如果需要在HTML文档中添加一些便于阅读和理解，但又不需要在页面注释文字，就需要使用注释标签。

    HTML中的注释以“”结束

    vscode中的快捷键：ctrl+/

    特殊字符

            空格   

            <       &it

            >       >

  • 相关阅读:
    BLE学习(3)：ATT和GATT详解
    pandas使用groupby函数基于多个分组变量（多变量分组）对dataframe数据进行分组、使用size函数计算每个分组的样本的个数
    【LeetCode】省份数量（并查集）
    LeetCode 1658. 将 x 减到 0 的最小操作数
    【华为上机真题 2022】流水线
    如何快速又高质量的输出PDF实验报告？
    c++ 学习 之 继承中 父类子类构造函数和析构函数的调用顺序
    20：第三章：开发通行证服务：3：在程序中，打通redis服务器；（仅仅是打通redis服务器，不涉及具体的业务开发）
    python 第三方库 xToolkit库工具使用详细教程香不香
    【深度学习实验】数据可视化
  • 原文地址：https://blog.csdn.net/weixin_68773927/article/details/127668113