01-HTML+CSS/01-4-开发第一个网页-元素

开发第一个网页-元素

回顾 0324上午

一、邂逅前端开发

1.1.软件开发、软件开发体系

1.2.完善的应用程序包括那些？

  • 服务器开发
  • iOS开发 Android开发
  • web开发
  • 桌面开发 (window Mac)

1.3.前端开发的内容

  • 前端开发的任务
    • web开发 小程序开发
    • 移动端 桌面端 服务端开发(Node)
  • 前端开发的路线

1.4.学习方法和学习建议

  • 学习任何新的东西的，最好了解他的历史，局限行、本质
  • 知识进行分类
    • 常用的知识 必须熟练掌握
    • 不常用的知识i 知道有它，知道在哪里查

二、邂逅Web开发

2.1.电脑配置、推荐如阿纳金

2.2.网站和网页的关系

2.3.网页的显示过程

  • 用户的角度
  • 前端开发工程师的角度
  • 服务器是什么？

2.4.网页的组成部分

  • HTML
    • 网页的结构
  • CSS
    • 网页的样式(美化)
  • JavaScript
    • 网页的交互(灵魂)

浏览器的作用

  • 浏览器最核心的部分其实 ”浏览器内核“
  • 浏览器最核心的部分是渲染引擎，一般也称之为 ”浏览器内核“
    • 负责解析网页语法，并渲染(显示)网页

常见的浏览器

  • Trident(三叉戟)
    • IE
    • 360安全浏览器
    • 搜狗高速浏览器
    • 百度浏览器
    • uc浏览器
  • Gecko(壁虎)
    • Mozilla Firefox
  • Presto(急板乐曲) -> Blink(眨眼)
    • Opera
  • Webkit
    • Safari
    • 360极速浏览器
    • 搜狗高速浏览器
    • 移动端浏览器
  • Webkit -> Blink
    • Google Chrome
    • Edge

不同的浏览器内核有不同的解析、渲染规则，所以在同一网页在 不同内核的浏览器中的渲染效果也可能不同

我的第一个网页

记事本开发

<!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>Document</title>
</head>
<body>
  HelloWorld
</body>
</html>

<!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>Document</title>
  </head>
  <body>
    <h1>【奋进新征程 建功新时代·伟大变革】福建木兰溪的绿色之变</h1>
    <h3>
      1.央视网消息（新闻联播）：位于福建省莆田市的木兰溪曾经水患严重，20多年前，习近平总书记在福建工作期间，指挥推动木兰溪流域治理，木兰溪也成为了全国第一条全流域系统治理的河流。
    </h3>
    <p>
      2.党的十八大以来，福建广大干部群众牢记总书记嘱托，坚持不懈、久久为功，木兰溪再次迎来绿色之变，昔日水患之河如今已成为造福人民的生态之河、发展之河。
    </p>
  </body>
</html>

邂逅HTML

  • 不是编程语言 ，而是一种标记语言

  • 超文本标记语言是一种用于创建网页的标记语言

    • HTML元素是构建网站的基石

  • 什么是标记标记语言

    • 有无数个标记(标签、tag)组成
    • 是对某些内容进行特殊的标记，以供其他解释器识别处理
    • 比如使用<h2></h2>标记的文本会被标识为“”进行加粗、文字放大显示
    • 由标签和内容组成的部分成为元素

  • 什么是超文本呢

    • 不仅仅可以插入普通的文本，还可以插入图片、音频、视频等内容
    • 还可以表示超链接，从一个网页跳转到另一个网页

  • HTML文件的扩展名.html .htm

    • 因历史遗留问题，win95/win98系统的文件扩展名不能超过3字符，所以使用.htm
    • 现在同一使用.html

  • HTML文件的特点 - 结构

    <!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>Document</title>
  </head>
  <body></body>
</html>

此时安装了搜狗输入法

  • 摒弃微软输入法
    • 虽然好用，但是还是使用搜狗输入法的工具

VSCode开发工具

开发工具选择

  • 记事本
    • 创建和管理文件不方便
    • 没有颜色表示
    • 没有智能提示
    • 无法调试程序
  • VSCode
  • webstorm
  • sublime text
  • atom
  • hbuilder
  • idea
  • dreamwear
    • 智能提示
    • 高亮识别
    • 语法检测
    • 集成环境
    • 开发效率高

