前端与HTML | 青训营笔记

用户5191840081194
480 阅读3分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第1天

本节课的知识要点

  • 前端的定义
  • 前端技术栈和要关注的问题
  • 如何编写一个HTML文件
  • 什么是标签，以及分别有哪些标签
  • 语义化是什么及其定义

什么是前端？

  • 解决GUI人机交互问题
  • 跨终端（PC、小程序、客户端、VR/AR）
  • web技术栈

前端技术栈

  • HTML
  • CSS
  • JS
  • 通过网络协议与服务器进行一个沟通

前端应该关注什么问题

  • 功能
  • 美观
  • 性能
  • 安全
  • 无障碍
  • 兼容性
  • 体验

前端的边界

  NodeJS、Electron、React等

开发环境

  • 浏览器
  • 编译器

HTML的定义

超文本标记语言

一个简单的HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML</title>
</head>
<body>
    <h1>一个标题</h1>
    <p>一个自然段</p>
</body>
</html>

DOM树

用树形的方式来表示HTML文件中各个标签之间的脉络关系

标题标签

从h1到h6，标题大小从大到小

列表标签

分为三种有序列表（ol）、无序列表（ul）和定义列表（dl）

超链接标签

href属性是将要跳转的url
target属性是跳转的方式

多媒体标签

图片标签（img）、音频标签（audio）和视频标签（video）
都需要通过src属性来指定对应资源的url

输入标签

input标签是一个自结束标签，不需要成双成对出现
通过type属性来来选择输入类型

文本类标签

引用标签分为长引用标签（blockquote）、短引用标签（cite和q）
代码标签（code）
强调标签（em和strong）

内容划分

HTML文件大致可以分为三个层次：header、main和footer（有些时候会多一个aside作为一个边栏）
header中一般会放置一些导航栏
main中会放置一些主要的内容，比如说线上商城的商品
footer中会放置一些信息，比如说版权信息

语义化的意义

清晰地表达HTML的结构

如何做到语义化

  • 了解每一个标签和属性的含义
  • 思考什么标签是最适合来表述这个内容
  • 不使用可视化工具生成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>用户注册页面</title>
    <style>
        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <h2 style="text-align: left;">会员注册</h2>
    <form>
        <table width="500" ;>
            <tr>
                <td><label for="name">姓名：</label></td>
                <td><input type="text" maxlength="20em"></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" id="male"> <label for="male">男</label>
                    <input type="radio" id="female"> <label for="female">女</label>
                </td>
            </tr>
            <tr>
                <td>生日：</td>
                <td>
                    <input type="date">
                </td>
            </tr>
            <tr>
                <td>所在地区：</td>
                <td>
                    <select name="origin" id="og">
                        <option value="None">--请选择地区--</option>
                        <option value="GZ">广州</option>
                        <option value="BJ">北京</option>
                        <option value="SH">上海</option>
                        <option value="SZ">深圳</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>自我介绍：</td>
                <td><textarea name="selfintro" id="selfintro" cols="50" rows="10">
               --请输入自我介绍--
           </textarea>
                </td>
            </tr>
            <tr>
                <td></td>
                <td><input type="reset"> <input type="submit" value="现在即刻注册"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="checkbox">我同意注册条款和加入会员协议</td>
            </tr>
            <tr>
                <td></td>
                <td><a href="#" style="text-decoration: none ;">立刻登录</a></td>
            </tr>
        </table>
    </form>

</body>

</html>

所得的HTML显示效果如下 image.png

关于基础班第一次课的内容的思考

写好一个HTML文件必须要对每一个标签的内容和属性有清晰的认识，在编写HTML代码的时候要对每一块内容先进行一个思考，找到一个能够较好描述内容的结构，并将它实现。

avatar
文章
阅读
粉丝