前端基础
1.web标准（由万维网制定的网页开发规范）
a.结构标准：html（决定网页上的内容）
b.表现标准：css（决定网页上内容的布局和样式）
c.行为标准：javascript（简称js决定网页动态变化的内容）
2.什么是html？
html是超文本标记语言（类似于markdown语法）
html是通过不同的标记（标签）来决定网页上的不同内容
3.html语法
1）.html大小写不敏感
2）.标签（标记）:
a.语法
双标签：<标签名 属性名1=值1 属性名2=值2..>标签内容</标签名> 成对出现
单标签：<标签名 属性名1=值1 属性名2=值2../>或者<标签名 属性名1=值1 属性名2=值2..>
b.说明
标签名：必须是html提供的标签名，不能随便写
属性：以属性名=值的形式成对出现的，多对之间用空格隔开，属性的顺序不影响效果，值必须放在双引号中
标签内容：只有双标签才有标签内容，标签内容可以是任何内容
<head>标签
<!-- head主要有已下标签
meta - 定义了html文档中的元数据（设置网页的基本设置）
title - 设置网页标题
style - 在HTML中提供css的标签
link - 导入图标或者css文件的标签
script - 导入js代码/文件的标签
base - url基本地址
-->
<!doctype html>
<html>
<head>
<!-- 设置网页中文本的编码方式 -->
<meta charset="utf-8">
<!-- 设置网页标题 -->
<title>head中的标签</title>
<!-- 设置网页标题图标
rel - 设置文件作用，stylesheet：样式表
icon - 设置图标
type -设置文件类型，文件类型/后缀名；text/css:文本/后缀是css
href - 设置文件路径；可以是绝对路径也可以是相对路径
-->
<link rel="icon" type="image/ico" href="img/aaa.ico"/>
</head>
<body>
</body>
</html>
<body>标签
1.文本标签
<!--
1.如果需要在网页中显示文字，一般不直接将文字写在body中，
而是根据文字的功能找到对应标签
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本标签</title>
</head>
<body>
<!-- 1.标题标签：h1 - h6 双标签-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<!-- 2.段落标签（p标签）
双标签，保证一个段落对应一个p标签
-->
<h3>江城子.密州出猎</h3>
<small> 作者:苏轼</small>
<p>老夫聊发少年狂，</p>
<p>左牵黄，右擎苍，</p>
<p>锦帽貂裘，千骑卷平冈。</p>
<!-- 4.文字效果相关标签
br标签（换行标签）
在html中直接空格、缩进是无效的
 ； - 一个像素
