/**
* HTML
*/
HyperText Markup Language
超级文本标记语言
"超文本": 指页面内可以渲染图片、超级链接、音乐、视频、程序等非文字元素
"标记语言": 指由标记构成的语言，标记通称"标签"
规则性语言
/**
* 开发工具myEclipse
*/
myEclipse是Eclipse的插件版
http://www.myeclipsecn.com/download/
微信扫二维码
回复 "本地下载"
收到 "201703"
Windows离线版
/**
* 下载破解补丁
*/
http://pan.baidu.com/s/1mgozZzM
密码：7g8i
/**
* 运行破解补丁
*/
首先，确保MyEclipse完全关闭
找到补丁中的cracker.jar 右键 以管理员的身份运行
在UserCode输入框中输入任意内容
点击SystemId，SystemId输入框中会出现一串码
继续点击Active按钮
点击Tools，选择ReplaceJarFile
选择MyEclipse的安装目录，找到plugins子目录
点击Tools，选择SavePropertiles
/**
* 设置utf-8编码
*/
Window
Perferences
General
Workspace
Test file encoding
Other UTF-8
Apply
OK
/**
* 设置代码字体
*/
Window
Perferences
General
Appearance
Colors and Fonts
Basic
Text Font
Consolas 粗体 16
Apply
OK
/**
* 新建工程文件夹和html文件
*/
Pakage
右键
New
Java Project
Project Name: 20170412
Finish
文件右键 New Folder html Finish
文件右键 New File index.html Finish
/**
* html骨架
*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>哈哈网</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>
<h1>静夜思</h1>
<p>
床前明月光，<br />
疑是地上霜。<br />
举头望明月，<br />
低头思故乡。<br />
</p>
</body>
</html>
/**
* meta标签
*/
UTF-8 国际通用，字符广泛，单汉字3字节，速度相对慢
gb2312 国内专属，字符有限，单汉字2字节，速度相对快
根据编码顺序不同，来划分字符集，每套字符集的编码与字符一一对相应
原则上HTML中编译 存储 解析的字符集必须为同一套字符集
<head>
<!-- 解析字符集 -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- 关键词 -->
<meta name="Keywords" content="咸鱼,咸菜,梦想" />
<!-- 描述 -->
<meta name="Description" content="人要是没有梦想,那跟咸鱼有什么分别?" />
<!-- 网页标题 -->
<title>哈哈网</title>
<!-- 倒计时刷新 -->
<meta name="Refresh" content="0;url=http://baijiahao.baidu.com/builder/preview/s?id=1564742512189839" />
</head>
/**
* html特点
*/
空白折叠现象：对Tab制表符、空格不敏感,自动折叠为一个英文空格
/**
* 排版标签
*/
//html注释
<!-- 注释 -->
//换行标签
<br />
//段落标签
<p>妈咪妈咪baby哄</p>
//水平线标签
<hr />
/**
* 字体标签
*/
//标题标签
<h1></h1>
//font标签
<font color="#434533" size="7" face="微软雅黑">床前明月光</font>
//加粗标签
<b></b>
//上下标号标签
<sup></sup> 上标
<sbp></sbp> 下标
/**
* 转义字符
*/
  ; 英文空格
