第一部分 HTML笔记 | 青训营笔记

已注销
92 阅读2分钟

这是我参与第四届青训营笔记创作活动的第1天 该部分是有关于青训营的第一部分HTML的学习做出的总结性笔记内容

前言

1.什么是前端？

1.解决GUI人机交互问题 2.跨终端：PC/移动浏览器、客户端小程序、VR/AR等 3.Web技术栈

总结：

前端工程师使用Web技术栈解决多端图形用户界面交互的问题

2.前端技术栈

1.HTML（内容）、CSS（样式）、JavaScript（行为） 2.三者都是运行在浏览器中的 3.浏览器通过HTTP协议和服务器通信

前端技术栈-1.png

开发环境-1.png

3.前端应该关注哪些方面？

功能、美观、无障碍、安全、性能、兼容、体验等等

4.前端的边界

5.开发环境

开发环境-1.png

第一部分 HTML

1.什么是HTML

英文全称：HyperText Markup Language HyperText（超文本）：图片、标题、链接、表格等等 Markup Language（标记语言）：用开始标签和结束标签来表示，例如<h1>一级标题</h1>

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <h1>一级标题</h1>
    <p>段落内容</p>
</body>
</html>

注意：

1.<!DOCTYPE html>的作用是告诉浏览器，该使用哪一种渲染方式来处理页面 2.所有的标签都必须写在<html></html>中

2.DOM树

DOM树-1.png

注意：

1.每一个块都成为DOM节点 2.document根节点 3.浏览器中右击检查可以打开浏览器调试工具

3.HTML语法

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

4.标题标签

标题标签-1.png

注意：

1.h1~h6字体大小依次变小

5.列表标签

列表标签-1.png

补充：

1.有序列表的type属性取值有5中，分别是1（数字）、i（小写罗马字母）、I（大写罗马字母）、a（小写字母）、A（大写字母） 2.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中方输入其他标签或文字的做法是不被允许的

注意：

1.<dl></dl>为自定义列表，<dt></dt>为自定义列表的标题，<dd></dd>为修饰或说明<dt></dt>的条目

6.链接标签

链接标签-1.png

注意：

1.点击之后可以跳转到某个网站

7.多媒体标签

多媒体标签-1.png

注意：

1.alt是当用户加载视频或者图片出错时显示出来的说明性文字

8.表单标签（输入）

表单标签-1.png

注意：

1.placeholder是提示文字的作用 2.<input type="number" min="1" max="10">规定输入的必须是数字并且在0~10

表单标签-2.png

表单标签-3.png

注意：

1.多个radio有相同的name属性时，只能选择其中的一个

9.文本标签

文本标签-1.png

文本标签-2.png

9.内容划分

内容划分-1.png

注意：

1.header：头部 2.main：主体

10.语义化是说什么？

语义化的作用-1.png

语义化的作用-2.png

avatar
文章
阅读
粉丝