前端与HTML | 青训营笔记

用户5948109721199
28 阅读2分钟

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

本堂课重要内容:

  • 1.前端的一些概述
  • 2.HTML的简介
  • 3.HTML标签
  • 4.HTML语义化

1-1.什么是前端

    前端是网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。

1-2.前端技术栈

  • JavaScript--实现人机间的交互
  • CSS--样式
  • HTML--结构

1-3.前端关注的方面

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

1-4.前端的开发环境

  1. 浏览器： Chrome、Edge、Firefox等
  2. 编辑器：VScode、Vim、WebStorm等

2-1.HTML简介

    html是一种超文本标记语言，用来描述网页。

2-2.HTML元素的语法

  • 不区分大小写。
  • 以开始标签起始，以终止标签结束。
  • 空标签可以不闭合，比如：input、meta
  • 属性值推荐用双引号包裹
  • 元素的内容是开始标签与结束标签之间的内容。

2-3.HTML标签

  • <html>----定义HTML文档
  • <body>----定义文档的主体。
  • <p>----段落。
  • <a href=" ">----链接。

    • image.png

  • <br>----换行
  • <h1>-<h6>----标题
    <h1>定义最大标题，<h6>定义最小标题。

    • image.png

    image.png

  • <hr>----水平线。
  • <img src="">----图像
  • <ol>----有序列表

    image.png

    image.png

  • <ul>----无序列表

    image.png image.png

  • <table>----表格

    image.png

    image.png

  • <input>----输入
    1. 输入字段取决于type属性:button、checkbox、 radio、text等。
    2. name属性规定 <input> 元素的名称。
    3. value属性指定<input> 元素value的值。
    4. 使用<lable>元素来定义input> 元素的标注。

    • image.png

    image.png

4-1.HTML的语义化是什么

  1. 合理HTML标记以及属性格式化文档内容。
  2. 开发者应该遵循HTML语义来编写。

4-2.HTML的语义化作用

  1. 开发者：编写、修改、维护页面。
  2. 浏览器：向用户展示页面。
  3. 搜索引擎：用户可以提取关键字。
  4. 屏幕阅读器。

4-3.HTML的语义化好处

  1. 提高代码的可读性。
  2. 提高代码的可维护性。
  3. 提升无障碍性。
avatar
文章
阅读
粉丝