< ; 小于号
> ; 大于号
& ; 与符号
" ; 引号
® ; 注册
© ; 版权
&trade ; 商标
/**
* 清单标签
*/
//无序列表 type属性 disc实心圆 square实心方 circle空心圆
<ul type="circle">
<li>两仪</li>
<li>八卦</li>
</ul>
//有序列表 type属性 A a I i 1
<ol type="I">
<li>四象</li>
<li>五行</li>
</ol>
//自定义列表
<dl>
<dt>东来乡杀马特四人组</dt>
<dd>刘油Andy</dd>
<dd>郭米Aaron</dd>
<dd>张肉Jacky</dd>
<dd>黎面Leon</dd>
</dl>
/**
* 图形标签
*/
<img src="http://tc.sinaimg.cn/maxwidth.800/tc.service.weibo.com/7xkq88_com1_z0_glb_clouddn_com/65878871c8e2cb2687f04a67d0403a8f.jpg" width="300" alt="母爱"/>
/**
* 超级链接标签
*/
<a href="#" target="_blank" title="悬停文本" >点我</a>
/**
* 超级链接的锚
*/
<a id="tagSam" name="tagSam" >目的地（可缺省）</a>
<a href="#tagSam" target="_self" title="悬停文本" >跳吧</a>
/**
* 表格标签
*/
<table border="1" cellspacing="10" cellpadding="20">
<tr>
<th>序号</th>
<th>姓名</th>
</tr>
<tr>
<td>Tom</td>
<td>5</td>
</tr>
</table>
/**
* frameset框架标签,与body同级,需清掉body
*/
<frameset rows="30%,70%" >
<frame src="x.html" />
<frameset cols="30%,70%" >
<!--
<a href="#" target="xiaojianren" title="" >在xiaojainren页面显示</a>
-->
<frame src="y.html" />
<frame src="z.html" name="xiaojianren" />
</frameset>
</frameset>
/**
* 表单标记
*/
<form action="#" method="get">
<p>用户名：<input type="text" name="username" value="默认值" size="8" maxlength="20"/></p>
<p>密 码 ：<input type="password" name="password" value="默认值"/></p>
<p>单选：
<input type="radio" name="WeiYiDan" value="fu" />福
<input type="radio" name="WeiYiDan" value="lu" />禄
<input type="radio" name="WeiYiDan" value="shou" />寿
<input type="radio" name="WeiYiDan" value="xi" />喜
</p>
<p>多选：
<input type="checkbox" name="WeiYiDuo" value="fu" />福
<input type="checkbox" name="WeiYiDuo" value="lu" />禄
<input type="checkbox" name="WeiYiDuo" value="shou" />寿
<input type="checkbox" name="WeiYiDuo" value="xi" />喜
</p>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
/**
* 下拉选
*/
<select name="XiaLa" id="XiaLa">
<option value="A">福</option>
<option value="B">禄</option>
<option value="C">寿</option>
<option value="D">喜</option>
</select>
/**
* 文本域
*/
<textarea rows="3" cols="5" name="showSelf" >我是谁</textarea>
/**
* 文件上传
*/
<input type="file" name="pic"></input>
/**
* 隐藏域
*/
<input type="hidden" name="yincang" value="隐藏了没"></input>
/**
* 请求方式对比：get和post
*/
get方法
1)参数键值对拼装在url里
2)对用户数据的安全性交差
3)参数长度有限
post方法
1)参数键值对拼装在url里
2)对用户数据的安全性交差
3)参数长度理论上无限制
/**
* css
*/
层叠样式表
Cascading Style Sheet
用来表现HTML的样式
/**
* css的结合方式一：
*/
<div style="color:#ff5cec;background-color: #2afffa"></div>
/**
* css的结合方式二：
*/
<head>
<style type="text/css">
div {
color:#ff5cec;
background-color: #2afffa
}
</style>
</head>
/**
* css的结合方式三：
*/
<head>
<!--引入自定义CSS-->
<link href="../css/index.css" rel="stylesheet" type="text/css" />
</head>
/**
* css的选择器
*/
<div>标签选择器</div> div { }
<div id="weParkId">id选择器</div> #weParkId{ }
<div class="weParkClass">class选择器</div> .weParkClass{ }
<a href="#">伪类选择器</a>
a : link { }
a : visited { }
a : active { }
a : hover { }
/**
* font
*/
font: normal 700 12px/1.5 "Microsoft Yahei", arial, "Hiragino Sans GB", sans-serif;
/**
* background
*/
background: #ff5cec url('http://p3.pstatp.com/large/1921000143336fcc4994') no-repeat scroll center center;
/**
* div和span布局标签
*/
块级标签div
行内标签span
/**
* 盒子模型
*/
万物皆盒子
300px;
height:300px;
border: 2px solid #CCCCCC;
padding: 10px 20px 30px 40px;
margin: 10px 20px 30px 40px;