[ 前端与 HTML | 青训营笔记]这是我参与「第五届青训营」伴学笔记创作活动的第 1 天本堂课重点内容 1. 前

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

前端是创建各种前端界面呈现给用户，通过Html，CSS及JavaScript以及其衍生出来的技术，来实现互联网产品的用户界面交互。

html、css、JavaScript运行在浏览器里面，浏览器通过http网络协议与服务器交互

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

前端在互联网行业发展非常快，技术不断的更新，我们需要不断的去学习技术才能不断的发展。

HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。

超文本——>图片、标题、链接、表格，
标记语言——><h1>文章标题</h1>

也可以说是用来标记Web信息如何展示以及其他特性的一种语法规则。

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

(1)head标签用于定义文档的头部，它是所有头部元素的容器。

(2)标题标签、列表标签

<h1>主标题内容</h1>
 
<h2>副标题内容</h2>
 
<h3>3号标题内容</h3>
 
<h4>4号标题内容</h4>
 
<h5>5号标题内容</h5>
 
<h6>6号标题内容</h6>

<ol>有序列表
<ul>无序列表
<dl>定义列表
<dt>列表头
<dd>列表值

(3)超链接标签(锚标签)

超链接就是指从一个网页指向一个目标的连接关系

在target属性中 _blank为新窗口打开一个网页

(4)媒体标签

img标签——>图片
audio标签——>视频
video标签——>音频

(5)输入

(6)引用

<blockquote>标签是用于对段落中大量的引用加引号
<cite>标签为引用标题
<q>标签为真正的引用语句
<code>标签为标注代码
<strong>标签为加粗
<em>标签为斜体

一般网页有header（头部区）、banner（广告横幅区）、main（主体内容区）、footer（底部区）

.HTML中的元素、属性及属性值都拥有某些含义
·开发者应该遵循语义来编写HTML
    1.有序列表用ol;无序列表用ul 
    2.lang属性表示内容所使用的语言

开发者-修改、维护页面
浏览器–展示页面
搜索引擎-提取关键词、排序
屏幕阅读器-给盲人读页面内容

代码可读性
可维护性
搜索引擎优化
提升无障碍性

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

本堂课了解了前端工作的定义，学到了前端技术栈拆解与分析和对 HTML 作用解析，HTML 语义化，及各种标签的复习。