前端从零开始第一周第一天前端发展前景：三维可视化趋势、大屏小屏交换、各种系统网站前端工具：HBuilderX、VS

第一天

前端发展前景：三维可视化趋势、大屏小屏交换、各种系统网站
前端工具：HBuilderX、VS Code、谷歌浏览器
HTML是超文本标记语言，浏览器特殊识别
常见浏览器内核： IE：Trident firefox： Gecko 曾经的谷歌浏览器 Safari： webkit chrome： Chromium/Blink 国内采用Blink内核二次开发 Opera：Presto
Web标准：制定结构（HTMl）、表现（CSS）和行为（JS）三方面的标准规范网页，释放生产力实现更高效的事情。

第二天

基本框架标签的含义

标签	定义	说明
`<!DOCTYPE html>`	文档说明	DOCTYPE 说明文档的类型是HTML5
`<html lang="en"></html>`	根标签	页面的包裹标签
`<head></head>`	头部标签	头部标签内容，主要用来说明，页面是什么的页面
`<titile></title>`	文档的标题	让页面拥有一个属于自己的网页标题
`<body></body>`	文档的主体	显示在页面上的内容放在body里面

HTML标签名、类名、标签属性和大部分属性值统一用小写

标签都拥有开始标签和结束标签，成双成对

<!DOCTYPE html>
<!-- DOCTYPE 说明文档的类型是HTML5-->
<html lang="en">
  <!-- 根标签 -->
<head>
  <!-- 头部标签内容，主要用来说明，页面是什么的页面 -->
  <meta charset="UTF-8">
  <!-- 告诉浏览器编码格式为 UTF-8 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 告诉浏览器，如果是IE浏览器请使用最高级的版本进行渲染 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 设置移动端的浏览器窗口的大小,宽度等于设备视口宽度, 初始缩放比例为 1 -->
  <title>Document</title>
  <!-- 该网页的标题 -->
</head>
<body>
  <!-- 显示在页面上的内容放在body里面 -->
</body>
</html>

常用排版标签

标题标签 h 标签 -- head
段落标签 p 标签 -- Prograph
横线标签 hr标签（单标签） --hyphen
换行标签 br标签（单标签） -- break
div 和 span 标签（重点）
1. div标签：用来布局的，但一行只能放一个div（块级标签）
2. span标签：用来布局，一行可以放很多歌span（行内标签）

排版标签总结

标签名	定义	说明
`<hx></hx>`	标题标签	作为标题使用，并且依据重要性递减
`<p></p>`	段落标签	可以把 HTML 文档分割为若干段落
`<hr />`	水平线标签	没啥可说的，就是一条线
`<br />`	换行标签	没啥可说的，就是换行
`<div></div>`	div标签	用来布局的，但是现在一行只能放一个div
`<span></span>`	span标签	用来布局的，一行上可以放好多个span

  <h1>开始学习</h1>
  <h2>开始学习</h2>
  <h3>开始学习</h3>
  <h4>开始学习</h4>
  <h5>开始学习</h5>
  <h6>开始学习</h6>
  <hr>
  <!-- <hr/> hr是单标签 加不加斜杠都可以 -->
  <p>在网页中将文字有条理的显示出来，p标签必不可少

    会将许多个空格变成一个空格,     在<b>html</b>里面<strong>直接</strong>写换行<br>和空格会变成空白符合并成一个空格
  </p>
  <p>你说呢，并且文本会根据窗口大小自动换行</p>
  <div>ohhhhh, 这是一整行</div>
  <div>ohhhhh, 这是一整行</div>
  <span>ohhhhh, <i>这不是一整行</i></span>
  <span>ohhhhh, <em>这不是一整行</em></span>
  <span>ohhhhh, 这
    <u>不是</u>一<ins>整行</ins></span>

