web前端之初级html-学习笔记分享一

治秃用霸王

已于 2022-09-16 22:51:58 修改

阅读量364

点赞数

文章标签： html 学习前端

于 2022-09-08 00:15:13 首次发布

本文链接：https://blog.csdn.net/weixin_52112965/article/details/126756344

版权

初级html学习笔记一

一、基础认知
目标：认识网页组成和五大浏览器，明确web标准的构成，使用HTML骨架搭建出一个网页

   学习路径：
   1、基础概念
       1、认识网页
           1、网页由哪些部分组成
               文字、图片、音频、视频、超链接
           2、网页背后本质是什么
               清单程序员写的代码
           3、前端代码是通过什么软件转换成用户眼中的也
               通过浏览器转换(解析和渲染)成用户看到的网页

       2、五大浏览器和渲染引擎
           1、五大浏览器
               浏览器：是网页显示、运行的平台
               常见的五大浏览器：IE、火狐、谷歌、Safari、Opera(欧朋)
           2、渲染引擎
               渲染引擎(浏览器内核)：浏览器中专门对代码解析解析渲染的部分
               浏览器触碰的个数不同，内在的渲染引擎也是不同的
               渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同

       3、web标准
           1、web标准构成
               结构   HTML       网页元素和内容
               表现   CSS           网页元素的外观和位置等页面样式(如颜色、大小等)
               行为   JavaScript   网页模型的定义与页面交互


   2、HTML初体验
       1、HTML的感知
           1、HTML概念
               HTML：超文本标记语言。专门用于网页开发语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述


你猜，这个字是加粗的吗？
<strong>你猜，这个字是加粗的吗？</strong>

2、HTML骨架结构
<html>网页整体；<head>网页头部；<body>网页身体；<title>网页标题


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页的标题</title>
</head>
<body>
    这是网页主体
    <!-- 这是注释 对代码的解释说明 -->
</body>
</html

       3、开发工具的使用
           Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder
           VScode 快速自建骨架，输入 !

   3、语法规范
       1、HTML的注释
           方便下次的阅读代码者
           注释的快捷键在VS code中：ctrl + /

       2、HTML标签的构成
           1、HTML标签结构
               <strong>文字要变粗</strong>
           常见标签有两部分组成称为双标签，由一部分组成称为单标签

       3、HTML标签的关系
           父子关系(嵌套关系)