HTML | 青训营笔记

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

1.什么是前端？解决图形用户界面（GUI）下的人机交互问题。前端工程师使用web技术栈来解决多端用户图形界面交互问题。

2.主要技术 html（负责内容。人的结构）css（样式。人的衣服）JavaScript（行为交互。动态的人）浏览器通过http协议与服务端进行通信

3.HTML （HyperText Mark-up Languag）超文本标记语言，通过一系列成对的带有特殊含义的标签来对文章内容进行表示。以下是一部分标签：

列表lists 无序<ul> 有序<ol>然后就是用<li>元素把每个列出的项目单独包裹起来：

<ul>
<li> 豆浆</li
<li> 油条</li>js
复制代码

</ul> 表示为：

豆浆
油条

有序就是前面变成数字。

链接标签使用

<a href="http:://www.bytedance.com/ target=blank">字节跳动官网</a>（新建标签页跳转）
<a href="http:://www.bytedance.com/">字节跳动官网</a>(在页面内跳转)`js
复制代码

还有一系列在页面内插入视频音频图片，例如

<img src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth">
复制代码

alt属性是在图片无法加载是显示出的说明文字，是备选文本。用到alt属性的地方有很多例如用户有视力障碍，通过屏幕阅读器来浏览网页或者浏览器不支持该图片类型。某些用户仍在使用纯文本的浏览器，用户关闭的图片显示以减少数据的传输，这在手机上是十分普遍的等等吧。

<video controls width="400" height="400"
  autoplay loop muted
  poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>你的浏览器不支持 HTML5 视频。可点击<a href="rabbit320.mp4">此链接</a>观看</p>
</video>
复制代码

这是视频插入界面，controls属性是页面播放的控制开关，autoplay 音频和视频内容立即播放，即使页面的其他部分还没有加载完全， loop属性是循环播放，muted是默认关闭声音，poster是指向一个图像，在视频播放前预览图像，就是头图。属性还有很多，慢慢了解。输入选项标签

<inout list="countries"/>
<datalist id="countries">
<option> Greece </option>
<option>United States</option>
</datalist>js
复制代码

长引用标签<blockquote>短引用标签<q><cite>

页面内容整体划分标签为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

[<header>]：页眉。
[<nav>]：导航栏。
[<main>]：主内容。主内容中还可以有各种子内容区段，可用[<article>]、[<section>] 和 [<div>] 等元素表示。
[<aside>]：侧边栏，经常嵌套在中。
[<footer>]：页脚。

5.HTML受众

开发者-修改和维护
浏览器-展示页面搜索引擎-搜索关键词，排序无障碍和屏幕阅读器-在有限条件下来能准确获得信息（例如强光下的阅读）或者给盲人读页面

总体HTML原则：传达内容，而不是传达样式

小趴菜青训营笔记

HTML | 青训营笔记