0}`{9TOO4(@AIRW8WM88D2N.png

链接标签 a 标签（重点） --- anchor 锚

<a></a>在HTML中创建超链接非常简单，只需用标签把文字包括起来就好。属性不分前后顺序，但是必须写在开始标签内

<a href="URL" target="目标窗口的弹出方式">文本或图像</a>

属性	作用
href	指定跳转的目标url地址，当href有了值，a标签才拥有超链接的功能（href设置值为#时，为空链接）
target	用于置顶链接页面的打开方式，取值self和blank两种，self为默认值且在当前页面打开，blank在新窗口打开页面

图片标签 img标签-单标签（重点） --- image图像

<img />标签的属性不分先后顺序，但每个都是键值对形式存在。

<img src="shuai.jpg" width="300" height="300" border="3" alt="图片不存在" title="标题"/>

属性	属性值	描述
src	URL	图像的路径
alt	文本	图像无法显示时替换的文本
title	文本	鼠标悬停时显示的内容
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	数字(像素)	设置图像边框的宽度

作业：利用上述学到的标签制作一个页面介绍自己的家乡！

第三天

1. 注释标签

;快捷键 ctrl + /

2. 快速生成代码快捷键

基于VSCode的Emmet插件

快捷生成	快捷键	展示
生成h1标签	h1 + 回车	`<h1></h1>`
生成img标签	img + 回车	`<img src="" alt="">`
生成带有class属性的标签	div.box + 回车	`<div class="box"></div>`
生成带有id属性的标签	div#id + 回车	`<div id="id"></div>`
生成父子的标签	.menu>h3>a + 回车	`<div class="menu"><h3>[]()<a href=""></a></h3></div>`
生成兄弟结构标签	div+p + 回车	`<div></div> <p></p>`
返回上一层及生成标签	.menu>h3>a^p	`<div class="menu"><h3><a href=""></a></h3><p></p></div>`
	.menu>((h3>a)+p)	同样生成上一栏的效果，推荐该写法
生成重复的标签	div*3	`<div></div><div></div><div></div>`
	div#cart $.box$ *5	`<div id="cart1" class="box1"></div>从1 - 5的cart， $后面接的数字`
设置标签的属性,属性使用方括号 []，内容使用花括号{}	`#card>a[href=http://baidu.com][title=百度]{点击一下}`	`<div id="card"><a href="http://baidu.com" title="百度">点击一下</a></div>`
指定顺序从123开始数5位	`ul>li#id$$$@123*5`	`<ul><li id="id123"></li>....id="id127"</ul>`
指定逆序从3到1	`ul>li#id$@-3*3`

注意：所有的快捷键都是可以搭配使用的，生成的标签会依据行内还是块级标签呈现单行或者是换行。（id是唯一的）

3. 表格 table（会使用）

由于性能不佳和样式不好调控，主要用于表示，让编辑代码的难度增加很多，不太建议使用，请做了解。

标签	说明
`<caption></caption>`	表格标题
`<table></table>`	表格主体
`<tr></tr>`	表格行标签
`<th></th>`	表头单元格
`<td></td>`	单元格标签

属性

属性	描述
cellspace	单元格之间的距离
cellpadding	单元格内容与单元格边框的距离
width	表格宽度
height	表格高度
align	摒弃了，采用css中的text-align属性
colspan	合并列
rowspan	合并行

4.列表

标签名	描述
ul>li	无序列表
ol>li	有序列表
dl>dt(dd)	自定义列表

作业：根据所学元素写出一个个人简历单

第四天

1.表单标签（掌握）

<form></form>能写出常用的注册类表单，input表单常见属性

语法:

<form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>

常用属性：

属性	属性值	作用
action	url地址	用于指定接收并处理表单数据的服务器程序的url地址。
method	get/post	用于设置表单数据的提交方式，其取值为get或post。
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单。

表单控件：

包含具体的功能项，如单行的文本输入框、密码输入框、复选框，提交按钮、重置按钮等

表单域：

form标签相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过action属性中的url地址，提交到对应的服务器，不定义表单域无法传送数据。

1.1 input标签（重点）

写法：

<input type="类型" value="xx" />

不同的类型

