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

一. “前端与HTML”课堂知识要点：

前端定义
HTML语法
语义化

二. 详细知识点介绍：

1. 前端

解决GUI人机交互
跨终端：PC/移动浏览器；客户端/小程序；VR/AR etc
Web技术栈

a. 前端技术栈

HTML：负责页面结构，内容
CSS：设置页面样式：位置，大小，颜色，etc
JavaScript：定义网页行为（脚本语言，在HTML页面添加交互） HTML，CSS，JavaScript都运行在浏览器中，浏览器通过HTTP协议和服务器进行通信 HTML，CSS，JavaScript和HTTP协议一起构成前端最基础的技术栈

b. 前端关注内容

功能：满足用户需求
美观
无障碍
安全：保证用户数据安全
性能：速度，用户体验，兼容性
体验

2. HTML：HyperText Markup Language

HTML语法：

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input，meta
属性值推荐用双引号包括
某些属性可以直接省略，比如required，readonly

a. 列表：

有序列表 order list：
（默认计数开始）
无序列表 unorder list:
（默认·）
定义列表 definition list:
definition title:
definition description:
一个dt可以对应多个dd

b. 链接：

<a href="跳转地址" target="_blank">

target="_blank"：新窗口打开

c. 多媒体：

<img src="图片地址" alt="替代文本（图片加载失败时显示）"/>
<audio src="音频地址" controls></audio> 
<video src="音频地址" controls></video>

controls: 音频需要浏览器显示播放控件

d. 表单：

<input placeholder="请输入用户名">

滑动块:

<input type="range">

让用户输入一个数字，且验证以及拒绝非数字（不符合要求）的输入：

<input type="number" min="1" max="10">

让用户输入日期：

<input type="date" min="2018-02-10">

纯文本编辑控件：

<textarea>123</textarea>

勾选/多选:

<input type="check" name="xxx">

选择（单选）:

<input type="radio" name="xxx">

ps:多个radio如果name一样，只能在多个radio中选择一个

下拉选择：

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

提示输入：

<input list="countries" />
<datalist id="countries">
    <option>Greece</option>
    <option>United Kingdom</option>
    <option>United States</option>
</datalist>

e. 文本标签：

快捷引用：

<blockquote cite="引用地址"></blockquote>

短引用：（参考文献）

<cite></cite>

短引用：（引用文本）

<q></q>

代码：

<code></code>

多行代码：

<pre><code>
const add= (a,b) => a+b
<pre><code>

重点强调：

<strong></strong>

语气强调：

<em></em>

f. 内容划分标签：

页头: （导航，logo）

<header>

导航：

<nav>

side bar:

<aside>

文章/页面内容：

<article>

页尾：

<footer>

3. 语义化

a. 定义：

语义：HTML中的元素，属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML

· 了解每个标签和属性的含义 · 思考什么标签最适合描述这个内容 · 不使用可视化工具生成代码

b. HTML使用者：

开发者：修改，维护页面
浏览器：展示页面
搜索引擎：提取关键词，排序
屏幕阅读器：给盲人读页面内容

三. 实践练习例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Practice</title>
</head>
<body>
<!-- Header -->
<div id = "header">
    <img src = "eg.jpg" alt="Nature" class="responsive" width="100%" />
    <div style = "margin-top:-25vh">
        <span style="color: #ffffff; font-size: 5vh;">Title</span>
    </div>
</div>
<!-- Navigation bar -->
<div id="navbar" style = "margin-top:25vh; font-size: 5vh;">
    <a href="NavigationBarExample.html">Home</a>
    <a href="index.html">Page2</a>
    <a href="">Page3</a>
</div>
<!-- Content -->
<div style = "background-color: #fffaf3;">
    <h1>Scroll this page to see <em>more</em></h1>
    <hr width = "80%">
    <div id = "intro" style = "text-align: center; font-size: 3vh; text-indent: 10px">
        <p><a href = "">Some text some text some text some text..</a></p>
        <p><a href = "">Some text some text some text some text..</a></p>
        <p><a href = "">Some text some text some text some text..</a></p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
        <p>Some text some text some text some text..</p>
    </div>
    <hr width = "80%">
    <br>
    <div id="lists">
        <!--unorder list-->
        <ul>
            <li class = "abc123">123</li>
            <ol>
                <li><a href = "">User</a></li>
                <li>abc</li>
            </ol>
            <li>123</li>
            <li>123</li>
        </ul>
    </div>
</div>
<!-- footer -->
<div id="footer">
    <p align="center">&copy; UOLCFY &#153;</p>
</div>
</body>
</html>

效果：

四. 总结：

HTML: 超文本标记语言，使用标记标签来描述网页，包含标签和文本（所有标签都需要闭合）
根据需要选择最合适的标签方便后期理解和使用

参考：

菜鸟教程

前端与 HTML | 青训营笔记