HTML
Hyper Text Markup Language超文本标记语言，描述网页的语言。
eclipse添加JavaEE支持
-
在eclipse里，菜单栏Help->About Eclipse IDE
-
记住版本类型，我的是Photon。
-
Help->Install new software…->输入http://download.eclipse.org/releases/ + eclipse类型，选择对应的项安装即可。
-
新建project->Web->Static Web Project
Html基础
- 基本结构
< html > HTML文件的开头标记
< body > 网页主体标记
< head > 头标记，放置关于此HTML文件的信息，如提供索引、定义CSS样式、字体编码等。
< title > 标题标记 - 文本排版标签
< p > 段路
< br > 换行
< h1> ~ < h6 > 标题
< center > 居中
< blockquote > 段落缩进 - 列表
<ul > 无序列表 <li > </li >
- 无序列表
- 无序列表
<ol > 有序列表 <li > </li >
- 有序列表
- 有序列表
标记属性
-
align 水平位置，枚举：right/left/center/justify
<p align="right">
- bgcolor
<body bgcolor="red">背景颜色</body> - 文字样式
< b>< /b> 粗体
< i>< /i> 斜体
< u>< /u> 下划线
< s>< /s>删除线
< big>< /big> 放大
< small>< /small> 缩小
< strong>< /strong> 加强强调
< em>< /em> 强调
< address>< /address> https://www.csdn.net/显示电子邮件地址或网址
< code>< /code>//代码与指令 - 字体大小颜色
Font标签及属性
<Font color="blue" size="6" face="微软雅黑">Font标签及属性</Font> - 特殊符号
<特殊符号©>上标下标
<特殊符号©><sup>上标</sup><sub>下标</sub>
图片
- 加载图片
<img src="http://www.baidu.com/img/bglogo.gif"/>
<img src="E:\picture\Red\redsheep.jpeg"/> - 尺寸
<img width=" " height=" " src=" "/> - 替换文本和图片名称
<img alt="这是替换文本" title="这是图片名称" src="E:\picture\Red\redsheep.jpeg"/>
超链接
- 文字超链接
CSDN
<a href="https://www.csdn.net/">CSDN</a> - 图片超链接
<a href="https://www.csdn.net/"><img alt="" src="csdnlogo.png"></a> - 设置新窗口打开
<a href="https://www.csdn.net/" target="_blank">CSDN</a> - 电子右键链接
<a href="mailto:alanredsheep@gmail.com">联系我</a>需要系统绑定默认邮件软件 - 框架链接
框架是网页布局工具，用于把浏览器的显示空间分割为几个部分，每个部分独立显示不同的网页。
基本属性，注意< iframe>与< body>同级别
<iframe height="300" width="600"></iframe>
iframe超链接，使用name属性命名，用target属性链接新网页在命名的框架内打开
<iframe height="300" width="600" name="main"></iframe> <a href="https://www.csdn.net/" target="main">CSDN</a>
表格
| 1 | 2 | 3 |
|---|---|---|
| 1-1+1-2 | 1-3 | |
| 2-1 | 2-2+3-2 | 2-3 |
| 3-1 | 3-3 | |
<table border="1" width=400 >
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr align="right">
<td colspan="2">1-1+1-2</td>
<td>1-3</td>
</tr>
<tr align="left">
<td>2-1</td>
<td rowspan="2" align="center">2-2+3-2</td>
<td>2-3</td>
</tr>
<tr>
<td >3-1</td>
<td bgcolor="#00FFFFF">3-3</td>
</tr>
</table>
- cellpadding属性：单元格内距
- cellspacing属性：单元间距
表单
< form>表单是一个包含表单元素的区域。主要作用是向服务器提交数据。
- 文本表单
<form action="a.jsp" method="get">
<table>
<tr>
<td>
用户名：
</td>
<td>
<input type="text" id="userName" name="userName"/>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" id="pwd" name="pwd"/>
</td>
</tr>
</table>
<br/>
</form>
- 单选框
<body>
性别：<input type="radio" name="sex" />男
<input type="radio" name="sex" checked="checked"/>女
</body>
- 复选框
兴趣：
<input type="checkbox" name="hobby" />唱歌
<input type="checkbox" name="hobby" />跳舞
<input type="checkbox" name="hobby" checked="checked"/>游泳
- 下拉框
年级：
<select id="grade" name="grade">
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="3">三年级</option>
</select>
- 按钮
<form action="a.jsp" method="get">
<table>
<tr>
<td>
用户名：
</td>
<td>
<input type="text" id="userName" name="userName"/>
</td>
</tr>
<tr>
<td>
密码：
</td>
<td>
<input type="password" id="pwd" name="pwd"/>
</td>
</tr>
<tr>
<td>
<input type="submit" value="登录"/>
</td>
<td>
<input type="button" value="重置"/>
</td>
</tr>
</table>
<br/>
</form>
- 文件上传
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<input type="file" id="f" name="f"/>
</body>
</html>
HTML块
- div
< div>是块级元素，是用于组合其它HTML元素的容器。
<div id="d1" style="border: 1px red solid;">
<h1>呵呵</h1>
<h2>嘿嘿</h2>
<p>嘻嘻</p>
</div>
- span
< span> 元素是内联元素，可用作文本的容器。
<p>
<span style="color: purple">这</span>
<span style="color: blue">是</span>
<span style="color: cyan">一</span>
<span style="color: green">个</span>
<span style="color: yellow">彩</span>
<span style="color: orange">虹</span>
<span style="color: red">屁</span>
</p>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
