JavaWeb第一天--HTML
HTML
HTML简介
HTML(Hyper TextMarkupLanguage) 超文本标记语言。
- 超文本： 超越了文本仅仅展示信息的功能范畴，泛指：图片、有样式的文字、超链接。
- 标记： 标签。
- 语言： 工具。
HTML是由标签所组成的语言，能展示超文本的效果。
HTML的语言特征
HTML代码是由头和体组成。
HTML文件的扩展名为html或者htm。
HTML文件由浏览器直接执行解析，无需编译，直接由上到下依次解析执行。
HTML标签通常由开始便签和结束标签组成，例如：<font>内容体</font>。
<!DOCTYPE html><!--文档声明-->
<html>
<head>
<title>页面标题</title>
</head>
<body>
需要想用户展示的信息
</body>
</html>
注：推荐使用开发工具Notepad++、HBuilder。
字体标签及格式化标签
- <font></font>标签
字体标签，用于展示效果中修饰文字样式。
<font 属性名="属性值">文字</font>
size：控制字体的大小，范围1~7，超过范围无效。
color：控制字体的颜色（例如：red,#ffff等）
face：控制字体的类型。只能设置系统字库中有的字体类型
<!DOCTYPE html>
<html>
<head>
<title>我的第一个示例</title>
</head>
<body>
<font color="red" size="7" face="java体">美好一天，从学习开始</font>
</body>
</html>
-
<br\>标签
换行标签，用于展示效果中换行，浏览器解析时会自动忽略。 -
<p></p>标签
段落标签，用于展示效果中的划分段落，并且自动在段前和段后自动加空白行。
align:段落内容的对齐方式(left，right，center)，默认是left，内容居左。
-
<h1></h1>
标题标签，用于展示效果中划分标题，其中<h1></h1>最大，<h6></h6>最小。 -
 
