HTML 和 CSS基本使用
HTML:超文本标记语言---定义页面结构
CSS：层叠样式表--页面显示的样式（BootStrap）
JS:JavaScript--界面交互(动态交互) JQuery Ajax Json
LayUI、EasyUI
Vue、React、Angular
HTML
基本标签
br: (line) break：换行
hr: horizontal rule
<body>
<!-- 标题headline -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3 id="h3">三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- p=paragraph 段落-->
<p>王老师是Java讲师，朱老师是Java讲师，高老师是Java讲师</p>
<p>鞠老师是H5讲师，李老师是H5讲师</p>
<!--img 图片
alt:替代文字，图片没有加载出来显示的文字
width:宽
height:高
-->
<img src="../images/bd_logo11.png" alt="加载失败"></img>
<img src="../images/bd_logo1.png"/>
<img src="../images/bd_logo1.png"/>
<img src="../images/bd_logo1.png" width="100px" height="100px"/>
<!-- br 换行 -->
<br />
<!-- a 超链接
target="_blank" 在新窗口打开
title="悬停文字"
-->
<a href="http://www.baidu.com" title="悬停文字" target="_blank">超链接文字</a>
<!-- 页面内的锚点使用id，使用a标签可以跳转到指定锚点 -->
<a href="#h3">跳转到h3标题</a>
<a href="#">跳转到网页的开始</a>
<!-- hr -->
<hr />
<!--有序列表 ol=ordered list -->
<ol>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ol>
<!--无序列表 ul=unordered list -->
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ul>
<!-- 无序列表和有序列表可以嵌套 -->
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
<li>
山东
<ol>
<li>青岛</li>
<li>济南</li>
<li>烟台</li>
</ol>
</li>
</ul>
</body>
列表：
li=list item
分类：
- 有序列表：ol=ordered list
- 无序列表：ul=unordered list
用来表示一个列表语义，每个li之间是不分先后。
注意：无序列表的作用 不是为了给文字增加小圆点，而是要表达“无序列表”的语义。
有序列表 ol
ol=ordered list
- 北京
- 上海
- 深圳
- 广州
<ol>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ol>
无序列表 ul
ul=unordered list
- 北京
- 上海
- 深圳
- 广州
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ul>
嵌套
无序列表和有序列表可以嵌套
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
<li>
山东
<ol>
<li>青岛</li>
<li>济南</li>
<li>烟台</li>
</ol>
</li>
</ul>
封装元素
块级元素：单独成为一行。h、ul、ol、div
行内元素：不能独占一行。img、a、span、input
div
div division div里面所有的元素在div这个区域里面。
就是编程里面封装的思想。
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div align="center">
<div id="top" align="center">
<img src="../images/jd.jpg" />
</div>
<div id="center" style="color:red;width: 700px;">
京东（股票代码：JD），中国自营式电商企业，创始人刘强东担任京东集团董事局主席兼首席执行官 [1] 。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部等。2013年正式获得虚拟运营商牌照。
2014年5月在美国纳斯达克证券交易所正式挂牌上市。 2016年6月与沃尔玛达成深度战略合作，1号店并入京东。
2014年5月，京东集团在美国纳斯达克证券交易所正式挂牌上市 [2] 。2015年7月，京东凭借高成长性入选纳斯达克100指数 [3] 和纳斯达克100平均加权指数 [4] 。
2017年1月4日，中国银联宣布京东金融旗下支付公司正式成为银联收单成员机构。2017年4月25日，京东集团宣布正式组建京东物流子集团。2017年8月3日，2017年“中国互联网企业100强”榜单发布，京东排名第四位。 [5]
2018年3月15日，京东内部公告成立了“客户卓越体验部”，该部门将整体负责京东集团层面客户体验项目的推进。京东集团副总裁余睿出任该部门负责人。 [6] 2018年《财富》世界500强排行榜第181名。2018年7月24日，京东增资安联财险中国的方案获得了银保监会的批准。 [7-8]
<br />
<img src="../images/jd.jpg"/>
</div>
<div id="bottom" style="color:blue;width: 700px;">
Copyright © 2004 - 2018 京东JD.com 版权所有|消费者维权热线：4006067733经营证照|(京)网械平台备字(2018)第00003号
</div>
</div>
</body>
</html>
span
span功能类似于div，但是不能独占一行。
u(underline):下划线
i( italic) : 斜体
b (bold) : 粗体
<div>
<span><u>山东省</u><i>青岛市</i><span style="color: red;"><b>城阳区</b>春阳路大润发</span></span>
</div>
效果： 山东省青岛市城阳区春阳路大润发
空格折叠现象
普通的空格在html里如果连续出现多个会被当成一个空格，
如果想显示多个连续的空格就要使用特殊的字符
  Non-breaking Space
