前端与 HTML | 青训营笔记

377 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天,学习内容是前端与HTML

一、本堂课重点内容

1. 前端工作的定义
2. 前端技术栈拆解与分析
3. HTML 作用解析
4. HTML 语义化

二、具体知识点总结

1. 什么是前端

-->通过Web技术栈,希望可以跨终端地解决GUI人机交互问题的工作

2.认识前端技术栈

image.png
-->前端应该关注:功能、美观、无障碍、安全、性能、兼容、体验
-->前端开发环境只需要一个浏览器和一个编辑器,将文件存为html文件,在浏览器上打开该文件,即可显示所编写的网页效果

3.认识HTML

- 全称:HyperText Markup Language 超文本标记语言。超文本,即不止文本形式的信息,如图片、标题、链接、表格。标记,即以标签形式、遵循语义、对信息进行结构化表达。

- 当html文件在浏览器打开,会被翻译成DOM树

image.png

- 语法

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

4.常用标签归纳

①标题h1~h6<h1>、<h2>、<h3>……可以表示层级结构、重要程度

<p>块级标签,结束后自动换行,里面通常放置非标题类的正文内容

③超链接,例如<a href="http://www.runoob.com/" target="_blank">访问菜鸟教程</a>href属性描述链接的目标。target 属性定义被链接的文档在何处显示,设置为“_blank”会在新窗口打开文档。

④输入。

输入有多种形式,如输入自定义内容(单行/多行)、从下拉菜单中选择希望输入的内容选项、日期输入、单项/多项选择、程度选择条(可拖动)……

代码段1

image.png 实现效果1

image.png

代码段2

image.png 实现效果2

image.png

⑤列表。分有序、无序和定义列表。

image.png image.png