JavaEE学习笔记（1）——html、css
一、html技术
1.1 html书写规范
<html> html页面的开始
<head> 头信息
<title>标题</title> 标题
</head>
<body> body是页面的主体内容
页面主体内容
</body>
</html> 表示html页面的结束
<!DOCTYPE html> <!-- 约束声明-->
<html lang="zh_CN"><!-- html标签表示html的开始
lang="zh_CN"表示中文 html标签中一般分为两部分：head和body-->
<head><!--表示头部信息，一般包含三部分内容，title标签，css样式，js代码-->
<meta charset="UTF-8"> <!--表示当前页面使用utf—8字符集-->
<title>标题</title><!--表示标题-->
</head>
<body><!--body标签是整个html页面显示的主体内容-->
hello
</body>
</html>
1.2 html标签的语法
1.标签的格式：<标签名>封装的数据</标签名>
2.标签对大小写不敏感
3.标签有自己的属性
基本属性：bgcolor…
事件属性: onclick
4.标签又分为单标签和多标签:
和
注意点：
1.标签不能交叉嵌套
2.标签必须正确关闭（双标签成对出现，单标签必须添加 / ）
3.属性必须有值，属性值必须加引号
4.注释不能嵌套
1.3 常用标签介绍
①font标签
修改文本的字体、大小、颜色
<body>
<font color="#a52a2a" face="微软雅黑" size="7"> 我是字体标签</font>
</body>
②特殊字符
常用的特殊字符：
< ===>>> <
> ===>>> >
空格 ===>>>
③标题标签
<body>
<!--
h1最大，h6最小
align属性是对齐属性 left right center
-->
<h1 align="">a</h1>
<h2>a</h2>
<h3>a</h3>
<h4>a</h4>
<h5>a</h5>
<h6>a</h6>
</body>
④超链接√
<body>
<!--a标签是超链接
herf属性设置链接地址
target属性设置哪个目标进行跳转
_self表示当前页面
_blank表示打开新窗口 -->
<a href="http://www.baidu.com">百度</a><br/>
<a href="http://www.baidu.com" target="_self">百度</a><br/>
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
⑤列表标签
无序列表、有序列表
<body>
<!--
ul无序列表
ol有序列表
li列表项
type修改列表项前面的符号
-->
<ul type="none">
<li>周</li>
<li>王</li>
<li>陶</li>
<li>林</li>
</ul>
<ol>
</ol>
</body>
⑥img标签
<body>
<!--
相对路径：
. 表示当前文件所在目录
.. 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录下的文件，相当于./文件名
绝对路径：
格式是：http://ip::port/工程名/资源路径
alt属性表示文件找不到时显示内容
-->
<img src="" width="" height="" border="" alt=""/>
</body>
⑦table标签√
<body>
<!--
table标签是表格标签
border 设置表格边框
weight、height 设置表格宽高
cellspacing 设置单元格间距
tr 行标签
th 表头标签
td 单元格标签
align 设置单元格文本对齐方式
b 加粗标签
-->
<table border="1" width="300" height="100">
<tr>
<td align="center"><b>1.1<b></td>
<th>1.2</th>
<td>1.3</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>
⑧跨行跨列表格√
<!--
colspan 属性设置跨列
rowspan 属性设置跨行
-->
<table width="500" height="500" cellspacing="0" border="1">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td colspan="2" rowspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
</body>
⑨iframe标签
<body>
<!--
iframe标签和a标签组合使用的步骤
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性设置iframe的name属性值
-->
<iframe src="跨行跨列表格.html " width="300" height="300" name="abc"></iframe>
<br/>
<ul>
<li><a herf="img标签" target="abc"></a></li>
</ul>
</body>
⑩表单√
<!--
form标签就是表单
input type="text" 文本输入框
input type="password" 密码输入框
input type="radio" name="sex" 单选框 name进行分组 checked="checked"表示默认
input type="checkbox" 复选框 checked="checked"表示默认
input type="reset" 重置按钮 value修改按钮上文本
input type="submit" 提交按钮
input type="button" 按钮
input type="file" 文件上传
input type="hidden" 隐藏域 当我们需要发送某些信息而不需要用户参与
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设为默认
extarea 多行文本输入框 默认值设置在标签之间
rows="10" clos="20" 设置可以显示几行的高度，每行显示几个字符
-->
<body>
<!--
form标签是表单标签
action 属性设置提交的服务器地址
method 属性设置提交的方式get或post
表单提交的时候数据没有发送给服务器的三种情况
①：表单项没有name值
②：单选、复选（下拉中的option标签）都需要添加value属性以便发送给服务器
③：表单项不在提交的form标签中
GET请求的特点是：
1.浏览器地址栏中的地址是：action属性[+?+请求参数]
请求参数的格式是:name+value&name+value
2.不安全
3.有数据长度的限制
POST请求的特点是：
1.浏览器地址栏中只有action属性值
2.更安全
3.理论上没有数据长度的限制
-->
<form action="" method="">
<input type="hidden" name="action" value="login">
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名称：</td>
<td><input type="text" value="默认值"/><br/></td>
</tr>
<tr>
<td>用户密码：</td>
<td><input type="password" value="abc"/><br/></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" value="abc"/><br/></td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" checked="checked"/>男 <input type="radio" name="sex"/>女<br/></td>
</tr>
<tr>
<td>兴趣爱好：</td>
<td><input type="checkbox" checked="checked"/>JAVA<input type="checkbox"/>C++<input type="checkbox"/>C#<input type="checkbox"/>PYTHON<br/></td>
</tr>
<tr>
<td>国籍：</td>
<td><select>
<option selected="selected">请选择国籍</option>
<option>中国</option>
<option>美国</option>
<option>德国</option>
<option>法国</option>
</select><br/></td>
</tr>
<tr>
<td>自我评价：</td>
<td><textarea rows="10" clos="20">默认值</textarea><br/></td>
</tr>
<tr>
<td><input type="reset"/></td>
<td><input type="button"/><br/></td>
</tr>
</table>
</form>
</body>
其他标签
<body>
<!--
div标签 默认独占一行
span标签 他的长度是封装数据长度
p段落标签 默认会在段落的上方或下方各空出一行
-->
<div></div>
<span></span>
<p></p>
</body>
2402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
