这是我参与「第四届青训营 」笔记创作活动的第1天
一、重点内容
- 前端的基本概念
- 认识HTML，以及HTML的基本语法
- 简单介绍了语义化
二、详细介绍
前端
前端是什么？
我认为前端就是无论是在PC端，还是移动端或是浏览器，都可以将我们的网页展现给用户浏览，所以我们要关注以下七个方面：
- 功能
- 美观
- 无障碍
- 安全
- 性能
- 兼容
- 体验
前端的开发环境
浏览器：
- IE/Edge
- Chrome（推荐）
- Firefox
- Safari
- 360浏览器
- QQ浏览器
编辑器：
- VSCode
- Vim
- WebStorm
- Visual Studio Code
- Editplus
- Adobe dreamweaver
- Sublime text
- Hbuilder
HTML
HTML是啥？
HTML全称是Hyper Text Markup Language，也就是超文本标记语言，它是一种标记语言，而不是编程语言。
HTML注意事项
一个 HTML 标签由开始标签、属性、内容和结束标签组成
属性
↓
<div class="one">前端</div>
↑ ↑ ↑
开始标签 内容 结束标签
- 标签和属性不区分大小写，推荐小写，大多数属性值要区分大小写；
- 所有 HTML 标签都要放在'<>'内；
- HTML 中不同的标签可以实现不同的效果；
- 属性值最好用双引号("")包着；
- 如果使用了某个标签，则必须使用对应的结束标签来结尾，一般分为两种标签：
- 双标签:<开始标记></结束标记>，例如:
<html></html>,<body></body>...... - 单标签:<单标记>，例如：
</br>......
<!DOCTYPE html><!--声明文档类型，由渲染引擎解析-->
<html lang="en"><!--根标签-->
<head><!--头部标签，里面的内容是给浏览器/搜索引擎看的-->
<meta charset="UTF-8"><!--字符编码，让浏览器做好翻译工作-->
<title>前端与HTML</title><!--标题标签-->
</head>
<body><!--主体标签，给用户/浏览者看-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落内容<br>
</body>
</html>
语义化
传达内容，而不是样式
概念
根据内容的结构，选择合适的标签。
意义
- 网页结构合理；
- 网页内容容易被搜索引擎抓取；
- 方便其他设备的解析；
- 方便团队的开发与维护。
如何做到语义化？
- 了解每一个标签与属性的意思；
- 使用前，想清楚什么样的标签才适合这个内容；
-
- 例如：有序列表使用"ol";无序列表使用"ul"
- 尽量用css样式。
*好的语义化就算没有样式表文件，结构依然清晰明了。*
三、总结
初步认识了前端和HTML。