上课推荐开发工具

  • Webstorm
    • 优点
      • 集成开发工具，包罗万象
    • 缺点
      • 重
      • 收费
  • VSCode(微软开发的)
    • 优点
      • 免费
    • 缺点
      • 需要安装一些插件来辅助开发
<!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>Document</title>
    <style>
      .red {
        color: #ff0000;
      }
    </style>
  </head>
  <body>
    <h1>【奋进新征程 建功新时代·伟大变革】福建木兰溪的绿色之变</h1>
    <h3>
      1.央视网消息（新闻联播）：位于福建省莆田市的木兰溪曾经水患严重，20多年前，习近平总书记在福建工作期间，指挥推动木兰溪流域治理，木兰溪也成为了全国第一条全流域系统治理的河流。
    </h3>
    <p>
      2.党的十八大以来，福建广大干部群众牢记总书记嘱托，坚持不懈、久久为功，木兰溪再次迎来绿色之变，昔日水患之河如今已成为造福人民的生态之河、发展之河。
    </p>
  </body>
  <script>
    const name = "why";
    function abc() {
      console.log("终端");
    }
  </script>
</html>

认识元素

  • 我们会发现HTML本质上是由一列系列元素构成的

什么是元素

  • 元素是网页的一部分
  • 一个元素可以包含一个数据项，或是一个块文本，或是一张照片，亦或是什么也不包含

HTML有哪些元素呢

  • MDN看文档

元素的组成

剖析一个HTML元素的组成

  • 元素的组成
    • 开始标签
    • 内容
    • 结束标签
  • 元素分类
    • 单标签元素
    • 双标签元素

编写第一个元素

<!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>Document</title>
  </head>
  <body>
    <p>
      <span></span>
    </p>
    <p>我是段落</p>
  </body>
</html>

元素 单双标签

<!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>Document</title>
  </head>
  <body>
    <!-- 1.注释 双标签 -->
    <p>
      <span></span>
    </p>
    <p>我是段落</p>
    <!-- 2.注释 单标签 -->
    <img src="" alt="" />
    <input type="text" />
  </body>
</html>

注意事项

  • HTML元素不区分大小写，但是推荐小写

元素的属性

  • 元素也可以拥有属性
  • 属性包含元素的额外信息，这些信息不会出现在实际的内容中
  • 一个属性必须包含如下内容
    • 一个空格
    • 属性名称
    • 一个属性值
<!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>Document</title>
    <style>
      .title {
        color: red;
      }
    </style>
  </head>
  <body>
    <!-- <h1 属性名="属性值">我是标题</h1> -->
    <h1 title="我是标题" class="title">我是标题</h1>
    <h1>我是标题</h1>
    <!-- 超链接 -->
    <a >百度一下</a>
  </body>
</html>

元素属性的分类

  • 有些属性是公共的
    • class
    • id
    • title
  • 有些属性是特有的
    • meta属性的charset属性
    • img元素的alt属性

元素的结构总结

元素的结构回顾

  • 开始标签
    • 属性
      • 属性名
      • 属性值
  • 内容
  • 结束标签

元素的嵌套关系

<!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>Document</title>
  </head>
  <body>
    <ul>
      <li>
        <div>
          <span>aaa</span>
          <span>bbb</span>
        </div>
        <div></div>
      </li>
      <li></li>
    </ul>
  </body>
</html>
  • 元素之间的关系
    • 父子关系
    • 兄弟关系

为什么需要注释

程序员才懂的冷笑话

  • 在我写这段代码的时候，只有我和上帝知道这段代码是什么意思
  • 一段时间之后，只有上帝知道是什么意思了

为什么会出现这样的情况呢

  • 随着学习的深入，你的一个程序不再是几行代码就可以搞定的了
  • 可能我们需要写出有上千行，甚至上万行的程序
  • 某些代码完成某个功能后，你写的时候思路很细清晰，但是过段时间会出现为什么这样写 的情况，这很正常

