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

前言

在本节课我学到了以下内容本节课程介绍了前端是什么、要解决的问题和技术栈等。本节还介绍了 HTML 的概念、语义化和常用的 HTML 标签。

HTML语法

1.标签和属性不区分大小写，推荐小写
2.空标签可以不闭合，比如input、meta
3.属性值推荐用双引号包裹
4.某些属性值可以省略，比如required、readonly

HTML语义化是什么

1.HTML中的元素、属性及属性值都拥有某些含义
2.开发者应该遵循语义来编写HTML
3.有序列表用ol；无序列表用ul
4.lang属性表示内容所使用的语言

如何做到语义化

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

HTML结构

1.head 写页面的属性； body页面上显示的内容； title 页面的标题
2.段落标签：p；换行标签：br
3.格式化标签：加粗：string / b （b是bold简写）倾斜：em / i （i是incline简写）删除线：del / s （s是strikethrough简写）下划线：ins / u （u是underline简写）
4.图片标签：img 可以加一些属性 alt：替换文本 titile：提示文本 width/height：控制高度宽度
5.超链接：a 可以放外部内部链接，也可以放# 空链接网页元素链接：把元素放入a标签中
6.表格标签：table 可以给table加属性： border：加边框 th：加表头 width/height：控制高度宽度 cellspcing：去掉单元格空隙 cellpadding：内容距边框的距离，默认是1像素 align：表格相对于周围元素的对齐方式，比如align=“center”
7.列表标签：
- （1）无序列表：ul li
- （2）有序列表：ol li
- （3）自定义列表：dl（总标签）、dt（小标题）、dd（围绕标题来说明）
8.表单标签：form 在form中放一些和用户交互的组件 input标签，intput有多种形态文本框：text 密码框：password 单选框：radio （name属性“多选一”；label：点击文字就可以选择对应框（label中for和input中id要一致；checked：默认选中））复选框：checkbox 按钮：button 提交按钮：reset 清空按钮：file select标签：下拉菜单每个菜单项是：option 使用selected表示默认选项 textarea标签：多行编辑器
9.无语义标签：盒子 div 块级元素 span：行内元素

练习

光看是学不会东西的，需要动手操作，于是我进行了以下练习！

<!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>我的第一个html</title>
</head>

<body>
    <title>
        hello world
    </title>
    <h1><strong>春眠不觉晓</strong></h1>
    <h2><em>处处蚊子咬</em></h2>
    <h3><del>夜来风雨声</del></h3>
    <h4><ins>花落知多少</ins></h4>
    <h5><i>春眠不觉晓</i></h5>
    <h6><b>处处蚊子咬</b></h6>
    <h1><s>夜来风雨声</s></h1>
    <h2><u>花落知多少</u></h2>
    <h3>夜来风雨声</h3>
    <h4>花落知多少</h4>
    <h5>春眠不觉晓</h5>
    <h6>处处蚊子咬</h6>
    <p>
        我是p标签
    </p>

</body>

</html>

运行效果如下：

前端 与 HTML | 青训营笔记

前言

HTML语法

HTML语义化是什么

如何做到语义化

HTML结构

练习

前端与 HTML | 青训营笔记