&emsp； - 一个空格
<b></b> - 加粗
<strong></strong> - 加粗（有强调的意义）
<i></i> - 倾斜
<em></em> - 倾斜（有强调意义）
单标签
-->
<br>
<p><i>为</i>报倾城随太守，亲<b>射虎</b>，看<strong>孙郎</strong>。</p>
<p><em>酒</em>酣胸胆尚开张。</p>
<p>鬓微霜，又何妨！</p>
<p>持节云中，何日遣冯唐？</p>
<p>会挽雕弓如满月，西北望，射天狼。</p>
<br>
<!-- 3.font标签
双标签 - 一行显示多个
-->
<font> 性别</font><br>
<font> 男</font><br>
<font> 女</font>
</body>
</html>
2.列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表标签</title>
</head>
<body>
<!-- 1.无序列表（ul）
ul - 代表列表容器，是一个整体
li - 列表中的元素
-->
<ul>
<li>PYTHON</li>
<li>JAVA</li>
<li>HTML5</li>
<li>UI</li>
</ul>
<!-- 2.有序列表（ol）
ol - 代表列表容器，是一个整体
li标签 - 列表中的元素
-->
<ol>
<li>挑选小龙虾</li>
<li>清洗小龙虾</li>
<li>烹饪小龙虾</li>
</ol>
<!-- 3.自定义列表（dl）
dl - 代表列表容器，是一个整体
dt - 小分类标签
dd - 小分类下的元素
-->
<dl>
<dt>四川</dt>
<dd>成都</dd>
<dd>南充</dd>
<dd>眉山</dd>
<dt>辽宁</dt>
<dd>大连</dd>
<dd>沈阳</dd>
<dd>盘锦</dd>
</dl>
</body>
</html>
3.图片和超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片和超链接</title>
</head>
<body>
<!-- 1.图片标签（img）
单标签
默认情况下一行可以显示多张图片
src - 设置图片路径，可以是本地路径也可以是网络地址
title - 设置图片标题，当鼠标停留在图片上是才会显示查出来
alt - 图片加载失败的时候的提示信息
-->
<a href="#p1" id="top">第一组</a>
<a href="#p2">第二组</a>
<a href="#p3">第三组</a>
<a href="#p4">第四组</a>
<br>
<p id="p1">第一组图片</p>
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<br>
<!-- 2.超链接（a）
双标签
a.href - 跳转的目的地
网站 - 点击链接直接加载网址对应的网页
本地html文件地址 - 加载本地html文件对应的网页
# - 刷新
选择器 - 让当前页面滚动到指定位置
b.target - 跳转方式
_self - 在当前页面加载新的网页（默认）
_blank - 在新的页面中加载新的网页
-->
<!-- 加载网页 -->
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<a href="http://www.baidu.com"><img src="img/aaa.ico" ></a>
<br>
<!-- 加载本地html文件 -->
<a href="03-列表标签.html">城市列表</a>
<br>
<!-- 刷新当前网页 -->
<a href="#">刷新</a>
<p id="p2">第二组图片</p>
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<br>
<p id="p3">第三组图片</p>
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<br>
<p id="p4">第四组图片</p>
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<img src="img/luffy.jpg" title="路飞">
<br>
<!-- 页面内的跳转 -->
<a href="#top">回到顶部</a>
<p style="color: darkgrey;"><img src="img/aaa.ico"">依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="https://about.jd.com/privacy/" target="_blank" style="text-decoration: none;">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</p>
</body>
</html>
4.表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
<style type="text/css">
tr{
background-color: aliceblue;
}
td{
text-align: center;
}
</style>
</head>
<body>
<!-- 表格
1.table - 代表表格整体
border - 设置单元格边框的宽度
bordercolor - 设置边框的颜色
cellspacing - 单元格与单元格之间的间距以及单元格和表格边框的间距
cellpadding - 设置单元格中的内容到单元格单上下左右之间的间距
width - 设置整个表格的宽度
height - 设置整个表格的高度
align - center（居中）、left（左对齐）、right(右对齐)；让整个表格在他的父标签居中/左/右
2.tr - 代表一行
bgcolor - 设置一行的背景色
height - 设置一行的高度
align- 让一行中把所有的单元格的内容在单元格中居中/左/右
3.td - 代表一个单元格
属性
bgcolor - 设置整个表格的背景颜色（包含单元格的部分）
align - 让当前单元格的内容在单元格中居中/左/右
width - 设置td所在的列的宽度
补充：细线表格
a.设置整个table的背景颜色是边框线的颜色
b.设置每个单元格的颜色和边框的颜色不一样
c.设置单元格与单元格的间距为（cellspacing）1
-->
<table cellspacing="1px" cellpadding="" bgcolor="black" align="center">
<tr height="20">
<th width="120">姓名</th>
<th width="120">成绩</th>
<th width="140">学员评价</th>
</tr>
<tr height="40">
<td>张三</td>
<td>50</td>
<td>留级</td>
</tr>
<tr height="60">
<td>李四</td>
<td>92</td>
<td>不留级</td>
</tr>
<tr height="80">
<td>王五</td>
<td>52</td>
<td>留级</td>
</tr>
</table>
</body>
</html>
5.复杂表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- colspan - 列合并
rowspan - 行合并 -->
表一
<table border="1" cellspacing="0" cellpadding="" width="600" height="400">
<tr>
<td rowspan="2">Data</td>
<td>Data</td>
<td>Data</td>
<td rowspan="2">Data</td>
</tr>
<tr>
<td colspan="2" rowspan="2">Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td colspan="2">Data</td>
<td>Data</td>
<td rowspan="2">Data</td>
</tr>
<tr>
<td colspan="2">Data</td>
<td>Data</td>
</tr>
</table>
<br>
表二
<table border="1" cellspacing="0" cellpadding="50" width="400" width="300">
<tr>
<td>1</td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2">2</td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2">4</td>
<td colspan="2" rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
</tr>
<tr>
<td>6</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2">7</td>
<td></td>
<td></td>
<td></td>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
</tr>
</table>
</body>
</html>
