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

第一课、前端与HTML

一、什么是前端

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

二、HTML

• 超文本标记语言

2.1 HTML 标签介绍

1、有序列表
<ol>
	<li></li>
</ol>
2、无序列表
3、key value列表
三者为多对多的方式
<dl>
    <dt>
        <dd></dd>
    </dt>
</dl>
4、超链接
3. 功能链接
(1). 点击后，触发某个功能
- 执行JS代码，javascript:
- 点击不执行任何东西，javascript:;
- 发送邮件，mailto:
要求用户计算机上安装有邮件发送软件：exchange

- 拨号，tel:
直接在href：里面写tel：
要求用户计算机上安装有拨号软件，或使用的是移动端访问

(2). target属性
表示跳转窗口位置。
target的取值：
- _self：在当前页面窗口中打开，是默认值，点击超链接后，将当前页面覆盖掉了
- _blank: 在新窗口中打开

5、图片
<img src="" alt="这是一张什么什么的照片">
6、音频：
共同属性：
controls: 控制控件的显示，就是那个播放键（不写这个视频一开始是没有播放键的），取值只能为controls
contros=“controls”
注：某些属性，只有两种状态：
1. 不写   2. 取值为属性名，这种属性叫做布尔属性
布尔属性，在HTML5中，可以不用书写属性值
autoplay: 布尔属性，自动播放。
muted: 布尔属性，静音播放。
loop: 布尔属性，循环播放
<audio src="./media/shamoluotuo.mp3" controls autoplay loop muted></audio>
<video controls autoplay muted loop style="width:500px;">
    <source src="media/open.mp4">
    <source src="media/open.webm">
    <!-- 特地写一个sourec标签，为了兼容不同的浏览器 -->
    <p>
        对不起，你的浏览器不支持video元素，请点击这里下载最新版本的浏览器
    </p>
</video>
7、输入框input不同属性的应用
8、select、input list属性和datalist、option结合，提供输入选项及提示
9、引用标签
<blockquote cite="">
    快捷引用
</blockquote>
<cite>
	短引用
</cite>
<code>
	代码引用
</code>
10、文本标签
强调标签
<strong></strong>
重音标签
<em></em>

2.2 语义化

• HTML中的元素、属性及属性值都拥有某些含义

• 开发者应该遵循语义编写HTML

  • 比如lang属性表示内容所使用的语言

• 便于浏览器读取展示，便于开发者维护，屏幕阅读器——给盲人读页面内容，搜索引擎优化——提取关键词、排序

• 记住HTML是传达内容而不是样式

• 如何做到语义化？

  • 了解标签属性含义
  • 思考什么标签最适合描述这个内容
  • 不适用可视化工具生成代码