买的课程学习
Web 前端标准
web前端技术指的不是某一项技术，而是一系列技术的集合，主要包括：
html -- 结构标准：负责网页结构的搭建
css -- 样式标准/表现标准：负责网页的美化工作
js -- 行为标准：负责网页的行为动作
行业词条
1、internet --> 互联网
2、www --> 万维网(资料空间)World Wide Web 万维网，简称WWW或3W
3、URL --> 统一资源定位器(网络地址)
4、HTTP --> 超文本传输协议
5、W3C --> 万维网联盟(它是一个组织不是某一个公司)
6、网站 --> 多个页面的集合(首页，内容页，列表页)
7、网页 --> 网页文件就是后缀名以.html或者.htm结尾的文件。文字，图片，超链接
8、浏览器 --> 观看网页最终效果的平台。
浏览器
五大浏览器厂商
ie
谷歌
火狐
苹果
欧朋
需要安装的浏览器：
谷歌
火狐
谷歌和苹果的内核一样
一个简单的html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
</body>
</html>
1、<!DOCTYPE html> 描写当前文件版本信息，如果没有详细说明4.0还是x1.0，那么默认是html5版本
2、<html>html文件
3、<head>网页的头部
4、<meta charset="UTF-8"> utf-8是国际编码的意思，如果不写，或者写成其它都会有问题
5、<title>此处内容是网页的标题</title>
6、<body>我们自己写的代码都放在这里</body>
注意：html文档不能正常识别回车和换行，只能使用特定代码来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>你好，世界！</h1>
<h2>br标签代表换行</h2> <b>我是b，代表加粗</b><br>
<strong>strong是加粗，可以代表强调语义</strong><br>
<u>我是u，代表下划线</u><br>
<i>我是i，代表倾斜</i><br>
<em>我是em，也是倾斜，多了强调的语义</em><br>
<s>我是s，代表删除线，这种写法渐渐被淘汰</s><br>
<del>我是del，也代表删除线，这种写法是主流</del>
</body>
</html>
看一下img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>h1是一级标题</h1>
<h2>h2是二级标题</h2>
<h3>h3是三级标题。。。</h3>
<h2>br标签代表换行</h2> <b>我是b，代表加粗</b><br>
<strong>strong是加粗，可以代表强调语义</strong><br>
<u>我是u，代表下划线</u><br>
<i>我是i，代表倾斜</i><br>
<em>我是em，也是倾斜，多了强调的语义</em><br>
<s>我是s，代表删除线，这种写法渐渐被淘汰</s><br>
<del>我是del，也代表删除线，这种写法是主流</del> <h1>img 是图片标签--正常的图宽790，高422</h1>
<img src="10.png"/><br>
<h1>img 是图片标签--设置了宽高的图宽1000，高550</h1>
<img src="10.png" width="1000" height="550"/><br>
<h1>img 是图片标签--等比例缩放，宽高设置其中一个就可以了，宽500</h1>
<img src="10.png" width="500"><br>
<h1>有提示文本的 --- 鼠标悬停的提示文字</h1>
<img src="10.png" title="我是鼠标悬停时显示的文字"><br>
<h1>图片没有加载出来的时候才出现的文字</h1>
<img src="11.png" alt="我是提醒文字"><br>
<h1>可以让网页阅读器把alt中的文字念出来</h1>
<img src="11.png" alt="描述这种图的文字（这是一个logo图片）"><br>
</body>
</html>
超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<h1>h1是一级标题</h1>
<h2>h2是二级标题</h2>
<h3>h3是三级标题。。。</h3>
<h2>br标签代表换行</h2> <b>我是b，代表加粗</b><br>
<strong>strong是加粗，可以代表强调语义</strong><br>
<u>我是u，代表下划线</u><br>
<i>我是i，代表倾斜</i><br>
<em>我是em，也是倾斜，多了强调的语义</em><br>
<s>我是s，代表删除线，这种写法渐渐被淘汰</s><br>
<del>我是del，也代表删除线，这种写法是主流</del> <!--下面是img标签的相关方法-->
<h1>img 是图片标签--正常的图宽790，高422</h1>
<img src="10.png"/><br>
<h1>img 是图片标签--设置了宽高的图宽1000，高550</h1>
<img src="10.png" width="1000" height="550"/><br>
<h1>img 是图片标签--等比例缩放，宽高设置其中一个就可以了，宽500</h1>
<img src="10.png" width="500"><br>
<h1>有提示文本的 --- 鼠标悬停的提示文字</h1>
<img src="10.png" title="我是鼠标悬停时显示的文字"><br>
<h1>图片没有加载出来的时候才出现的文字</h1>
<img src="11.png" alt="我是提醒文字"><br>
<h1>可以让网页阅读器把alt中的文字念出来</h1>
<img src="11.png" alt="描述这种图的文字（这是一个logo图片）"><br> <!--下面是超链接-->
<h1>跳转到百度</h1>
<a href="http://www.baidu.com">百度一下</a><br>
<!--alt+? 代码提示功能-->
<a href="http://www.taobao.com">我想跳转到淘宝</a><br>
<!--target="_blank"可以设置新窗口打开-->
<a href="http://www.baidu.com" target="_blank">新窗口打开</a><br>
<p>p是段落</p>
<p id="haha">p是段落11111111</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<!-- 暂时不知道些什么要用#代表空链接-->
<a href="###">我还不知道点击之后跳转到哪里###</a><br>
<a href="javascript:;">我还不知道点击之后跳转到哪里javascript:;</a><br>
<a href="javascript:void(0)">我还不知道点击之后跳转到哪里javascript:;</a><br>
<!--以上三种写法都可以，不要提bug，只有写1个或2个#号或不写才提bug--> <!--锚点链接-->
<a href="#haha">我想跳转到某位置</a><br> </body>
</html>
form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
</head>
<body>
<!--所有用户输入的内容都要放在form标签中-->
<!--Action 代表数据给那个后台程序-->
<!--Method 代表传输数据的方法1.post(加密) 2.get(不加密)-->
<form action="" method="post">
<!-- input代表文本框标签 type是类型的意思-->
<!-- 如果设置text 代表最标准的输入框-->
<!-- name 代表此输入框的名字-->
<!-- id 代表输入框的id编号-->
<!-- value 代表默认文字-->
<!-- placeholder 属于html5最新的属性，它不兼容ie低版本浏览器(6-8)
此效果虽然ie低版本不支持，但不会造成页面的混乱，我们就认为此属性没有问题
以渐进增强（随着浏览器版本的升高，用户体验越来越好）、优雅降级（保证低版本浏览器不混乱）
-->
<!--昵称：<input type="text" name="" id="" value="hahah">-->
昵称：<input type="text" name="" id="" placeholder="hahah"><br>
<!-- input的type类型如果是password 代表密码框，用户输入文字会加密-->
密码：<input type="password">
</form> <h1>h1是一级标题</h1>
<h2>h2是二级标题</h2>
<h3>h3是三级标题。。。</h3>
<h2>br标签代表换行</h2> <b>我是b，代表加粗</b><br>
<strong>strong是加粗，可以代表强调语义</strong><br>
<u>我是u，代表下划线</u><br>
<i>我是i，代表倾斜</i><br>
<em>我是em，也是倾斜，多了强调的语义</em><br>
<s>我是s，代表删除线，这种写法渐渐被淘汰</s><br>
<del>我是del，也代表删除线，这种写法是主流</del> <!--下面是img标签的相关方法-->
<h1>img 是图片标签--正常的图宽790，高422</h1>
<img src="10.png"/><br>
<h1>img 是图片标签--设置了宽高的图宽1000，高550</h1>
<img src="10.png" width="1000" height="550"/><br>
<h1>img 是图片标签--等比例缩放，宽高设置其中一个就可以了，宽500</h1>
<img src="10.png" width="500"><br>
<h1>有提示文本的 --- 鼠标悬停的提示文字</h1>
<img src="10.png" title="我是鼠标悬停时显示的文字"><br>
<h1>图片没有加载出来的时候才出现的文字</h1>
<img src="11.png" alt="我是提醒文字"><br>
<h1>可以让网页阅读器把alt中的文字念出来</h1>
<img src="11.png" alt="描述这种图的文字（这是一个logo图片）"><br> <!--下面是超链接-->
<h1>跳转到百度</h1>
<a href="http://www.baidu.com">百度一下</a><br>
<!--alt+? 代码提示功能-->
<a href="http://www.taobao.com">我想跳转到淘宝</a><br>
<!--target="_blank"可以设置新窗口打开-->
<a href="http://www.baidu.com" target="_blank">新窗口打开</a><br>
<p>p是段落</p>
<p id="haha">p是段落11111111</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<p>p是段落</p>
<!-- 暂时不知道些什么要用#代表空链接-->
<a href="###">我还不知道点击之后跳转到哪里###</a><br>
<a href="javascript:;">我还不知道点击之后跳转到哪里javascript:;</a><br>
<a href="javascript:void(0)">我还不知道点击之后跳转到哪里javascript:;</a><br>
<!--以上三种写法都可以，不要提bug，只有写1个或2个#号或不写才提bug--> <!--锚点链接-->
<a href="#haha">我想跳转到某位置</a><br> </body>
</html>