属性	属性值	描述
type	text	文本输入框
	password	密码输入框
	radio	单选按钮
	checkbox	复选框
	button	按钮
	submit	表单提交按钮
	reset	表单重置按钮
	file	文件控件
	color	选色板
	date/datetime	时间选择器
	range	滑块（属性：min、max、step）

属性值

属性	属性值	描述
name	自定义值	名称
value	自定义值	默认的文本值
size	自定义正整数	input显示的宽度
checked	checked	默认选中
maxlength	自定义正整数	默认输入最多的字符数量
type	规定值	input的类型
required	无	写上表示必须有值，不然无法提交
readonly	无	写上表示只读
disabled	无	写上表示无法选中

示例：百度的高级搜索页面

<form
      action="https://www.baidu.com/s"
      name="f1"
      target="_blank"
      method="GET"
    >
      <div>
        <label for="q1">
          <span>包含以下全部的关键词</span>
          <input id="q1" name="q1" type="text" />
        </label>
        <button type="submit">百度一下</button>
      </div>
      <div>
        <label for="q2">
          <span>包含以下的完整关键词</span>
          <input id="q2" name="q2" type="text" />
        </label>
      </div>
      <div>
        <label for="q3">
          <span>包含以下任意一个关键词</span>
          <input id="q3" name="q3" type="text" />
        </label>
      </div>
      <div>
        <label for="q4">
          <span>不包括以下关键词</span>
          <input id="q4" name="q4" type="text" />
        </label>
      </div>
      <div>
        <label for="rn">选择搜索结果显示的条数</label>
        <select name="rn">
          <option value="10" selected="selected">每页显示10条</option>
          <option value="20">每页显示20条</option>
          <option value="50">每页显示50条</option>
        </select>
      </div>
      <div>
        <label for="lm">选择搜索结果显示的条数</label>
        <select name="lm">
          <option value="0" selected="selected">全部时间</option>
          <option value="1">最近一天</option>
          <option value="7">最近一周</option>
          <option value="30">最近一月</option>
          <option value="360">最近一年</option>
        </select>
      </div>
      <div>
        <label for="ct">搜索网页语言是</label>
        <input name="ct" id="ct_0" value="0" checked="checked" type="radio" />
        <label for="ct_0">全部语言</label>
        <input name="ct" id="ct_1" value="1" type="radio" />
        <label for="ct_1">仅在简体中文中</label>
        <input name="ct" id="ct_2" value="2" type="radio" />
        <label for="ct_2">仅在繁体中文中</label>
      </div>
    </form>

1.2 label标签

提高用户的体验，点击label标签能够是label对应的表单控件获得焦点。

示例

<!-- 1.label直接包裹input -->
<label> 用户名： <input type="text" name="usename" value="请输入用户名">   </label>
<!-- 2. for属性跟随控件的id属性 -->
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">

1.3 textarea标签——文本域

语法：

<!-- cols="每行中的字符数" rows="显示的行数"  -->
<textarea cols="4" rows="2">
  文本内容
</textarea>

文本框和文本域区别

表单	名称	区别	默认值显示	用于场景
input type="text"	文本框	只能显示一行文本	单标签，通过value显示默认值	用户名、昵称、密码等
textarea	文本域	可以显示多行文本	双标签，默认值写到标签中间	留言板

1.4 select下拉框

语法：

<!-- 通过其中的option进行下拉选择， selected表示选中 -->
<select>
  <option selected="selected ">选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

作业：仿照搜狗的高级搜索完成一个form表单

第五天

1. css的初步认识

HTML只注重内容的语义化，并没有布局和网页修饰，会显得很丑，不美观；这个时候就需要CSS来修饰各个标签，让网页根据我们自己的想法去布局和排版。

概念： CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）

作用： 用于设置HTML页面中的文本、图片形状和页面布局显示

2. CSS的引入方式

2.1 内联样式（行内样式）

语法格式

