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学习第一阶段结束,相较于第一阶段的一味学习,第二阶段想拿出更多的时间来阅读别人的源码以及跟着做简单的小项目,同时进一步深入学习 ...
随机推荐
- linux修改服务器时区并使用所选时区的时间
linux 修改服务器时区并使用所选时区的时间(以 ubuntu18.04 修改为美国芝加哥时区为例) 一.修改时区 /usr/bin/tzselect 1.选择地区, 美洲地区: ...
- flask获取get请求传过来的数组
robots = request.args.getlist("robots[]")
- crystalreport使用方法
使用: 打开CrystalReport官网下载页 目前最新版本为13.0.4 选择“SAP Crystal Reports, version for Visual Studio 2010 - Stan ...
- hdu1005-Number Sequence-（循环节）
题意:已知f(1) = 1, f(2) = 1, f(n) = (A * f(n - 1) + B * f(n - 2)) mod 7,给出A,B,n,求f(n) 题解:n巨大,循环肯定超时,在模7的 ...
- Python面向对象 | 双下方法
定义:双下方法是特殊方法,他是解释器提供的.由双下划线+方法名+双下划线 .它具有特殊意义的方法,双下方法主要是python源码程序员使用的,我们在开发中尽量不要使用双下方法,但是深入研究双下方法,更 ...
- Android Studio 之 控件基础知识
1. TextView 和 EditText 控件常用属性 android:layout_width="match_parent" 宽度与父控件一样宽 android:layou ...
- SEDA 架构
参考文档: https://blog.csdn.net/zhihui1017/article/details/50502825
- oracle拼接sql语句
示例: select 'select a.xh,a.dj,a.xzb from xsjbxxb a where a.xzb=' || chr(39) || a.xzb || chr(39) ...
- 【Kubernetes学习之二】Kubernetes集群安装
环境 centos 7 Kubernetes有三种安装方式:yum.二进制.kubeadm,这里演示kubeadm. 一.准备工作1.软件版本 软件 版本 kubernetes v1.15.3 Cen ...
- SQL中join连接查询时条件放在on后与where后的区别
数据库在通过连接两张或多张表来返回记录时,都会生成一张中间的临时表,然后再将这张临时表返回给用户. 在使用left jion时,on和where条件的区别如下: 1. on条件是在生成临时表时使用的条 ...