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编码后的结果。
JavaWeb第一天--HTML的更多相关文章
- 学习JAVAWEB第一天
第一天:单元测试(junit)黑盒测试:不需要写代码,给输入值,看程序能否给出期望值白盒测试:需要写代码,关注程序的具体执行流程junit使用步骤:步骤1:定义一个测试类建议类名,被测试类名后面加一个 ...
- javaWeb第一天
//第一个JavaWeb项目package com.chy.action; import java.io.IOException; import javax.servlet.ServletExcept ...
- JAVAWEB第一节课的课后思考
第一开发一个网站需要的一些技术 至少熟悉一种建站程序.(html,javascript等等)对空间和域名的知识有一定的了解.有一些美工基础(例如ps设计等等).对编程有一些了解.HTML的代码知识基本 ...
- 巩固javaweb第一天
巩固内容: 实例解析 <!DOCTYPE html> 声明为 HTML5 文档 <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元(me ...
- Eclipse+Tomcat7.0+MySQL 连接池设置
http://blog.sina.com.cn/s/blog_85d71fb70101ab99.html 工程名:JavaWeb 第一步:配置server.xml 在Tomcat的server.xml ...
- JavaDailyReports10_17
学习JavaWeb第一天 输出我的第一个HelloWorld! 1 <%@ page language="java" import="java.util.*&quo ...
- 第一个远程javaweb项目测试全过程
2017-5-20,在这个奇特的日子,我不再满足于在本地测试javaweb,于是在上腾讯云买了第一个云服务器,由于是学生认证,所以一个月只要10块钱,还是要抢的,每天早上9点开抢 打开后,发现其实是一 ...
- 从零开始写JavaWeb框架（第一章节）
买了本<从零开始写JavaWeb框架> 因为是第一次用IDEA,期间遇到很多问题,比如:怎么在IDEA中配置tomcat: 在IDEA界面的右上角点击: 点击+,选择Maven 到了如下界 ...
- JavaWeb学习第一阶段结束
模仿狂神实现简单的用户增删改查,增加了前端登录时的密码验证 JavaWeb学习第一阶段结束,相较于第一阶段的一味学习,第二阶段想拿出更多的时间来阅读别人的源码以及跟着做简单的小项目,同时进一步深入学习 ...
随机推荐
- Git常用基础命令
要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库.远程仓库是指托管在网络上的项目仓库,可能会有好多个,其中有些你只能读,另外有些可以写.同他人协作开发某 个项目时,需要管理这些远程仓库 ...
- centos定时删除log文件
#!bin/bash #获取年 time=$(date "+%Y") #查找并删除7天前的文件 find /opt/applog/travelsky -type f -mtime ...
- VS中的Modules窗口
当我在别人的机器上调试问题时,我做的第一件事就是查看modules窗口.按版本排序并看到一个不属于的dll可以帮助立即诊断配置问题,并节省许多调试痛苦. 下面介绍下各列的意思: Name:模块名称. ...
- clojure 环境搭建
以下是clojure 基础环境搭建的几种方式 mac brew install clojure linux curl -O https://download.clojure.org/install/l ...
- Python power函数
power函数 from math import pow def power(x, y): if y == 0: return 1 tot = 1 for i in range(y): tot *= ...
- C语言博客作业04—数组
0.展示PTA总分(0----2) 展示3张关于"数组题目集"分数截图. 1.本章学习总结(2分) 1.1 学习内容总结 整理数组这章学习主要知识点,必须包含内容有: (1)数组查 ...
- Spring Security教程之退出登录logout（十）
要实现退出登录的功能我们需要在http元素下定义logout元素,这样Spring Security将自动为我们添加用于处理退出登录的过滤器LogoutFilter到FilterChain.当我们指定 ...
- [HeadFrist-HTMLCSS学习笔记]第三章构建模块：Web页面建设
[HeadFrist-HTMLCSS学习笔记]第三章构建模块:Web页面建设 敲黑板!! <q>元素添加短引用,<blockquote>添加长引用 在段落里添加引用就使用< ...
- secondNameNode作用
在Hadoop中,有一些命名不好的模块,Secondary NameNode是其中之一.从它的名字上看,它给人的感觉就像是NameNode的备份.但它实际上却不是.很多Hadoop的初学者都很疑惑,S ...
- 树莓派4B基本配置
一.系统安装 官网下载好系统解压,使用SD Card Formatter格式化内存卡 # 查看内存卡状态,通过内存卡大小判断是哪个 df -lh # 卸载内存卡 diskutil unmount /d ...