这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天,学习内容是前端与HTML
一、本堂课重点内容
1. 前端工作的定义
2. 前端技术栈拆解与分析
3. HTML 作用解析
4. HTML 语义化
二、具体知识点总结
1. 什么是前端
-->通过Web技术栈,希望可以跨终端地解决GUI人机交互问题的工作
2.认识前端技术栈
-->前端应该关注:功能、美观、无障碍、安全、性能、兼容、体验
-->前端开发环境只需要一个浏览器和一个编辑器,将文件存为html文件,在浏览器上打开该文件,即可显示所编写的网页效果
3.认识HTML
- 全称:HyperText Markup Language 超文本标记语言。超文本,即不止文本形式的信息,如图片、标题、链接、表格。标记,即以标签形式、遵循语义、对信息进行结构化表达。
- 当html文件在浏览器打开,会被翻译成DOM树
- 语法:
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
实现效果1
代码段2
实现效果2