<!-- <标签名 style="属性:属性值; 属性:属性值; 属性:属性值;"> 内容 </标签名> 
    1.style是每个标签都具有的属性
    2.样式属性赋值是键值对形式的 color : red 
    3.用分号隔开 ;
-->
<div style="color: red; font-size: 100px;">学习学习</div>

缺点： 只能控制当前标签，且代码耦合度严重

2.2 内嵌样式表

语法格式

<!-- 1.一般写在head标签里面，其他地方也可以
     2.写明type类型（html5中可省略）
-->
<head>
    <style type="text/css">
     div {
        color: red;
        font-size: 12px;
     }
    </style>
</head>

缺点： 只能控制当前页面

2.3 外部样式表（外链式）

语法格式

<!-- 将外部的css样式文件引入进来-->
<head>
  <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

2.4 对比

	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

3. CSS基础选择器

选择器的作用： 找到想要找到的HTML中对应的标签元素，对其进行操作

3.1 选择器的类型

3.1.1 标签选择器

概念： 用HTML标签名作为选择器，给这一类的标签统一制定样式
用法： 例子：给所有的div的字体设为红色，字体大小设为12px
```
div {
    color: red;
    font-size: 12px;
}
```
缺点： 只能给页面中同一种标签设置统一的样式

3.1.2 类选择器

概念： 使用.进行标识，后面接自定义类名
- 命名注意点：
  - 长名称或词组可以使用中横线来为选择器命名。
  - 不要纯数字、中文等命名，尽量使用英文字母来表示。

用法：例子：给c标签的class属性为 box的字体设为红色，字体大小设为12px

.box {
    color: red;
    font-size: 12px;
}
.box_2 {
    width: 100px;
    height: 100px;
}

<!-- 标签可以指定多个类名，中间用空格隔开-->
<div class="box box_2">今天你加油了吗？</div>
<span class="box">一直会加油的</span>

3.1.3 id选择器

概念： 顾名思义是通过指定标签的id名来制定样式，通过#符号标识
用法：
- html元素的id值是唯一的，因此只局限于一个元素
- 其他和类选择器相同
```
#lxm {
    color: red;
    font-size: 12px;
}
```
```
<div id="lxm"></div>
```

3.1.4 通配符

概念： 用*星号标识，选择所有的标签；是选择器中作用范围最广的
用法：
- 注意点：因为会选择所有元素，会降低页面响应速度，不建议随便用
```
* {
 marin: 0;
 padding: 0;
 }
```

4 font字体

4.1 font-size：大小

作用：font-size属性用于设置字号
单位：
- 使用相对长度单位，也可以使用绝对长度单位
- 推荐使用响度单位，绝对长度单位使用较少
用法
```
p {  
    font-size:20px; 
}
```

4.2 font-family：字体

作用：font-family属性用于设置哪一种字体。
用法
```
p{ font-family:"微软雅黑";}
```

4.3 font-weight：字体粗细

用法：将字体加粗，也可以使用b和strong标签

属性值描述
normal 默认值（不加粗的）
bold 定义粗体（加粗的）
100~900 400 等同于 normal，而 700 等同于 bold 我们重点记住这句话

属性值	描述
normal	默认值（不加粗的）
bold	定义粗体（加粗的）
100~900	400 等同于 normal，而 700 等同于 bold 我们重点记住这句话

4.4 font-style：字体风格

用法：将字体倾斜，同样也可以使用标签实现用 i 和 em 标签

属性	作用
normal	默认值，浏览器会显示标准的字体样式 font-style: normal;
italic	浏览器会显示斜体的字体样式。

4.5 总结

属性	表示	注意点
font-size	字号	我们通常用的单位是px 像素，一定要跟上单位
font-family	字体	实际工作中按照团队约定来写字体
font-weight	字体粗细	记住加粗是 700 或者 bold 不加粗是 normal 或者 400 记住数字不要跟单位
font-style	字体样式	记住倾斜是 italic 不倾斜是 normal 工作中我们最常用 normal
font	字体连写	1. 字体连写是有顺序的不能随意换位置 2. 其中字号和字体必须同时出现

