HTML基础（一）：基本认知

是小鱼呀·2022-08-23 13:59·73 次阅读

HTML基础（一）：基本认知

基本认知#

认识网页&网站#

  1. 网页(Web page): 网站中的一页，一个网站中的网页通过超链接的方式，被组织在一起
  2. 网站(Web site)：用于展示特定内容的相关网页的集合
  3. 主页(Homepage)：进入网站看到的一个网页，主页的文件名通常是index
  4. 网页元素：表单、Logo站标、导航栏、文字、超链接、banner广告横幅

浏览器#

前端代码是通过什么软件转换成用户眼中的页面？
通过浏览器转化（解析和渲染）成用户看到的网页

  • 渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
  • 浏览器出品的公司不同，内在的渲染引擎也是不同的
浏览器 内核 备注
IE Trident IE、猎豹安全、360极速浏览器、百度浏览器
Firefox Gecko 火狐浏览器内核
Safari Webkit 苹果浏览器内核
Chrome/Opera Blink Blink其实是Webkit的分支

注意点：渲染引擎不同，导致解析相同代码的速度、性能、效果也不同

Web标准的构成#

Web标准中分成三个构成

构成 语言 说明
结构（Structure） HTML 页面元素和内容
表现（Presentation） CSS 网页元素的外观和位置等页面样式（如：颜色、大小等）
行为（Behavior） JavaScript 网页模型的定义与页面交互

常用官方学习网站#

W3C：https://www.w3school.com.cn
MDN：https://developer.mozilla.org/zh-CN/docs/Learn

HTML概述#

HTML语言：标签、元素、属性

标签的组成#

  • 标签的结构图

Screenshot 2023-11-27 at 16.56.44.png

  • 结构说明
    • 标签由<>包围，如<title>，并且把标签中<>包括起来的内容称为标签名
    • 常见标签由两部分组成，我们称之为双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。
    • 少数标签由一部分组成，我们称之为单标签。自成一体，无法包裹内容。如<img />

标签的关系#

  • 父子关系（嵌套关系）
Copy
<head>
    <title></title>
</head>
  • 兄弟关系（并列关系）
Copy
<head></head>
<body></body>

Screenshot 2023-11-27 at 17.11.07.png

标签的属性#

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名>
Screenshot 2023-11-27 at 17.12.59.png

  • 说明：
    1. 标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。
    2. 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
    3. 任何标签的属性都有默认值，省略该属性则取默认值。
    4. 采取键值对 的格式 key="value" 的格式。比如：<hr width="400" /> 属性是宽度，值是400
  • 建议： 尽量不使用样式属性。

HTML文件结构#

  • 网页类似于一篇文章
    • 每一页文章内容是有固定的结构的，如：开头、正文、落款等。。。
    • 网页也是存在固定的结构的，如：整体、头部、标题、主体
  • 网页中的固定结构是要通过特定的HTML标签进行描述的
  • HTML骨架结构有哪些标签组成
    • html标签：网页的整体
    • head标签：网页的头部，浏览器搜索引擎所需信息
    • body标签：网页的身体，网页中包含的具体内容
    • title标签：网页的标题
  • 实例
Copy
<!DOCTYPE>
<html>
  <head>
    <meta charset="UTF-8">
    <title>html练习</title>
  </head>

  <body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落</p >
  </body> 
</html>
  • 说明

    1. 声明为 HTML5 文档。 标签位于文档的最前面，用于向浏 览器说明当前文档使用哪种 HTML 或 XHTML 标准规范，必需在开头处使用<!DOCTYPE>标签为所有的XHTML文档指定XHTML版本和类型，只有这样浏览器才能按指定的文档类型进行解析。

    2. meta：元数据，包含网页中的基础信息， 如网页作者、最新版本。
      charset属性：字符集编码方式。
      utf-8是国际编码，常用的字符集编码方式还有gbk和gb2312。
      注意：源文件保存时的编码与源文件声明时的编码不一致时，就会出现乱码

    3. <html>元素是 HTML 页面的根元素

    4. <head>元素包含了文档的元数据meta

    5. <title>元素描述了文档的标题

    6. <body>元素包含了可见的页面内容

    7. <h1>元素定义一个大标题

    8. <p>元素定义一个段落

注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

注释#

  • 注释的作用
    • 为代码添加具有解释性、描述性的信息。帮助开发人员理解代码
    • 浏览器执行代码时会忽略所有注释
  • 注释的快捷键
    在VS code中：ctrl+/
  • 举例 <!-- 注释内容 -->
posted @   是小鱼呀  阅读(73)  评论(0)  编辑  收藏  举报
相关博文：
· HTML基础（二）：标签学习
· HTML基础（三）：列表、表格、表单标签学习
· HTML 简介
· HTML初识-概念和基本知识
· 学习html--前言
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛
目录
✕