一、前端开发介绍
1.前端主要技术
HTML5：搭建网页结构的语言，增加了很多移动端的支持。
CSS3：样式表，美化网页的语言，增加了很多动画、过度等新特性，要记的英语单词也非常多。
JavaScript：前端开发工程师最重要的“看家语言”。
Vue.js/React.js：从2016年前后开始流行的前端框架。
本文主要讲的是HTML。
2.开发流程（复用理念）
- 美工制图–>搭建页面主体-HTML–>页面元素排版-CSS–>页面元素交互开发-JS–>前后端整合对接
- 需求分析–>选择模板–>基于模板修改（HTML/CSS/JS）–>前后端整合对接
3.主流IDE工具比较
| IDE名称 | 公司 | 是否免费 | 功能 |
|---|---|---|---|
| Visual Studio Code | 微软 | 是 | 强 |
| Notepad++ | Softonic | 是 | 适中 |
| 记事本 | Windows自带 | 是 | 弱 |
| vi/vim | Linux自带 | 是 | 适中 |
| HBuilder | DCloud | 是 | 非常强 |
二、HTML语法
HTML文档是由HTML元素定义的
- HTML元素以开始标签起始<x>
- HTML元素以结束标签终止</x>
- 元素的内容是开始标签与结束标签之间的内容
- 某些HTML元素具有空内容
- 空元素在开始标签中进行关闭（</x>）
- 大多数HTML元素可拥有属性
例：
<p>Hello World!</p> <!--其中p为元素名称-->
1.标签-HTML的基础
定义：HTML叫做超文本标记语言，超文本标记就是标签。不同的标签有不同的功能。
例：
<p></p> <!--p标签，其中p为元素名称-->
<title></title> <!--title标签-->
<meta> <!--meta标签-->
2.标签的属性
HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。
属性总是是以名称/值对的形式出现，比如：name=“value”。
属性总是在HTML元素的开始标签中规定。
例：
<body> <!--定义HTML文档的主体-->
<body bgcolor="yellow"> <!--拥有关于背景颜色的附加信息-->
3.创建一个网页
1）新建好文件夹
2）打开VSCode
3）Ctrl+N新建文件
4）Ctrl+S保存到新建的文件夹，扩展名为：.html
5）输入!（英文感叹号），按Tab键，生成HTML5骨架
4.HTML文档骨架
5.注释
HTML注释是为了提高代码的可读性，而编写的代码提示信息，对浏览器用户是不可见的。
语法为：<!–注释的内容–>
6.HTML5特性
1）空白折叠现象
特性1：文字和文字之间，如果有多个空格或换行，会被自动折叠成一个空格
特性2：标签内壁和文字之间，如果有空格，空格将会被忽略
2）转义字符
若网页内容需要包含html的标签或标签对时，如<hr>、<p></p>可以采用转义字符来破坏标签
3）标签分类
7.关键标签解析
基础：
样式/节：
列表：
表格：
链接：
<a> 定义一个链接
<link> 定义文档与外部资源的关系
<main> 定义文档的主体部分
<nav> 定义导航链接
图像：
Audio/Video：
8.案例解析
1）我的第一个网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第1个网页</title>
</head>
<body>
我的第一个网页。
Hello world!
</body>
</html>
2）HTML特性 空格需要敲命令  ><
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>1.空格折叠</h2>
<p>人要是行， 干一行行一行，一行行行行行，人要是不行，干一行不行一行，一行不行行行不行</p>
<h2>2.换行折叠</h2>
<p>人要是行，
干一行行一行，
一行行行行行，
人要是不行，
干一行不行一行，
一行不行行行不行</p>
<h2>3.内壁效应</h2>
<p> 人要是行，干一行行一行，一行行行行行，人要是不行，干一行不行一行，一行不行行行不行 </p>
<h2>4.转义字符</h2>
<p>
今天我们学习<title></title>标签对。
</p>
<p>
今天我们学习<title></title>标签对。
</p>
<p>
姓名： 身份证号码：
</p>
<p>
姓名： 身份证号码：
</p>
</body>
</html>
3）网页Title、关键词、页面描述 meta keywords
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="软件测试,软件测试自学,软件测试工程师,软件测试资料下载,软件测试视频,软件自动化测试,软件性能测试,软件接口测试,网上学习软件测试,ISTQB">
<meta name="Description" content="目前已开设软件测试相关课程100余门,涵盖软件测试基础、自动化测试、性能测试、安全测试、接口测试、认证考试、职场">
<title>XX网</title>
</head>
<body>
Title、关键词、网页描述。
</body>
</html>
4）HTML4时代的分区标签
修饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="header">
<div class="logo">logo区域</div>
<div class="nav">导航区域</div>
</div>
<div class="banner">广告区域</div>
<div class="content">
<div class="aside">左侧栏</div>
<div class="main">主要内容区域</div>
</div>
<div class="footer">页面底部</div>
</body>
</html>
5.HTML5新增的区块化标签 header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--1. 网页的头部-->
<header>
<div class="logo">网页的logo</div>
<nav>导航条</nav>
</header>
<!--2. 网页的核心-->
<main>
<!--广告-->
<aside>广告</aside>
<article>
<h1>文字的标题</h1>
<section>部分1</section>
<section>部分2</section>
<section>部分3</section>
</article>
</main>
<!--3页脚 -->
<footer></footer>
</body>
</html>
6.标题、段落标签 title p
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>南京市十大景点</title>
</head>
<body>
<h1>南京市十大景点</h1>
<h2>1.侵华日军南京大屠杀遇难同胞纪念馆</h2>
<p>
侵华日军南京大屠杀遇难同胞纪念馆位于原日军大屠杀遗址之一的万人坑，是一处以史料文物、建筑、雕塑、影视等综合手法，全面展示“南京大屠杀”惨案的专史陈列馆。展馆分为广场陈列、史料陈列、遗骨陈列三个部分。广场陈列有记录大屠杀时间的十字架形标志碑、刻着遇难者名字的“哭墙”、记载大屠杀史实的浮雕、大型石雕母亲像、“万人坑”遗址等
</p>
<h2>2.牛首山世凹桃源景区</h2>
<p>
世凹桃源位于南京江宁谷里周村社区世凹村，坐落在牛首山西南麓。说起世凹村，就不得不提岳飞和牛首山，世凹因前者得名，因后者获桃源美誉。世凹村原本只是一个小村落，八百多年前，岳飞抗金在此屯兵，留下了大世凹之名。
</p>
<h2>3.南京夫子庙</h2>
<p>
南京夫子庙儒学文化中轴线坐落于古都南京老城区秦淮区，是国家5A级旅游景区夫子庙—秦淮风光带上最为耀眼的一颗明珠。在南京自公元前472年越王勾践命大夫范蠡筑越城起，近2500年的建城史上，南京夫子庙的孔庙和学宫扮演过无可替代的角色，起着举足轻重的作用
</p>
</body>
</html>
7.有序列表 ol li
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="...">
<title>Document</title>
</head>
<body bgcolor="#006400">
<span></span>
<ol>
<li>周杰伦-晴天</li>
<li>李荣浩-麻雀</li>
<li>海伦《游山恋》</li>
<li>周杰伦-告白气球</li>
</ol>
<ol type="A">
<li>周杰伦-晴天</li>
<li>李荣浩-麻雀</li>
<li>海伦《游山恋》</li>
<li>周杰伦-告白气球</li>
</ol>
<ol type="a">
<li>周杰伦-晴天</li>
<li>李荣浩-麻雀</li>
<li>海伦《游山恋》</li>
<li>周杰伦-告白气球</li>
</ol>
<ol type="I">
<li>周杰伦-晴天</li>
<li>李荣浩-麻雀</li>
<li>海伦《游山恋》</li>
<li>周杰伦-告白气球</li>
</ol>
<ol type="i">
<li>周杰伦-晴天</li>
<li>李荣浩-麻雀</li>
<li>海伦《游山恋》</li>
<li>周杰伦-告白气球</li>
</ol>
</body>
</html>
8.无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>猪肉</li>
<li>粉条</li>
<li>小鸡</li>
<li>蘑菇</li>
<li>地瓜</li>
</ul>
<ul type="circle">
<li>猪肉</li>
<li>粉条</li>
<li>小鸡</li>
<li>蘑菇</li>
<li>地瓜</li>
</ul>
<ul type="square">
<li>猪肉</li>
<li>粉条</li>
<li>小鸡</li>
<li>蘑菇</li>
<li>地瓜</li>
</ul>
</body>
</html>
9.自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=d, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<dl>
<dt>鲁迅</dt>
<dd>原名周樟寿，后改名周树人，字豫山</dd>
<dd>著名文学家、思想家、革命家、民主战士</dd>
<dt>周作人</dt>
<dd>原名周櫆寿，又名周奎绶，后改名周作人</dd>
<dt>胡适</dt>
<dd>曾用名嗣穈，字希疆，后改名适，字适之</dd>
</dl>
<dl>
<dt>水果</dt>
<dd>香蕉</dd>
<dd>苹果</dd>
<dt>蔬菜</dt>
<dd>青椒</dd>
<dd>黄瓜</dd>
</dl>
<hr>
<dl>
<dt>浙江省</dt>
<dd>杭州市</dd>
<dd>宁波市</dd>
<dt>江苏省</dt>
<dd>南京市</dd>
<dd>苏州市</dd>
</dl>
</body>
</html>
10.表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>什么是表格</h2>
<table border="1">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
<table border="1">
<caption>表格的标题</caption>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
</table>
<hr>
<h2>th表格标题标签</h2>
<table border="1">
<tr>
<th>标题1</th>
<th>标题2</th>
</tr>
<tr>
<td>A1</td>
<td>A2</td>
</tr>
</table>
<hr>
<h2>表格行分组标签</h2>
<table border="1">
<thead>
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
</thead>
<tbody>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
<td>B4</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</tfoot>
</table>
<hr>
<h2>表格的列跨度案例</h2>
<table border="1" cellspacing="0">
<tr>
<td colspan="2">A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td colspan="3">B2</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
<td>C4</td>
</tr>
</table>
<hr>
<h2>表格的行跨度案例</h2>
<table border="1" cellspacing="0">
<tr>
<td rowspan="2">A1</td>
<td>A2</td>
<td>A3</td>
<td>A4</td>
</tr>
<tr>
<td>B2</td>
<td>B3</td>
<td rowspan="2">B4</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>
</table>
</body>
</html>
11.语义标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--1. span标签-->
<p>
<span>姓名：</span><span>张三</span>
</p>
<!--2. b、u、i标签-->
<p>
<b>该努力还是要努力，进步一点点也是进步</b>
</p>
<p>
<u>该努力还是要努力，进步一点点也是进步</u>
</p>
<p>
<i>该努力还是要努力，进步一点点也是进步</i>
</p>
<!--3. strong、em、mark标签-->
<p>该<strong>努力</strong>还是要<em>努力</em>，进步<mark>一点点</mark>也是进步</p>
<!--4. figure、figcaption标签-->
<p>
<figure>
<figcaption>西湖美景-断桥</figcaption>
<img src="images/duanqiao.jpg".jpg" width="300">
</figure>
</p>
</body>
</html>
12.图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</p>
<h1>西湖美景</h1>
<p>
<img src="images/hehua.jpg" alt="西湖荷花">
</p>
<p>
<img src="images/hehua.jpg" width="100">
</p>
<p>
<img src="images/hehua.jpg" width="100px">
</p>
<p>
<img src="images/duanqiao.jpg" width="100px">
</p>
<p>
<img src="images/hehua.jpg">
</p>
<p>
<img src="../hourse.jpg">
</p>
<p>
<img src="https://www.baidu.com/img/
PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="100">
</p>
</body>
</html>
13.超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接学习</title>
</head>
<body>
<h2>1. 超级超链接</h2>
<p>
<a href="test.html">到另外一个网页</a>
</p>
<h2>2. a标签的href属性</h2>
<p>
<a href="login/1.html">到网页1</a>
</p>
<p>
<a href="../login/2.html">到网页2</a>
</p>
<p>
<a href="http://www.songqinnet.com">到松勤网</a>
</p>
<h2>3. a标签的title属性</h2>
<p>
<a href="test.html" title="悬停时显示的内容">到另外一个网页</a>
</p>
<h2>4. a标签的target属性</h2>
<p>
<a href="test.html" target="blank">到另外一个网页（新窗口打开）</a>
</p>
<h2>5. 图片链接</h2>
<p>
<a href="test.html">
<img src="images/hehua.jpg" width="100">
</a>
</p>
<h2>6. 下载链接</h2>
<p>
<a href="test.rar">下载</a>
</p>
<h2>7. 邮件链接</h2>
<p>
<a href="mailto:abcd@163.com">发送邮件</a>
</p>
<h2>8. 电话链接</h2>
<p>
<a href="tel:4008208888">拨打电话</a>
</p>
</body>
</html>
14.表单创建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="login.do" method="POST">
</form>
</body>
</html>
15.表单的基本控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="login.do" method="POST">
<p>请输入用户名：<input type="text"></p>
<p>请输入用户名：<input type="text" value="admin"></p>
<p>请输入用户名：<input type="text" placeholder="请输入用户名"></p>
<p>请输入用户名：<input type="text" value="admin" disabled></p>
<p>请输入用户名：<input type="text" value="admin" name="username"></p>
<p>请设置密码：<input type="password"></p>
<p>请选择性别：
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
</p>
<p>请选择性别：
<input type="radio" name="sex2" value="1" checked>男
<input type="radio" name="sex2" value="2">女
</p>
<p>
<input type="radio" name="sex4" id="boy" value="1">
<label for="boy">男</label>
<input type="radio" name="sex4" id="girl" value="2">
<label for="girl">女</label>
</p>
<p>
<label>
<input type="radio" name="sex5" value="1">男
</label>
<label>
<input type="radio" name="sex5" value="2">女
</label>
</p>
<p>请勾选你的爱好:
<input type="checkbox" name="hobby" checked>唱歌
<input type="checkbox" name="hobby">游泳
</p>
<p>
<select name="bank">
<option value="1">中国银行</option>
<option value="2">工商银行</option>
<option value="3">建设银行</option>
<option value="4">农业银行</option>
</select>
</p>
<p>
<textarea name="content" cols="30" rows="5"></textarea>
</p>
<p>
<input type="button" value="按钮">
</p>
<p>
<input type="submit">
</p>
<p>
<input type="reset">
</p>
</form>
</body>
</html>
16.datalist控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" list="pro-list">
<datalist id="pro-list">
<option value="北京市"></option>
<option value="上海市"></option>
<option value="广东省"></option>
<option value="浙江省"></option>
<option value="江苏省"></option>
</datalist>
</body>
</html>
17.音频视频标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>音频标签</h2>
<p>
<audio src="media/test.mp3" controls>
对不起，您的浏览器不支持audio标签，请升级浏览器！
</audio>
</p>
<p>
<audio src="media/test.mp3" controls autoplay>
对不起，您的浏览器不支持audio标签，请升级浏览器！
</audio>
</p>
<p>
<audio src="media/test.mp3" controls loop >
对不起，您的浏览器不支持audio标签，请升级浏览器！
</audio>
</p>
<p>
<audio src="media/test.mp3" controls muted >
对不起，您的浏览器不支持audio标签，请升级浏览器！
</audio>
</p>
<h2>视频标签</h2>
<p>
<video src="media/test.ogg" controls autoplay width="250" height="200">
对不起，您的浏览器不支持video标签，请升级浏览器！
</video>
</p>
</body>
</html>
登录-纯HTML：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>登录</title>
</head>
<body>
<div>
<div></div>
<form action="" method="post">
<ul>
<li>
<span>
<input name="" type="text" class="ext" />
</span>
</li>
<li>
<span>
<input name="" type="password" class="ext" />
</span>
</li>
<li>
<span>
<input name="" type="text" class="ext" />
<b><img src="images/img01.jpg" /></b>
</span>
</li>
<li>
<input name="" type="submit" class="btn" value=" " />
</li>
<li>
<a href="#">忘记密码</a>
</li>
</ul>
</form>
</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
