前端与 HTML | 青训营笔记

旷代
396 阅读1分钟

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

一、本堂课重点内容：

  • 前端以及前端技术栈简介
  • HTML中常用标签介绍
  • 网页常用布局
  • HTML语义化

二、详细知识点介绍：

  • HTML定义：HyperText Markup Language
  • 基本架构
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>完整网页结构</title>
    </head>
    <body>
        <h1>一级标题</h1>
    </body>
</html>

<!DOCTYPE html>是文档声明，需要告诉浏览器我们使用的是哪一个版本的HTML。DOCTYPE 来决定用怪异模式处理或标准模式处理。
lang 属性是选择语言类型，zh中文，en英文
<meta> 可提供有关页面的元信息
<title>是网页名字

  • HTML语法
  1. 标题标签<h1></h1>~<h6></h6>
  2. 段落标签<p></p>
  3. 列表标签
有序列表
<ol>
    <li></li>
    <li></li>
</ol>
无序列表
<ul>
    <li></li>
    <li></li>
</ul>
自定义列表
<dl>
    <dt></dt>
    <dd></dd>
</dl>
  1. 链接<a href='' target=''></a>
  2. 输入<input> <textarea>
  3. 引用
长引用
<blockquote></blockquote>
短引用
<cite></cite>
<q></q>  
<--浏览器会对q标签自动添加双引号-->
  • 网页内容划分

Snipaste_2023-01-15_16-04-40.png

三、实践练习例子：

  • 实现两个单选框，每次只能选择一个--使用name属性
<p>
    <label><input type='radio' name='sport'>足球</label>
    <label><input type='radio' name='sport'>篮球</label>
</p>

四、课后个人总结：

  • 掌握了前端一些基本概念，了解了前端的一些技术栈和应用场景，明确了自己以后学习的方向。

  • 学习了HTML和HTML5的一些常用标签，通过练习达到了很好地掌握。

  • 对HTML的语义化有了进一步的理解。所谓的HTML语义化，即HTML中的元素、属性以及属性值都拥有某些含义，通过语义化使得写出来的代码更易为人和机器所理解，也更方便书写。

avatar
文章
阅读
粉丝