空格符号，用于展示效果中显示一个空白的位置。 -
HTML注释
格式：<!--HTML注释内容-->
<!DOCTYPE html>
<html>
<head>
<title>我的第二个示例<title>
</head>
<body>
<h1>静夜思标题</h1>
<h2>静夜思标题</h2>
<h3>静夜思标题</h3>
<h4>静夜思标题</h4>
<h5>静夜思标题</h5>
<h6>静夜思标题</h6>>
静夜思<br/>
李白<br/><br/>
床前明月光，
<p>疑是地上霜。</p>
<p>举头望明月，</p>
<p>低头思故乡。</p>
李 白
<!--你好，我是注释-->
</body>
</html>
图片标签
- <img/>标签
用于页面效果中展示的一张图片。
src:指明图片的路径。（必有属性）
图片路径的写法：
绝对路径：文件在硬盘上的具体位置。（例如：C:\test.jpg）
相对路径：从引入者所在目录出发（例如：../img/test.jpg），../表示上一层目录，./表示当前目录。
互联网路径：必须在前面加上http://。（例如：http://www.baidu.com/test.jpg)
列表标签
- <ul></ul>标签
无序列表标签：用于在效果中定义一个无序列表。 - <li></li>标签
列表条目项标签，用于在效果中定义一个列表的条目。 - <ol></ol>标签
有序列表标签，用于在效果中定义一个有序列表。
<!DOCTYPE html>
<html>
<head>
<title>列表示例</title>
</head>
<body>
<ul>
<li>手机</li>
<li>电脑</li>
</ul>
<ol>
<li>手机</li>
<li>电脑</li>
</ol>
</body>
</html>
超链接标签
- <a></a>标签
超链接标签，用于在效果中定义一个可以点击跳转的链接。
- href:超链接跳转路径。
- 本机路径：相对路径和绝对路径。
- 外网路径：http://地址。
- 本页：#。
<!DOCTYPE html>
<html>
<head>
<title>超链接示例</title>
</head>
<body>
<!--点击链接跳转百度-->
<a href="http://www.baidu.com">百度</a>
<!--超链接不仅仅可以是文字，也可以是其他内容，例如图片-->
<a href="demo.html">
<img src="../img/test.jpg"/>
</a>
<!--超链接还可以链接到图片-->
<a href="../img/test.jpg">链接到一张图片</a>
</body>
</html>
表格标签
- <table></table>标签
表格标签，用于在效果中定义一个表格。
- border：设置表格边框的粗细。
- width：设置表格的宽度
- <tr></tr>标签
表格的行标签，用于在效果中定义一个表格的行。 - <td></td>标签
表格的单元格标签，用于在效果中定义一个表格行中的单元格。 - <th></th>标签
表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格。 - 单元格合并
<td>或者<th>都有两个单元格合并属性。
- colspan：跨列合并单元格。
- rowspan：跨行合并单元格。
<!DOCTYPE html>
<html>
<head>
<title>表格示例</title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
<tr>
<td colspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
块标签
- <span></span>标签
行级的块标签：用于在效果中一行上定义一个块，进行内容显示。
有多少内容，就会占用多大空间。<span></span>不会自动换行。
- <div></div>标签
块级的块标签，用于在效果中定义一个块，默认占满一行，进行内容的显示。
<!DOCTYPE html>
<html>
<head>
<title><title>
</head>
<body>
<span>我就占用这么大的空间<span>
<div>我要占满一行</div>
</body>
</html>
表单标签
- <form></form>标签
在效果中定义一个表单，用于提交用户填写数据。
- action：将数据提交到何处。
- method：将数据以何种方式提交。（提交可定义：get或者post，默认get）；
- get和post提交方式的区别：
1.get提交的参数列表拼接到了地址栏的后面;post方式不会。
2.get方式提交的数据敏感，信息不安全；post方式提交的数据相对安全。
3.get方式提交的数据量有限；post方式从理论上提交的数据量无限大。
*尽量使用post方式提交表单。
输入项标签
- <input/>标签
表单输入项标签之一，用户可以在该标签中通过填写和选择数据的输入。
- type:设置该标签的种类
text：文本框。
password：密码框。
radio：单选框。
checkbox：复选框。
submit：提交按钮，用于控制表单提交数据。
reset：重置按钮。
file：附件框，用于文件上传。
hidden：隐藏域。一般用作提交服务器所需要的，但不需要用户看到的。
button：普通按钮。- name：单选框、复选框进行数据分组。/ 设置该标签对应的参数名。
- value：设置该标签对应的参数值。
- checked：设置单选框、复选框的默认选中状态。
- readonly：设置该标签的参数值只读，用户无法手动更改，数据可以正常提交。
- disabled：设置该标签不可用，参数无法更改，且参数值也无法提交。
选择框标签
- <select></select>标签
定义一个选择框。
- name：设置该标签对应的参数名。
- multiple：设置该标签选择项全部显示，并且可以进行多选提交，默认为单选。
- <option></option>标签
选项标签，用于为一个选择框添加一个选项。
- value：设置需要提交的参数值。
- selected：设置选项的默认选中状态。
注意事项：<option>的内容体一般是用来进行展示，参数值应该是option的value属性值。
文本域标签
- <textarea></textarea>标签
表单输入项标签之一，用户可以在该标签上通过输入进行数据的输入。
- name：设置该标签对应的参数名
- 文本域和文本框的区别
1.文本框不能换行，文本域可以。
2.文本框的参数值是value属性，文本域的参数值是标签的内容体。
<form action="#" method="get">
用户名：<input type="text" name="username"/>
密码：<input type="password" name="password"/>
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女
<select name="city">
<option value="1">选择选项卡一</option>
<option value="2">选择选项卡二</option>
</select>
描述：<textarea name="description">xxxxx</textarea>
<input type="submit"/>
</form>
URL编码的简述及使用理由
- 为什么使用URL编码?
为了保证表单数据传递时能更好的区分name和value。保证数据传递的准确性。
正常提交数据：
?password=123&username=zhangsan
非正常提交数据：
?password=123#ddd&ddd&username=zhangsan
URL编码解决方式：特殊符号，中文。
例如：& -> %26。
?password=123#ddd%26ddd%26username=zhangsan。
- URL编码的表现形式和本质
例如：你好，用UTF-8编码，编码的字节数组为：
[-28,-67,-96,-27,-91,-67]
URL 编码后：
%E4%BD%A0%E5%A5%BD
1.你好，进行普通的编码，编码成字节数组。【使用的是页面规定的字符集，例如utf-8】。
2.字节数组中的每一个元素，都会从10进制，转换为16进制。
3.把已经转换为16进制的字节数组，以%进行拼接。拼接出的字符串就是URL编码后的结果。
浙公网安备 33010602011771号