前端与HTML | 青训营笔记

152 阅读1分钟

这是我参与「第四届青训营」笔记创作活动的的第2天

一、本课重点内容

  • 认识前端

image.png

用编译器编写浏览器能够阅读并识别的代码,以此构建出网页。

  • 认识HTML

b2b6e413347612eb8b2f587543aa631.jpg

web由三个部分组成

  • HTML : 负责页面元素和内容
  • CSS : 网页元素外观和位置等页面样式(如:颜色、大小等)
  • JavaScript: 网页模型的定义与页面交互

二、详细知识点介绍

1. 前端

  • 前端技术栈

image.png

  • 前端应该关注的方面

image.png

  • 前端的边界

image.png

  • 前端开发环境

image.png

2. HTML

  • 标签基本格式 <></>

image.png

  • DOM树

image.png

  • HTML需遵循的语法

image.png

  • 什么是语义化

image.png

  • 如何做到语义化

image.png

三、实践练习例子

  • 标题h1~h6

image.png

  • 列表
<html>
    <head>
        <meta charset="UTF-8">
        <title>页面标题</title>
    </head>
    <body>
        <h1>时代峰峻</h1>
        <h2>时代少年团</h2>
        <ol>
            <li>马嘉祺</li>
            <li>丁程鑫</li>
            <li>宋亚轩</li>
            <li>刘耀文</li>
            <li>张真源</li>
            <li>严浩翔</li>
            <li>贺峻霖</li>
        </ol>
        <h2>代表动物</h2>
        <ul>
            <li>🐎</li>
            <li>🦊</li>
            <li>🐟</li>
            <li>🐺</li>
            <li>🐜</li>
            <li>🐻</li>
            <li>🐇</li>
        </ul>
        
    </body>
</html>

image.png

百度官网 ` image.png

四、课后个人总结

  1. HTML标签的使用还需加强
  2. 需要了解每个标签和属性的含义,否则无法构建想要的网页

五、引用参考

第四届青训营《前端与HTML》PPT