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学习第一阶段结束,相较于第一阶段的一味学习,第二阶段想拿出更多的时间来阅读别人的源码以及跟着做简单的小项目,同时进一步深入学习 ...
随机推荐
- 洛谷 P1801 黑匣子_NOI导刊2010提高（06） 题解
昨晚恶补了一下二叉堆的内容 然后就找了几个二叉堆的题来做awa 然后发现用二叉堆做这题复杂度是O(nlogn) 但是有O(n)的解法 (某大佬这么说) 思路大概就是: 利用一个大根堆一个小根堆来维护第 ...
- 根据IP查询所在城市接口（查询用户所在城市）
转自:https://blog.csdn.net/liona_koukou/article/details/75646313 最近项目有用到定位用户客户端打开页面时所在的城市的需求,找到如下接口,做个 ...
- vue中使用element-ui自定义主题后，vue-cli跑不起来了
环境:vue-cli 2.x版本 自己在官网配置了主题并放到了项目中https://element.eleme.cn/#/zh-CN/theme 然后,我的脚手架在我的电脑中休息了几天,就跑不通了呢! ...
- IRQL
IRQL是Interrupt ReQuest Level,中断请求级别. 一个由windows虚拟出来的概念,划分在windows下中断的优先级,这里中断包括了硬中断和软中断,硬中断是由硬件产生,而软 ...
- 【06月04日】A股滚动市盈率PE历史新低排名
2010年01月01日 到 2019年06月04日 之间,滚动市盈率历史新低排名. 上市三年以上的公司,2019年06月04日市盈率在300以下的公司. 1 - 阳光照明(SH600261) - 历史 ...
- 【RS】AutoRec: Autoencoders Meet Collaborative Filtering - AutoRec：当自编码器遇上协同过滤
[论文标题]AutoRec: Autoencoders Meet Collaborative Filtering (WWW'15) [论文作者]Suvash Sedhain †∗ , Aditya K ...
- odoo @api.constrains _sql_constrains
实现机制: @api.constrains('fields') 服务器启动时将模型中的所有约束方法注册到对象池中: 在create.write时会根据创建或修改的fields检查是否有对应的约束方法, ...
- Learn About Git Bash
git是用来做版本控制的,在本节博客中,主要介绍git的下载,以及简单的配置 Version control is a system that records changes to a file or ...
- AKKA Actor创建
Actor 类定义 Actor 类需要继承AbstractActor类 实现createReceive方法,绑定各类actor收到不同类型消息对应处理不同业务逻辑 默认提供了ReceiveBuilde ...
- 文本分类（TextCNN，Keras）
数据集是网上找的,已上传至我的 Github,项目完整地址:https://github.com/cyandn/practice/tree/master/text-classification 流程: ...