前端与 HTML | 青训营笔记

LightRain
371 阅读4分钟
这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天✌

课堂笔记

本堂课重点内容：

1.前端要解决的基本问题

  • 前端工作的定义
  • 前端技术栈拆解与分析

2.什么是 HTML

  • HTML 作用解析
  • HTML 语义化

详细知识点介绍

1.什么是前端？

  • 解决GUI人机交互问题
  • 跨终端
    • pc/移动浏览器
    • 客户端/小程序
    • VR/AR等
  • Web技术栈

概括：使用Web技术栈解决多端图形页面交互的工程

2.前端技术栈

  • HTML是一种超文本标记语言。它通过标记符号来标记要显示的网页中的各个部分，负责整合网页结构和内容显示。
  • CSS层叠样式表单，是一种将样式信息与网页内容分离的标记语言，负责设置网页上HTML元素属性。
  • Javascript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象，与Web客户交互作用。
前端应该关注的方面功能、美观、无障碍、安全、性能、兼容、体验等。

3.什么是 HTML？

全称：HyperText Markup Language(超文本标记语言)

  • HyperText：包含图片、标题、链接、表格等丰富的格式。
  • Markup Language：将格式表现出来的标记语言，所谓标记：就是指由一对尖括号扩起来，当中具有特定英文单词的标识。标记的其他叫法：标签 元素 element。

4. HTML标签解析

组成标签要素：<标签名 属性名=属性值 />

HTML文件结构

文档类型声明

起文档说明作用，用来告知浏览器，当前文档是一 个支持html5标准的文档，不可省略。

HTML5版本的文档类型声明是：

<!DOCTYPE html>

根标签

html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。

<html></<html>

头部

head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。

<head></head>

主体

body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。

<body></body>

HTML语法基本规则

  • 根标签有且只能有一个
  • 标签可以嵌套但不能交叉嵌套
  • 注释不能嵌套
  • 属性必须有值，值必须加引号，单引号或双引号均可
  • 标签名不区分大小写但建议使用小写
整合效果：

image.png

HTML部分标签

标题标签：<h1>~<h6>

列表标签：

  • ol:有序列表

  • ul:无序列表

  • dl:定义列表

    • dl:标签
    • dt:列表名称
    • dd:列表内容

  • 超链接 <a href="跳转地址"></a>

  • 媒体元素

    • 图片元素

      • img

    • 视频元素

      • video

    • 音频元素

      • audi

  • 输入

    • 文本域标签（多行输入框）：没有value属性，一般让用户可以输入多行文字,输入的文字信息量相较大<textarea>

    • 单行输入框：有value属性（value属性指定初始值），用来放置字数较少的单行文字内容<input>

    属性值：

      - text 文本框，用于输入单行文本

  - password 密码框，用于输入密码

  - radio 单选框，用于多选一

  - checkbox 多选框，用于多选多

  - file 文件选择，用于之后上传文件

  - submit 提交按钮，用于提交

  - reset 重置按钮，用于重置

  - button 普通按钮，默认无功能，之后配合js添加功能

  - placeholder 占位符，提示用户输入内容的文本

  - range 进度条

  • select：下拉菜单标签， 在网页提供多个选项的下拉菜单表单控件

  • 引用

    • blockquote：块级引用
    • cite：短引用
    • q：有明确指向的短引用
    • code：表示代码

  • 内容划分

image.png

语义化

  • 概念：

避免大篇幅的使用无语义的标签，要求尽可能的使用具有语义的标签。

  • 作用：

 ①利于代码编写: 使页面没有css的情况下，也能够呈现出很好的代码结构。

 ②利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以与搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息。

 ③易于用户阅读：样式文件未加载时，页面结构清晰，提升用户体验。

 ④便于团队开发和维护: 语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，有利于合作，遵守W3C标准，减少差异化。

 ⑤方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

  • 常见的语义化标签：

header、footer、aside、main、h1-h6、input、textarea、video、aduio。

课后个人总结

  • 不容易掌握的知识点
    • input、section、label、textarea等标签的熟练运用
  • 容易混淆的知识点
    • input和textarea标签概念上的区别

引用参考

blog.csdn.net/m0_56161893…

avatar
文章
阅读
粉丝