锄禾日当 午
汗滴禾下 土
谁知盘中 餐
粒粒皆辛 苦
<div>
锄禾日当 午<br/>
汗滴禾下 土<br/>
谁知盘中 餐<br/>
粒粒皆辛 苦<br/>
</div>
table
结构：
tr = table row
td = table data 单元格
th = table head
<!--border:边框 cellspacing:单元格间隙 -->
<table border="1" cellspacing="0" width="400">
<tr>
<th>讲师名称</th>
<th>所教班级</th>
</tr>
<tr>
<td>王老师</td>
<td>Java180701</td>
</tr>
<tr>
<td>朱老师</td>
<td>Java180702</td>
</tr>
<tr>
<td>高老师</td>
<td>Java180703</td>
</tr>
</table>
<table border="1" cellspacing="0" width="400">
<thead>
<tr>
<th>讲师名称</th>
<th>所教班级</th>
</tr>
</thead>
<tbody>
<tr>
<td>王老师</td>
<td>Java180701</td>
</tr>
<tr>
<td>朱老师</td>
<td>Java180702</td>
</tr>
<tr>
<td>高老师</td>
<td>Java180703</td>
</tr>
</tbody>
</table>
行跨越：
<!-- rowspan 行跨越 -->
<table border="1" cellspacing="0" width="400">
<tr>
<th>讲师名称</th>
<th>所教班级</th>
</tr>
<tr>
<td rowspan="2">王老师</td>
<td>Java180701</td>
</tr>
<tr>
<!--<td>朱老师</td>-->
<td>Java180702</td>
</tr>
<tr>
<td>高老师</td>
<td>Java180703</td>
</tr>
</table>
列跨越：
<!-- colspan 列跨越 -->
<table border="1" cellspacing="0" width="400">
<tr>
<th>讲师名称</th>
<th>所教班级</th>
</tr>
<tr>
<td colspan="2">王老师</td>
<!--<td>Java180701</td>-->
</tr>
<tr>
<td>朱老师</td>
<td>Java180702</td>
</tr>
<tr>
<td>高老师</td>
<td>Java180703</td>
</tr>
</table>
form表单相关标签
前后端联动原理：
代码效果图：
<body>
<div align="center">
<b>欢迎注册！</b>
<form action="http://www.baidu.com">
<table border="1" cellspacing="0">
<tr>
<td>账号：</td>
<!-- type="text"文本框
value:设置默认值
maxlength:设置最大长度
readonly="true"
-->
<td><input type="text" value="zhangsan" maxlength="10"/></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password"/></td>
</tr>
<tr>
<td>性别：</td>
<td>
<!-- 单选按钮
name:组名，同一组的radio互相排斥
checked:设置默认选中
-->
<input type="radio" name="gender" />男
<input type="radio" name="gender" checked="true"/>女
</td>
</tr>
<tr>
<td>性却：</td>
<td>
<input type="checkbox" name="likes"/>音乐<br/>
<input type="checkbox" name="likes"/>看书<br/>
<input type="checkbox" name="likes"/>爬山<br/>
</td>
</tr>
<tr>
<td>城市：</td>
<td>
<!-- selected:设置默认选中 -->
<select>
<option>青岛</option>
<option>济南</option>
<option selected="true">烟台</option>
<option>潍坊</option>
</select>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<!-- textarea
-->
<textarea rows="5" cols="20">京东（股票代码：JD），中国自营式电商企业，创始人刘强东担任京东集团董事局主席兼首席执行官 [1] 。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部等。2013年正式获得虚拟运营商牌照。
2014年5月在美国纳斯达克证券交易所正式挂牌上市。 2016年6月与沃尔玛达成深度战略合作，1号店并入京东。
</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox" id="cb"/> <label for="cb">同意该协议</label>
</td>
<td></td>
</tr>
<tr>
<td colspan="2">
<!--
submit:提交表单数据到服务器
reset:将表单数据重置为初始值
button:没有任何功能，需要后面通过jd定义功能
-->
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
<!--<input type="button" value="Input 按钮"/>-->
<button>按钮</button>
</td>
<td></td>
</tr>
</table>
</form>
</div>
</body>
CSS
CSS定义：cascading style sheet 层叠样式表。
语法：
选择器 {
属性名1:属性值1;
属性名2:属性值2;
属性名3:属性值3;
属性名4:属性值4;
}
CSS使用：
1、通过选择器选择上标签
2、选择上标签上之后设置样式
选择器分为：
标签选择器： p{}
类选择器： .className{}
id选择器： #id{}
一些常见的属性：
color:red;
font-size:40px;
background-color:blue;
text-decoration:underline;
text-decoration:none; //没有下划线
一共有三种样式：50px字体、红色、下划线
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.red{
color: red;
}
.underline{
text-decoration: underline;
}
.big_font{
font-size: 50px;
}
</style>
</head>
<body>
<p class="red big_font">段落1</p>
<p class="underline red">段落2</p>
<p class="big_font underline">段落3</p>
<p class="red big_font underline">段落4</p>
</body>
</html>
正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有红、大、线，一旦携带这个类名，就有相应的样式变化：
所以要总结两条：
1） class可以重复，也就是说，同一个页面上可能有多个标签同时属于某一个类；
2） 同一个标签可以同时携带多个类，每个标签，就去选取自己想要的类：
类的使用，能够决定一个人的css水平。
总结：
1） 不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。
2） 每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
到底用id还是class？
答案：尽可能的用class，除非极特殊的情况下用id。
一般情况下：id表示唯一的概念，是给js用的，class是给css用的。
CSS高级选择器：
直接看代码
s1 s2 后代选择器
s1,s2 并集选择器(选择器组)
s1s2 交集选择器
s1>s2 直接儿子选择器，和后代选择器不一样
s1+s2 下一个兄弟选择器,后面紧挨着的第一个兄弟
selector.rar
div .style1
层次选择器：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input[type='text']{
background-color: red;
}
input[type='password']{
background-color: blue;
}
</style>
</head>
<body>
用户名:<input type="text" name="userName" /><br/>
密码:<input type="password" name="password" /><br/>
</body>
</html>
优先级：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: blue;
``` }
#div2{
```html background-color: green;
}
.margin_top_bottom_2{
margin-top: 2px;
margin-bottom: 2px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<div class="margin_top_bottom_2" id="div2"></div>
<div></div>
</body>
</html>
id选择器>class选择器>标签选择器z
练习：
第一行文本为 <p> 元素，使用内联样式定义其样式为 25px 的红色文本；
第二行文本为 <h1> 元素，使用内部样式表定义其样式为 20px的蓝色文本；
第三行文本为 <h2> 元素，使用外部样式表定义其样式为 15px的绿色文本，且背景色为银灰色（silver）。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="h2.css" />
<style>
.h1{
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<p style="color: red;font-size: 25px;">段落文本p：使用内联样式</p>
<h1 class="h1">一级标题(h1):使用内部样式表</h1>
<h2 class="h2">二级标题(h2)：使用外部样式表</h2>
</body>
</html>
