黑马程序员web前端HTML5+CSS3+移动web全套，零基础自学必备
7.15 学习打卡第一天 day 01
前端基础： HTML 和 CSS
一、HTML 初识
（1）基础认知
1、网页组成：文字、图片、超链接、音频，视频等
网页本质：前端程序员写的代码（F12）
代码通过浏览器转换成网页（渲染）
2、五大浏览器：IE、Firefox、Chrome（市场份额最多，速度快，效果好）、Safari（apple）、Opera
渲染引擎：浏览器内核
前端工程师常用浏览器：Chrome
3、web标准的构成：让不同的浏览器按照相同的标准显示结果，让展示的效果统一。
构成：结构层，表现层，行为层。
结构层：HTML（页面元素）和内容
HTML（超文本标记语言）
构建基本网页的步骤：新建文字变粗.txt;添加内容并保存；修改后缀为.html;双击文字变粗.html。
例：<strong>我要变粗</strong>
HTML固定结构：整体、头部、标题、主体
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页的主体内容
</body>
</html>
开发工具：VS Code（速度快、体积小、插件多）
VS Code 快捷键：
1、快速生成标签：英文+ tab
2、保存文件：Ctrl+s
3、快速查看网页效果 ： alt + b
4、快速生成结构标签：！(英文)+ tab
注释：ctrl + /
<!--注释内容-->
表现层：CSS（页面样式）
行为层：JavaScript（页面交互）
（2）HTML标签学习
双标签、单标签（<br>、<hr>）
标签的属性：属性名="属性值"
标签之间关系：父子关系、兄弟关系
标题标签：<h1>文字内容</h1>(h1~h6，大小逐级递减，独占一行，文字都加粗)
段落标签:<p>内容</p>(段落之间存在间隙，独占一行)
换行标签：<br> （强制换行）
水平线 标签：<hr>(在页面中显示出一条水平线）
文本格式化标签：b加粗、u下划线、i倾斜、s删除线
strong 、ins 、em、 del (标签语义化要求)
图片标签：<img src="" alt = "" title="" width= "" height="">
src 属性：目标图片的路径
alt 属性：替换文本（加载失败后显示）
title 属性：提示文本（鼠标悬停是，才显示的文本）
with 和 height 属性：只设置其中一个，等比例缩放
（3）综合案例
