一、web前端开发概述
1. web是internet上最受欢迎的一种多媒体信息服务系统，整个系统包括web服务器、浏览器、通信协议。
2. UI（user interface 用户界面）
3. URL（uniform resource locator 统一资源定位符）
基本URL包括模式（协议）、服务器名称（IP地址）、路径和文件名。
协议://用户名：密码@子域名.域名.顶级域名：端口号/目录/文件名.文件后缀？参数=值#标志
4. www 是环球信息网的缩写 www w3 全称world wide web 中文名 “万维网”，是一个有许多相互链接的超文本组成的系统，通过互联网访问。每一个有用的事物成为一个“资源”，并有一个全局URL标识；这些资源通过超文本传输协议（hypertext transform protocol）传送给用户，后者通过单机链接来获取资源。
5. web标准
网页部分标准通过三部分来描述：结构（structure）、表现（presentation）和行为（behavior）。
HTML用来决定网页的结构和内容（内容）
CSS用来设计网页的表现形式（样式）
JavaScript用来控制网页的行为（特殊行为）
6. HTML是超文本标签语言（hypertext markup language）是网络的骨骼，是为“网页创建和其他可在网页浏览器上可以看到的信息”所设计的一种置标语言。
CSS（cascading style sheets，层叠样式表）是一种用来表现HTML或XML（标准通用标签语言的一个子集）等文件样式的计算机语言。CSS可以创建在HTML页面之外，如需设计新网站，而内容结构保持不变，就可在HTML不发生变动的前提下，为网页提供一个全新的外观。
JavaScript是世界上最流行的脚本语言之一。大多数情况下，用于增强访问者的体验。
二、HTML5基础
<!DOCTYPE html> <!--声明文档类型，此标签告知浏览器文档使用哪种HTML或者XHTML规范-->
<html > <!--文档的开始点和结束点（可以省略）-->
<head lang="en"> <!--用于定义文档的头部，是所有头部元素的容器 head标签，可以引用脚本、指示浏览器在哪里找到样式表、提供元信息作用于整篇文档，标签内的内容一般不直接显示在网页上-->
<meta charset="UTF-8"> <!--标签不允许交叉出现-->
<title>Title</title> <!--通用的编码模式-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--外部样式 href(hypertext reference)超链接目标的URL
rel（relationship)定义连接的文件和HTML文档之间的关系-->
<style type="text/css">
p{
color: #ff48b6;
}
</style>
<!--内部样式-->
</head>
<body bgcolor="#fff8dc">
<!--bgcolor背景颜色 background为背景图片-->
极客学院
hello
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4 align="justify" >标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--align对齐方式-->
<hr>
<p align="center">该标签定义段落 重新开始一行，并与上一段之间有一个空行</p>
hello
<a href="http://www.baidu.com" target="_blank">百度</a>
<!--定义链接 href 为属性 属性能够赋予标签含义和语境，提供有关HTML元素的更多信息-->
<!--target规定在何处打开连接-->
<img src="picture/food.jpg" alt="美食" width="30%" height="40%">
<!--尺寸是浏览器宽度的30%，高度的40% -->
<p><a> <big>this</big> <b>is</b> <i>my</i> <u>web</u> </a></p>
<!--标签的嵌套-->
hello world br与p标签的区别，特别是行间距 <br/>
hello world
<!--1、元素内容是开始标签与结束标签之间的内容
2、空元素在开始标签中进行关闭
3、大多数HTML元素拥有属性-->
<p>使用图片来做链接</p>
<img src="D:\123.png">
<a href="http://www.baidu.com" target="_blank">
<img border="0" src="D:\11111111111111文档\图\火影\Screenshot_2017-09-26-00-11-37-65.png">
</a>
<a href="https://www.douyu.com/directory/myFollow" style="color: blueviolet">内联样式表</a>
</body>
</html>基础
| 标签 | 描述 |
|---|---|
| <!DOCTYPE> | 定义文档类型。 |
| <html> | 定义 HTML 文档。 |
| <title> | 定义文档的标题。 |
| <body> | 定义文档的主体。 |
| <h1> to <h6> | 定义 HTML 标题。 |
| <p> | 定义段落。 |
| <br> | 定义简单的折行。 |
| <hr> | 定义水平线。 |
| <!--...--> | 定义注释。 |
表单
| 标签 | 描述 |
|---|---|
| <form> | 定义供用户输入的 HTML 表单。 |
| <input> | 定义输入控件。 |
| <textarea> | 定义多行的文本输入控件。 |
| <button> | 定义按钮。 |
| <select> | 定义选择列表（下拉列表）。 |
| <optgroup> | 定义选择列表中相关选项的组合。 |
| <option> | 定义选择列表中的选项。 |
| <label> | 定义 input 元素的标注。 |
| <fieldset> | 定义围绕表单中元素的边框。 |
| <legend> | 定义 fieldset 元素的标题。 |
| <isindex> | 不赞成使用。定义与文档相关的可搜索索引。 |
| <datalist> | 定义下拉列表。 |
| <keygen> | 定义生成密钥。 |
| <output> | 定义输出的一些类型。 |
HTML元素
1、元素是指从开始标签到结束标签的所有代码，标签可以拥有属性为元素提供更多的信息。
2、属性以键/值对的形式出现
3、通用属性: class 规定元素的类名、ID 规定元素的唯一id、style 规定元素的样式、title 规定元素的额外信息。
标签
文本控制标签
标题标签——<hi></hi>
段落标签——<p></p>
文本格式化标签
换行标签——<br>
水平线标签——<hr>
字形标签——<b></b> <u></u> <i></i>
<div></div> 可以用来排版大块的HTML段落，最重要的功能是 结合CSS设计页面布局，可以换行，可以包含<div><p>标签。
<span> 可以用来组合文档中的行元素，不换行，不能包含<div><p>标签。
图片标签
<img src="图片路径">
图片路径——1、绝对路径：文件硬盘上真的存在的路径，上传到web服务器上可能找不到。
2、相对路径：相对于本文档的目标文件位置。
超链接标签
<a href=URL>网页元素<a>
属性：href 规定链接指向目标的URL
target 规定在何处打开链接文档 _top：在整个窗口中打开
_blank：在新的浏览器窗口中打开
_self：默认值 在当前页面中打开
_parent：在父框架中打开被链文档
framename：在指定名称的框架中打开
rel 规定当前文档与被连接文档的关系
链接到同一页面的不同位置（如章节数过多）
<p><a href="#c5">查看第五章</a></p>
<h2><a name="c5">第五章</a></h2>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<p>表格</p>
<table border="5">
<!--带有标题的表格-->
<caption>表格</caption>
<!--表格的表头-->
<tr>
<th>单元</th>
<th>单元</th>
<th>单元</th>
</tr>
<tr>
<td>单元格1</td>
<td></td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</table>
<!--表格内的标签-->
<table border="5">
<tr>
<td>表格1</td>
<td>表格2</td>
</tr>
<tr>
<td>
<url>
<li>苹果</li>
<li>菠萝</li>
<li>香蕉</li>
</url>
</td>
<td>表格2</td>
</tr>
</table>
<br/>
<!--单元格边距、单元格间距、表格内的背景颜色和图像-->
<table border="5" cellpadding="10" cellspacing="10" bgcolor="#fff8dc" background="123.png">
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格4</td>
<td>单元格5</td>
<td>单元格6</td>
</tr>
</table>
</body>
</html>列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<UL >
<li type="square">ios</li>
<li type="disc">android</li>
<li type="circle">html</li>
</UL>
<ol start="5">
<li>asnj</li>
<li>smll</li>
<li>lpsj</li>
</ol>
<ul>
<li>宠物</li>
<ul>
<li>猫</li>
<li>狗</li>
</ul>
<li>人类</li>
<ul>
<li>中国人</li>
<li>英国人</li>
</ul>
<li></li>
<li></li>
</ul>
<dl>
<dt>hello world</dt>
<dd>asiadiasdiadiahdihd</dd>
<dt>hello world</dt>
<dd>sjaijidjaowdj</dd>
<dt>hello world</dt>
<dd>jsojawodjoawdjojd</dd>
</dl>
</body>
</html>块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块元素</title>
<link href="style2.css " type="text/css" rel="stylesheet ">
<style type="text/css">
span{
color: coral;
}
</style>
</head>
<body>
<!--块-->
<p>大家好!</p>
<h1>hello</h1>
<!--内联元素-->
<b>这是一个加重标签</b>
<a>这是一个超链接标签</a>
<!--div-->
<div id="div1">hello <p>world</p></div>
<!--承载任何类型的元素-->
<!--span-->
<div id="div2">
<p><span>咱这是一个测试span</span>效果是什么样子</p>
</div>
<!--文本类型-->
</body>
</html>div布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div布局</title>
<style type="text/css">
body{
margin: 0px;
}
div#buju{
width: 100%;
height:950px;
background-color: cornsilk;
}
div#toubu{
width: 100%;
height: 10%;
background-color: blueviolet;
}
div#neirongcaidan{
width: 30%;
height: 80%;
background-color: blue;
float:left;
}
div#neirongzhuti{
width: 70%;
height: 80%;
background-color: coral;
float: left;
}
div#dibu{
width: 100%;
height: 10%;
background-color: cornflowerblue;
clear: both;
}
</style>
</head>
<body>
<div id="buju">
<div id="toubu">头部</div>
<div id="neirongcaidan">内容菜单</div>
<div id="neirongzhuti">内容主体</div>
<div id="dibu">底部</div>
</div>
</body>
</html>table布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table布局</title>
</head>
<body marginheight="0px" marginwidth="0px">
<table width="100%" height="950px" style="background-color: cornflowerblue">
<tr>
<td colspan="3" width="100%" height="10%" style="background-color: cornsilk">这是头部</td>
</tr>
<tr>
<td width="30%" height="80%" style="background-color: coral">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</td>
<td width="40%" height="80%"style="background-color: darksalmon">右菜单</td>
<td width="30%" height="80%"style="background-color: aliceblue">右菜单</td>
</tr>
<tr>
<td colspan="2" width="100%" height="10%" style="background-color: aquamarine"></td>
</tr>
</table>
</body>
</html>表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form>
用户名：
<input type="text">
<br/>
密码:
<input type="text">
<br/>
你喜欢的水果有：
<input type="checkbox">苹果
<input type="checkbox">香蕉
<input type="checkbox">栗子
<br/>
<input type="radio" name="1">1
<input type="radio" name="1">2
<input type="radio" name="1">3
<br/>
<input type="button" value="按钮">
<input type="submit">
<br/>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<br/>
<textarea cols="30" rows="30">请在此填写个人信息</textarea>
</form>
</body>
</html>