5. CSS外观属性

5.1 color：文本颜色

作用： color属性用于定义文本的颜色
取值方式：

表示表示属性值
预定义的颜色值 red，green，blue，还有我们的御用色 pink
十六进制 #FF0000，#FF6600，#29D794
RGB代码 rgb(255,0,0)或rgb(100%,0%,0%)

表示表示	属性值
预定义的颜色值	red，green，blue，还有我们的御用色 pink
十六进制	#FF0000，#FF6600，#29D794
RGB代码	rgb(255,0,0)或rgb(100%,0%,0%)

5.2 text-align：文本水平对齐方式

作用： text-align属性用于设置文本（内容）水平对齐方式，相当于HTML中的align
可用属性如下：

属性解释
left 左对齐（默认值）
right 右对齐
center 居中对齐

属性	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

5.3 line-height：行内距

作用： line-height用于设置行间距，航雨航之间的距离，字符垂直间距（行高）
常用取值： 属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px

技巧：

一般情况下，行距比字号大7.8像素左右就可以了。
line-height: 24px;

5.4 text-indent：首行缩进

作用： text-align属性用于首行文本的缩进
属性值：
- 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值,
- 建议使用em作为设置单位。（1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度）

p {
      /*行间距*/
      line-height: 25px;
      /*首行缩进2个字  em  1个em 就是1个字的大小*/
      text-indent: 2em;  
 }

5.5 text-decoratiion 文本的装饰

作用： 通常用于给链接修改装饰效果

属性

属性值	描述
none	默认。定义标准的文本。取消下划线（最常用）
underline	定义文本下的一条线。下划线也是我们链接自带的（常用）
overline	定义文本上的一条线。（不用）
line-through	定义穿过文本下的一条线。（不常用）

用法

a {
    text-decoration: none;// 取消a标签默认的下划线
}

5.6 text-shadow 文字阴影

作用： 通常用于给对应的文本添加阴影效果
用法属性：
```
text-shadow: h-shadow v-shadow blur color;
```
属性值描述
h-shadow 水平阴影的位置。允许负值。
v-shodow 垂直阴影的位置。允许负值。
blur 模糊的距离
color 阴影的颜色
```
a {
    text-shadow: 5px 5px 5px #000000;
}
```

属性值	描述
h-shadow	水平阴影的位置。允许负值。
v-shodow	垂直阴影的位置。允许负值。
blur	模糊的距离
color	阴影的颜色

前端从零开始第一周

第一天

第二天

基本框架标签的含义

常用排版标签

排版标签总结

链接标签 a 标签（重点） --- anchor 锚

图片标签 img标签-单标签（重点） --- image图像

作业：利用上述学到的标签制作一个页面介绍自己的家乡！

第三天

1. 注释标签

2. 快速生成代码快捷键

3. 表格 table（会使用）

标签

属性

4.列表

作业：根据所学元素写出一个个人简历单

第四天

1.表单标签（掌握）

1.1 input标签（重点）

1.2 label标签

1.3 textarea标签——文本域

1.4 select下拉框

作业：仿照搜狗的高级搜索完成一个form表单

第五天

1. css的初步认识

2. CSS的引入方式

2.1 内联样式（行内样式）

2.2 内嵌样式表

2.3 外部样式表（外链式）

2.4 对比

3. CSS基础选择器

3.1 选择器的类型

3.1.1 标签选择器

3.1.2 类选择器

3.1.3 id选择器

3.1.4 通配符

4 font字体

4.1 font-size：大小

4.2 font-family： 字体

4.3 font-weight：字体粗细

4.4 font-style：字体风格

4.5 总结

5. CSS外观属性

5.1 color：文本颜色

5.2 text-align：文本水平对齐方式

5.3 line-height：行内距

5.4 text-indent：首行缩进

5.5 text-decoratiion 文本的装饰

5.6 text-shadow 文字阴影

作业：仿照百度鸟纲页面写出对应的排版

4.2 font-family：字体