前端与HTML5 | 青训营笔记

2023-01-15 67 阅读1分钟

这是我参与「第五届青训营」伴学笔记创作活动的第一天

1、什么是前端？

解决GUI人机交互问题
跨终端

PC/移动浏览器
客户端
VR/AR等
Web技术栈

((1条消息) 【前端是什么】_秦俊杰.的博客-CSDN博客)

2、前端技术栈

HTML(内容)
CSS(样式)
JavaScript(行为)

3、前端应该关注哪些方面

美观
安全
功能
性能无障碍

4、前端的边界？

前端技术更新迭代很快，我们必须持续的学习！！！

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>文本内容</p>
</body>
</html>

1、DOM树

2、标题h1~h6

<h1>一级标题</h1> 
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4> 
<h5>五级标题</h5>
<h6>六级标题</h6>

    <ul>
        <li>榴莲</li>
        <li>香蕉</li>
        <li>苹果</li>
        <li>哈密瓜</li>
        <li>火龙果</li>
    </ul>
    <ol>
        <li>张三:100</li>
        <li>李四: 80</li>
    </ol>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
    </dl>

</body>

3、超链接标签

4、图片、音乐、视频标签

5、输入标签

6、选择标签

7、填空选择

8、文本引用标签

特别值得注意的： cite标签：短引用，q标签：文本引用 内容划分：header、nav、main、article、footer、aside;

5、前端语义化！！！

1、HTML中的元素、属性及属性值都拥有某些含有 2、开发者应遵循的语言来编写HTML 3、有序列表Ol;无序列表ul 4、Lang属性表示你内容所使用的语言！！！

6、谁在使用我们写的HTML

7、语义化的好处：

**第一天收获！！ **