和同事协同开发

  • 在实际开发工作中，一个项目通常是多人写作完成的，可能是几个或者十几个等等
  • 这个时候，你可能需要使用别人写出的代码功能，别人也可能使用你的代码功能
  • 如果你的代码自己都看不懂了，更何况你的同事呢

HTML的注释

什么是注释

  • 简单来说，注释就是一段代码注释
  • \
  • 注释是只给开发者看的，浏览器并不会把注释显示给用户看

注释的意义

  • 帮助我们自己理清代码的思路，方便以后进行查阅
  • 与别人合作开发时，添加注释，可以减少沟通成本
  • 开发自己的框架时，加入适当的注释，方便别人使用和学习
  • 可以临时注释掉一段代码，方便调试

快捷键

  • ctrl + /

回顾 0326

一、浏览器和浏览器内核

常见的浏览器

  • 核心部分浏览器内核 ： 渲染引擎

二、开发自己的第一个网页

2.1.记事本开发网页

2.2.对网页进行补充

  • 增加标记 -> 元素 -> 浏览器 -> 渲染对应的浏览器
  • 增强网页的结构
    • html
      • head
        • title
      • body
        • h1
        • p
        • div
        • span
        • a

2.3.HTML语言

  • 超文本标记语言
    • 为什么叫标记语言
      • 超文本
        • 图片 音频 视频 超链接

2.4.开发工具

  • 安装
  • 安装插件
  • 配置

2.5.剖析元素结构

  • 开始标签
  • 结束标签
  • 内容
  • 属性
  • 元素的嵌套

2.6.HTML注释

  • 理解注释的作用
  • HTML注释的编写方法
    • ctrl + /

课后作业

一、说出软件和应用程序的区别(自己整理)

二、说出一个完善的应用系统包含哪些环节

三、整理出网页从编写到浏览器显示的整个过程(重要)

  • 用户角度
    • 用户在浏览器输入一个网址
    • 浏览器会找到对应的服务器地址，请求静态资源
    • 服务器返回静态资源给浏览器
    • 浏览器对静态资源进行解析和展示
  • 前端工程师
    • 开发项目
    • 打包、部署项目到服务器里面

四、服务器是什么? 说出你的理解

  • 一台类似于个人电脑的主机
    • 特点
      • 24h运行
      • 没有显示器
      • 一般系统为linux

五、网页的三大组成是哪些？分别说出他们的作用

  • HTML
    • 网页的内容结构
  • CSS
    • 网页的视觉体验
  • JavaScript
    • 网页的交互处理

六、浏览器内核是什么？有哪些常见的浏览器内核

  • 渲染引擎
    • 负责解析网页语法，并渲染(显示)网页
  • 常用浏览器内核
    • Trident
    • Presto
    • Gecko
    • webkit
    • blink

七、手动编写出HTML页面的结构(不利用开发者工具提示)

  • html
    • head
      • title
    • body
      • p
      • div
      • h1
      • a
      • span

八、元素的结构是什么？有哪些单标签元素、双标签元素

  • 开始标签
    • 属性
      • 属性名
      • 属性值
  • 内容
  • 结束标签
    • 双标签元素
      • div
      • p
      • ul
        • li
      • h1
      • i
    • 单标签
      • input
      • img
      • br

九、元素之间有哪些关系？写出一个例子，并且说明他们的关系

  • 兄弟关系
    • div
    • div
  • 父子关系
    • div
      • div

十、注释的作用，HTML的注释如何编写

  • 帮助我们理清代码的思路，方便以后进行查阅
  • 与别人合作开发时，添加注释，可以减少沟通成本
  • 开发自己的框架时，加入适当的注释，方便别人使用和学习
  • 可以临时注释掉一段代码，方便调试
    • 注释的写法
      • \
    • 快捷键
      • ctrl + /
?著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,992评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 91,212评论 3赞 388
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 159,535评论 0赞 349
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 57,197评论 1赞 287
  • ?港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,310评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,383评论 1赞 292
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,409评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,191评论 0赞 269
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,621评论 1赞 306
  • ?护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,910评论 2赞 328
  • ?白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,084评论 1赞 342
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,763评论 4赞 337
  • ?日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,403评论 3赞 322
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,083评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,318评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,946评论 2赞 365
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,967评论 2赞 351

推荐阅读更多精彩内容