这是我参与「第五届青训营 」笔记创作活动的第1天
本堂课重点内容
- 前端要解决的基本问题
- 前端技术栈拆解与分析
- HTML基本语法和基本功能
- HTML语义化
详细知识点介绍
什么是前端？前端应关注哪些方面？
前端工程师使用Web技术栈，解决多端图形用户界面交互问题。
前端应该关注功能、美观、安全、性能、无障碍、兼容性、用户体验等。
前端技术栈
可分为三层，最基础的是HTML，HTML负责页面结构和内容。其次是CSS，可利用CSS设置页面样式。JavaScript来定义页面的行为。 HTML、CSS、JavaScript运行在浏览器上，可通过网络协议与服务器进行通信。
HTML是什么
超文本标记语言（全称：Hypertext Markup Language，缩写：HTML）通过标签语言来标记要显示的网页中的各个部分。
Hypertext超文本，可以包含图片、标题、链接、表格等更丰富的格式。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
HTML结构
<html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。<head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。<title></title>定义网页标题，在浏览器标题栏显示。<body></body>之间的文本是可见的网页主体内容
HTML语法
- 标签和属性 不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、readonly
常用标签
列表标签：
<ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)]
<ol>: 有序列表
<li>: 无序列表
<dl> 定义列表
<dt> :列表标题
<dd> :列表项
超链接标签：
<a></a>:所谓超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。href属性指定目标网页地址。target="_blank"表示新窗口打开。
多媒体标签
<img></img>图形标签
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
width: 图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
<audio></audio>音频标签<video></video>视频标签
选择
<select> </select>下拉选标签属性
文本类标签
- 段落与换行标签：
<p>段落内容</p> - 标签字标签：
<hn>标签字</hn>，n取值1~6 - 块引用标签：
<blockquote>文本</blockquote> - 对某个参考文献的引用：
<cite>文本</cite> - 对代码的书写：
<code>文本</code> - 文字变成斜体:
<em>文本</em>
语义化是什么
HTML中元素、属性及属性值都拥有某些含义，开发者应遵循语义来编写HTML。例如，有序列表用ol;无序列表用ul，lang属性表示内容所使用的语言。
语义化可以提高代码的可读性，可维护性，以及利于搜索引擎优化和提高无障碍性。
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
