前端小基础

HTML+CSS

网页的基础认知

网页是由文本、音频、视频、图片和超链接等构成的集合体。网页背后的本质是前端程序员写的代码，而程序员的代码是通过浏览器软件转换成网页的。浏览器是网页显示运行的平台，包含IE浏览器、谷歌浏览器、火狐浏览器、苹果浏览器和Opera浏览器，浏览器不同，渲染引擎不同，所以在网页的开发设计中，为了让不同的浏览器显示相同的展示效果，要遵循相同的Web标准。在Web标准中，HTML是结构，决定页面元素；CSS是表现，决定网页的样式美观；JS是行为，控制网页的交互效果。

HTML

HTML的基本认知

HTML是一种超文本标记语言，是一种网页开发语言，是网页组成的基本骨架。通过HTML标签对文本、音频、视频和超链接等内容进行描绘的。
HTML的基本骨架结构：

• head标签，骨架的头部
• body标签，骨架的身体
• title标签，骨架的标题

前端开发工具

在实际开发中，我们常用以下几种开发工具Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder。
但是对比而言，一般推荐VS Code开发工具，它具有体积小，速度快和插件多等优势。

HTML的语法规范

• HTML的注释：快捷键：ctrl+/
• 标签的构成：双标签和单标签
• 标签的结构：属性名=“属性值”
• 标签的关系：父子（嵌套）和兄弟（并列）

HTML的基础标签

1 排版标签

1.1 标题标签：h1-----h6
一到六级标题，标题标签，独占一行，文本加粗加大，大小从1到6逐级递减。
代码：

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我是四级标题</h4>
<h5>我是五级标题</h5>
<h6>我是六级标题</h6>

1.2 段落标签：p
段落标签，文本独占一行，段与段之间有间隔。
代码：

<p>段落标签</p>

1.3 换行标签：br
单标签，让文字强制换行。

1.4 水平线标签：hr
主题的分割转换，单标签，在页面中出现一条水平线。

2 文本格式化标签

第一组：

标签	说明
b	加粗
s	删除
u	下划线
i	倾斜

第二组：

标签	说明
strong	加粗
del	删除
ins	下划线
em	倾斜

第二组语义较强，在正式中一般使用第二组。

3 媒体标签

3.1 图片标签：img
代码：

src代表图片的路径；alt代表替换文本，当图片无法显示时显示替换文本；title代表鼠标悬停文本，当鼠标放在图片上后出现的文本。
可以给图片设置width（宽）和height（高）属性，设置一个属性，另一个就会等比缩放，如果两个同时设置，就会导致图片变形。

3.2 路径问题
路径分为绝对路径和相对路径，一般推荐使用相对路径。
绝对路径：一般从盘符开始。也可以是网络地址。
相对路径：从当前文件出发，寻找目标文件。
相对路径的三种情况：

• 同级目录：直接写目标文件的名字
• 下级目录：文件夹名/目标文件的名字
• 上级目录：…/目标文件的名字
  3.3 音频标签和视频标签
  音频标签：audio
  视频标签：vedio

属性	说明
src	路径
controls	播放的控件
autoplay	自动播放
loop	循环播放

注意：在vedio标签中，只有搭配muted实现静音播放才能自动播放。

4 链接标签

链接的意思是点击之后，从一个页面跳转到另一个页面。链接又叫超链接或锚链接。
代码：

<a herf=" ./目标地址.html">超链接</a>

属性：
target_self：表示在当前窗口跳转。这个时跳转的默认状态。
target_blank：表示在新窗口跳转。

在引号里面加#，表示空链接，不跳转。

5 列表标签

列表标签通常使用在新闻列表，排行榜，账单等。分为有序列表、无序列表和自定义列表。
无序列表：

<ul>
	<li>
	内容
	</li>
</ul>

有序列表：ol
自定义列表：dl

<dl>
	<dt>
	主题
	</dt>
	<dd>
	内容
	</dd>
</dl>

注意：在列表中，ul、ol和dl中只能嵌套li标签，但是li标签内可以嵌套任何标签，dl中可嵌套dt和dd标签。在自定义列表中，dd会默认显示缩进效果。</