本文详细介绍了前端开发的基础，包括前端的历史、HTML的结构和标签、CSS的选择器和属性。从HTML的基本语法到CSS的布局、选择器权重、定位等内容，帮助初学者全面了解前端开发。
前端学习的笔记目录
一、前端简介
1、什么是前端
例如我们点开抖音所看到的界面就是前端，而我们用户看不到的，例如：抖音企业号商家管理后台、抖音客服系统、抖音云控系统等等，是和用户交互的
2、前端的发展历程
前端的发展，在05到06年，它属于美工范畴，主要制作一些静态网页。06到10年，我们利用网络三剑客用于网页制作动画。11到15年，web开发越来越重要了，HTML5基本奠定了它在互联网中的地位。
3、大前端能做什么
1）、网站
网站又分为PC端和移动端，PC端的有：京东官网、B站官网等等。移动端网站又称M站，例如：猫眼电影、京东等等
2）、管理系统
例如学校官网中教务系统中对学生的管理系统，又例如小程序的管理系统。
3）、APP
例如微信内嵌的公众号、咸鱼客户端等。
4）、小程序
例如微信小程序，滴滴出行、猫眼电影。
5）、数据可视化
我们可以将一些大数据做的可视化，甚至可以做出一些交互系统。
6）、智能电视
智能电视的交互页面
7）、桌面应用
指的是一些电脑上可装机使用的软件。严格上他也是混合开发的。
8）、网页游戏
例如PvZ
9）、工具和后端
可以为后端开发制作工具等，相辅相成
4、大前端的前景如何
大前端所利用的语言是Javascript是近五年全世界使用最多的语言。
二、HTML
1、HTML是什么
HTML是一种标记语言
2、浏览器
各种乱七八糟的浏览器
3、W3C
同一各大浏览器的语言规范。
HTML好比汽车框架，CSS就是汽车内外饰，JS就是让汽车做出一些动作。
4、基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个网页</title>
</head>
<body>
<center>
AAAA，<br/>BBBB
</center>
</body>
</html>
（1）标记语法
-
常规标记
<标签></标签>这是双标签 -
但标签
例如</br>
（2）VSCode
合理利用，注意文档声明和字符编码。
（3）语义化
没有CSS时为了呈现更好的结构，我们就需要语义化。
5、标签分类
（1）、h标签
<h1></h1>
<h2></h2>
`
`
<h6></h6>
（2）、段落标签
<p></p>
（3）、换行标签
<br>或<br/>
（4）、水平线标签
<hr>
（5）、加粗/强调显示
<b></b>或者<strong>强调内容</strong>
（6）、斜体
<i></i>或<em></em>
（7）、删除线标签
<s></s>或<del></del>
（8）、扩展
下划线<u></u>
下标<sub></sub>
上标<sup></sup>
（9）、特殊符号
尖角号：<，>
空格： ， 后者占据一个中文字符的宽度，且不受字体影响
版权：©©
商标：&rtade;™，®®
<div></div>div标签没有具体含义，独占一行
<span></span>span没有具体含义，主要用于对于文本独立修饰的时候，内容多宽就占用多宽的距离
（10）、列表标签
- 无序列表
<ul>
<li></li>
<li></li>
</ul>
- 有序列表
<ol type="" start="">
<li></li>
<li></li>
</ol>
可以定义由数字还是字母和从和开始的有序列表。
3. 自定义列表
<dl>
<dt></dt>
<dt></dt>
</dl>
（11）、图片标签路径
<img src="">src是源头的缩写
alt=""会在图片无法显示的时候会出现提示。
title=""鼠标移上去会由图片名称提示
（12）、超链接标签
能够实现在不同页面的跳转
<a herf="链接" title="鼠标移上去所显示的东西" target="规定在何处打开文档>内容</a>
如果没有点击过他是蓝色+下划线的，点击过后会变成紫色+下划线。
target属性：规定在何处打开文档：1. target="_self" 在当前窗口打开（默认值）
2. target="_blank" 在新窗口打开。
如果需要设置点击图片跳转，则需要代码：
<a href="网页地址" target="_blank">
<img src="图片地址" alt=" ">
</a>
（13）、表格标签
1. 基本格式
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
</tr>
</table>
Q：如何快捷创建一个2x2的表格？
A：table>tr>td*2+回车
Q：如何快速创建拥有两个tr的表格呢？
A：table>(tr>td*2)*2+回车或者table>tr*2>td*2+回车
2. table属性
宽度 width
高度 height
边框 border
边框颜色 bordercolor
背景颜色 bgcolor
水平对齐 alight="left/right/center"
单元格与单元格之间的间距 cellspacing=""
单元格与内容之间的空隙 cellpadding=""
3. table中的 行tr 属性（tr=table+row）
高度 height
背景颜色 bgcolor
文字水平对齐 align="left/right/center"
文字垂直对齐 valign=“top/middle/bottom”
注意：tr之中的宽度受父元素table的限制，但是他的高度可以自由设置
4. table中的 单元格td 属性（td=table+date）
宽度 width
高度 height
背景颜色 bgcolor
文字水平对齐 align=:left/right/center"
文字竖直对齐 valign="top/middle/bottom"
注意宽度和高度的影响对象：
如果一个单元格设置了宽度，将会影响这一整列的宽度
如果一个单元格设置了高度，将会影响这一整行的高度
背景颜色、对齐方式只会影响那一个单元格
5. table中的行列合并属性
合并列：colspan="numble"
合并行：rwospan="numble"
其中numble指的是需要合并的列数
注意：合并行列的属性必须给td。
合并后后面的表格将会被吞掉消失，并且不能合并成L型
示例1：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0" align="center">
<tr height="50" align="center">
<td width="100">会员姓名</td>
<td width="150"></td>
<td width="100">出生日期</td>
<td width="150"></td>
</tr>
<tr height="50" align="center">
<td width="100">身份证号</td>
<td colspan="3"></td>
</tr>
<tr height="50" align="center">
<td width="100">通讯地址</td>
<td colspan="3"></td>
</tr>
<tr height="50" align="center">
<td width="100">联系电话</td>
<td colspan="3"></td>
</tr>
<tr height="50" align="center">
<td width="100">会员卡号</td>
<td colspan="3"></td>
</tr>
</table>
</body>
</html>
示例2：
目标样式：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
最低0.47元/天 解锁文章
扫一扫
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
