1.html的简介
*什么是html？
-HyperText Markup Language：超文本标记语言，网页语言
**超文本：超出文本的范畴，使用html可以轻松实现这些操作
**标记：html所有的操作都是通过标记实现的，标记就是标签，<标签名称>
**网页语言：
*第一个html程序。
-创建java文件.java
**先编译，然后再运行（jvm）
-html后缀是.html .htm
**直接通过浏览器就可以运行
-代码
**这是我的<font size="5" color="red">第一个html程序！</font>

*html的规范（遵循）
1.一个html文件开始标签和结束的标签 <html> </html>
-定义一个java方法{ }
2.html包含两部分内容
(1)<head></head>
(2)<body>显示在页面上的内容都写在body里面</body>
3.html的标签有开始标签，也要有结束标签
-<head></head>
4.html的代码不区分大小写的
5.有些标签，没有结束标签，在标签内结束
-比如换行标签 <br/> <hr/>

*html的操作思想 （**********理解）
网页中有很多的数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来(封装起来)，通过修改标签的属性值实现标签内数据样式的变化。
一个标签相当一个容器，想要修改容器内数据的样式，只需要改变容器的属性值，就可以实现容器内数据样式的变化。

html中常用的标签
2.文字标签和注释标签
*文字标签：修改文字的样式
-<font></font>
-属性：
*size：文字的大小 取值范围 1-7，超出了7，默认还是7
*color：文字颜色
-两种表达方式
**英文单词：red green blue black white yellow gray 、、、
**使用十六进制表示 #ffffff：RGB
-通过工具实现不同的颜色 #66cc66

*注释标签
-Java注释有几种？三种
-html的注释：<!--html的注释-->

3.标题标签、水平线标签和特殊字符
*标题标签
-<h1></h1> <h2></h2> <h3></h3>...<h6></h6>
-从h1到h6，大小是依次变小，同事会自动换行
*水平线标签
-<hr/>
-属性
**size：水平线的粗细 取值范围1-7
**color：颜色
-代码
<hr size="5" color="blue"/>
*特殊字符
-想要在页面上显示这样的字符  <html>：这是网页的开始
-需要对特殊字符进行转义：
*< &lt;
*> &gt;
*空格 &nbsp;
*& &amp;

4.列表标签
-比如显示这样的效果
changeyd未来科技
财务部
人事部
董事会
**<dl></dl>:表示列表的范围
**在dl里面 <dt></dt>:上层内容
**在dl里面 <dd></dd>:下层内容
-代码
<dl>
<dt>changeyd</dt>
<dd>财务部</dd>
<dd>人生部</dd>
<dd>董事会</dd>
</dl>
-想要在页面上显示这样的内容
1.财务部
2.人生部
3.董事会

a.财务部
b.人事部
c.董事会

i.财务部
ii.人事部
iii.董事会

**<ol></ol>：有序列的范围
-属性 type：设置排序方式 1(默认) a i
**在ol标签里面<li>具体内容</li>
--代码
<ol type="a">
<li>人事部</li>
<li>财务部</li>
<li>董事会</li>
</ol>

-想要在页面上显示这样的效果
特殊符号（方框）财务部
特殊符号（方框）学工部

**<ul></ul>：表示无序列表的范围
属性：type： 空心圆circle、实心圆disc、实心方块square，默认disc
在ul里面<li></li>
-代码
<ul>
<li>人事部</li>
<li>财务部</li>
<li>董事会</li>
</ul>

5.图像标签（*********）
*<img src="图片的路径"/>
-src：图片的路径
-width：图片的宽度
-height：图片的高点
-alt：图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
**有些浏览器下不显示（没有效果）

6.路径的介绍
*分类：两类
**绝对路径
-D:/WangJi/Java工程师/Javaweb/a.jpg
-https://www.opengps.cn/Data/IP/IPHighAccLog.aspx

**相对路径
-一个文件相对于另外一个文件的位置
-三种：
**html文件和图片在一个路径下，可以直接写文件名称
-<img src="b.jpg" alt="这是一张图片"/>
**
在html文件中，使用img文件夹下的a.jpg

--D:\WangJi\Java工程师\Javaweb\day01\ code\4.html
--D:\WangJi\Java工程师\Javaweb\day01 a.jpg
*** 在html中使用图片 4.html和img在一个路径下
img\a.jpg
**图片在html的上层目录
---D:\WangJi\Java工程师\Javaweb\day01\demo.html
---D:\WangJi\Java工程师\Javaweb\day01 c.png

***html文件所在的目录和图片是一个目录
**图片和html文件是什么关系？
-图片在html的所在目录的上层目录 day01
**怎么表示上层路径 ../
-../：day01
--../c.png
**想要表示上层的上层目录
../../c.png

7.案例一：列表标签的使用（作业：完成剩余的部分）

8.超链接标签（************）
*链接资源（************）
-<a href="链接到资源的路径"> 显示在页面上的内容 </a>
**href：链接的资源的地址
**target：设置打开的方式，默认是在当前页中打开
-- _blank：在一个新窗口打开
-- _self：在当前页打开，默认
-当超链接不需要到任何的地址，在href里面加#
-<a href="#">这是一个超链接2</a>
*定位资源
**如果想要定位资源：定义一个位置
<a name="top">顶部</a>
**回到这个位置
<a href="#top">回到顶部</a>

**引入一个标签 pre：原样输出

9.表格标签（******重要的标签******）
*可以对数据进行格式化，使数据显示更加清晰

*<table></table>：表示表格的范围
-border：表格线
-bordercolor：表格线的颜色
-cellspacing：单元格直接的距离
-width：表格的宽度
-height：表格的高度
**在table里面 <tr></tr>
-设置对齐方式 align：left center right；

***在tr里面<td></td>
-设置显示方式 align：left center right；

***使用th也可以表示单元格
-表示可以实现居中和加粗

*代码
<table border="1" bordercolor="blue" cellspacing="0" width="400" height="150">

*画图分析表格的写法
-首先定义一个表格的范围使用table
-定义一行使用tr
-定义一个单元格使用td
**操作技巧:
-首先数有多少行，数每行里面有多少列格单元格

**表格的标题
<caption></caption>

**合并单元格
-rowspan：跨行
**<td></td>
-colspan：跨列
**<td colspan="3">人员信息</td>

10.表单标签(*******重要标签内容******)
*可以提交数据到服务器找那个，这个过程就可以使用表单标签来实现

*<form></form>：  定义一个表单的范围
-属性
**action：提交到地址，默认提交到当前页面
**method：表单的提交方式
-常用的有两种 ：get和post，默认是get请求
**面试题目：get和post的区别
1.get请求地址栏会携带提交的数据，post不会携带（请求体里面。在http协议会有）。
2.get请求安全级别较低，post较高。
3.get请求数据大小的限制，post没有限制
**enctype：一般请求下不需要这个属性，做文件上传的时候需要设置这个属性（文件上传）。

**输入项：可以输入内容或者选择内容的部分
-大部分的输入项 使用 <input type="输入项的类型" name="#"/>

*********** 在输入项里面需要有一个name的属性

***普通输入项：<input type="text" name="#"/><br>
***密码输入项：<input type="password" name="#"/><br>
***单选输入项；<input type="radio" name="sex" value="女" />女<input type="radio" name="sex" value="男" />男
-在里面需要属性 name
-name的属性值必须要相同
-必须有一个value

****实现默认选中的属性
--checked="checked"

***复选输入项：<input type="checkbox" name="love" value="y" />羽毛球<input type="checkbox" name="love" value="pp" />乒乓球<input type="checkbox" name="love" value="l" />篮球
-在里面需要属性 name
-name的属性值必须相同

***文件输入项：（上传时候回用到）
-<input type="file" name="#"/>

***下拉输入项（不是在input标签中的）
<select name="math">
<option value="0">请选择</option>
<option value="1">一</option>
<option value="2">二</option>
<option value="3">三</option>
</select>

-默认选择
***selected="selected"

***文本域
-cols：列
-rows：行
<textarea cols="10" rows="10" name="#"></textarea>

***隐藏项(不会显示在页面上，但是存在于html代码里面)
<input type="hidden" name="#"/>

***提交按钮
<input type="submit" name="#" value="注册" />

？sex=on&love=on&math=2

当在输入项里面写了name属性之后地址链接可以提交数据

** ?输入项name的值=输入的值&
** 参数类似于key=value形式 
 
*** 使用图片提交
<input type="image" name="go" src="a.jpg" value=""/>

***重置按钮：货到输入项的初始状态
<input type="reset" name="" value="重置注册"/>

***普通按钮：和js一起使用
<input type="button" name="" value="普通按钮">

11.案例：使用表单标签实现注册页面：
-使用表格实现页面效果
-超链接不想要他有效果 href="#"
-如果表格里面的单元格没有内容，使用空格作为占位符 &nbsp;
-使用图片提交表单<input type="image" src="图片的路经" name=""/>

12.html中的其他的常用的标签的使用
b：加粗
s ：删除线
u ：下划线
i ：斜体

pre：原样输出

sub：下标
sup：上标

p：段落标签  

======
div：自动换行
span：在一行显示

13.html的投标签的使用
*html两部分组成 head和body
**tetle ：表示在标签上显示的内容

**<meta>标签：设置页面的一些相关的内容
-<meta name="keywords" content="csdn">
<meta http-equiv="refresh" centent="3,url=index.html">

**base标签：设置超链接的基本设置
-可以通一设置超链接的打开方式
<base target="_blank">
**link标签：引入外部文件
**css中的应用

14.框架标签的使用（会用）
*<frameset>
-rows:按照行进行划分
**<frameset rows="80,*">
_cols:
**<frameset cols="80,*">
*<frame>
-具体显示的页面
-<frame name="lower_left" src="b.html">

***使用框架标签的时候，不能写在body里面，使用了框架标签，需要把body去掉才可以使用

*<frameset rows="80,*"> //把页面划分成立上下两部分
<frame name="top" src="a.html"></frame> //上面页面
<frameset cols="150,*"> //把下面部分划分成左右两部分
<frame name="lower_left" src="c.html"></frame> //左边页面
<frame name="lower_right" src="c.html"></frame> //右边页面
</frameset>
</frameset>

*如果在左边的页面超链接，想让内容显示在右边的页面中
-设置超链接里面属性 target值设置成名称
-<a href="a.html" target="lower_right">超链接1</a>

15.a标签的扩展（了解）
-百度是网络资源
-当a标签里面访问网络资源时候，必须要加一个协议http：表示一个网络的公共协议，
如果加上http协议之后，自动识别访问资源是一个网络资源

-当浏览器里面找到相关协议，首先看这个协议是不是公共协议http。
如果不是公共协议，会去本地电脑找支持这个协议的应用程序

16.今天内容的总结
1.html操作思想（*******）
*使用标签把要操作的数据包起来，通过修改标签的属性值，来实现标签内数据样式的变化
2.font标签 属性：size 取值范围 1-7 color：英文单词，十六进制数 #ffffff
3.标题标签<h1></h1>...<h6></h6>：从h1到h6越来越小，自动换行
4.注释 <!--html的注释-->
5.列表标签
**<dt></dt> <dd></dd> <dl></dl>
**有序 <ol><li></li></ol>
**无序 <ul><li></li></ul>

6.图像标签
<img src="图片的路经" width="" height="" alt="">
** alt:浏览器兼容性很差

7.路径（相对路径）（*******）
**在同一级目录：直接写
**在下一层目录：images/1.jpg
**在上层目录：../

8.超链接标签（*******）
<a href="路径">显示在页面上的内容</a>
-打开方式 target="_self _break"
-默认是在当前页面打开

9.表格标签（*******）
<table>
<tr>
<td></td>
<td></td>
<th></th>  //加粗和居中
</tr>
</table>
-技巧：先数有多少行，数每行里面有多少个单元格

10.表单标签（*****今天最重要的标签******）
*<form></form>：
-action：提交到地址
-method：提交方式：常用的有两种 get和post
-get和post区别

-enctype属性（上传需要使用）
*输入项
*输入项里面写name属性
*普通输入项<input type="text" name="">
*密码：password
*单选框：radio
*复选框：checkbox
*下拉框
<select>
<option value=""></option>
</select>
*文本域
<textarea cols="" rows="" name=""></textarea>

*文件 file

*提交按钮 submit

*重置 reset
*使用图片提交 <input type="image" name="" src=""/>

*隐藏项 hidden
*普通按钮 button

11.div和span

12.框架标签（会用）

Javaweb学习笔记——（一）——————进入html的更多相关文章

  1. JavaWeb学习笔记总结 目录篇

    JavaWeb学习笔记一: XML解析 JavaWeb学习笔记二 Http协议和Tomcat服务器 JavaWeb学习笔记三 Servlet JavaWeb学习笔记四 request&resp ...

  2. javaweb学习笔记整理补课

    javaweb学习笔记整理补课 * JavaWeb: * 使用Java语言开发基于互联网的项目 * 软件架构: 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端 ...

  3. 【JAVAWEB学习笔记】06_jQuery基础

    接05的学习笔记. 四.使用JQ完成省市二级联动 1.需求分析 使用jquery完成省市二级联动 2.技术分析 2.1数组的遍历操作 方式一: $(function(){ // 全选/ 全不选 $(& ...

  4. javaweb学习笔记（二）

    一.javaweb学习是所需要的细节 1.Cookie的注意点 ① Cookie一旦创建,它的名称就不能更改,Cookie的值可以为任意值,创建后允许被修改. ② 关于Cookie中的setMaxAg ...

  5. Javaweb学习笔记（一）

    一.javaweb学习是所需要的细节 1.发送响应头相关的方法 1).addHeader()与setHeader()都是设置HTTP协议的响应头字段,区别是addHeader()方法可以增加同名的响应 ...

  6. JavaWeb学习笔记之Servlet（一）

    1. 引子: 当我们开始进入JavaWeb开发的学习时,我们就必须要和Servlet和HTTP这两个词进行打交道了,尤其是Servlet.即使到了后面使用JSP (我们知道JSP其本身就是一个Serv ...

  7. 【JAVAWEB学习笔记】09_MySQL多表&JDBC（包含MySQL数据库思维导图）

    今天晨读单词: order:订单constraint:(强制)约束foreign key:外键references:指向orderitem:订单项join:加入resourceBundle:资源捆绑c ...

  8. Javaweb学习笔记——（二十三）——————AJAX、XStream、JSON

    AJAX概述     1.什么是AJAX         ajax(Asynchronous JavaScript and xml) 翻译成中文就是"异步JavaScript和xml&quo ...

  9. Javaweb学习笔记——（二十一）——————过滤器

    过滤器     过滤器概述         1.什么是过滤器:             过滤器javaweb三大组件之一,它与Serlvet很相似,不过它过滤器是用来拦截请求的,而不是处理       ...

  10. Javaweb学习笔记——（十三）——————JSTL、JSTL核心标签库、自定义标签、有标签体的标签、带有属性的标签、MVC、Javaweb三层框架

    JSTLApache提供的标签库 jar包:jstl-1.2.jar,如果传MyEclipse,他会在我们导入jar包,无需自己导入,如果没有使用MyEclipse那么需要自行导入.--------- ...

随机推荐

  1. JQuery从入门到精通

    1.JQuery查找元素 例:将表格的单元格中件数和重量差异不为0的数据标红 代码如下: <style> .notice{ color: red; } .right{ color: gre ...

  2. delphi 通过事务插入数据

    orsn1.StartTransaction; try qry1.Sql.Clear; qry1.Sql.Text:=' select * from log '; qry1.Open; qry1.In ...

  3. 从网上整理的一些delphi字符串加密解密方法

    function Encode(Str: string): string; var //加密 TmpChr: AnsiChar; i, Len: integer; begin Result := St ...

  4. python之参数解包

    # 参数解包:将整个list当做参数传给函数 list = [1, 2, 4] def add_fn(a, b, c): return a + b + c sum = add_fn(*list) pr ...

  5. 51Nod 2006 飞行员配对(二分图最大匹配)

    第二次世界大战时期,英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2名飞行员,其中1名是英国飞行员,另1名是外籍飞行员.在众多的飞行员中, ...

  6. 说 AppbarLayout,如何理解可折叠 Toolbar 的定制

    Material Design 是个好东西,它的出现使得 Android 也能定制高颜值的界面,并且指导了如果实现复杂炫丽的交互效果,而 android Surpport Desgin 这个支持包就是 ...

  7. 自学Linux Shell4.3-处理数据文件sort grep gzip tar

    点击返回 自学Linux命令行与Shell脚本之路 4.3-处理数据文件sort grep gzip tar ls命令用于显示文件目录列表,和Windows系统下DOS命令dir类似.当执行ls命令时 ...

  8. 【转】用emWin进度条控件做个表盘控件,效果不错

    @2018-08-09 用emWin进度条控件做个表盘控件,效果不错

  9. 分别用postman和python做post请求接口功能测试

    前几天,在做一个post请求的接口功能测试的时候,发现数据始终无法入库, 认真加仔细检查了请求的url.方式.参数,均没有问题 找到技术确认,原来是需要传json格式数据 在头信息中加上类型,body ...

  10. Java核心技术-映射

    集是一个集合,它可以快速地查找现有的元素.但是,要查看一个元素,需要有要查找元素的精确副本.这不是一种非常通用的查找方式.通常,我们知道某些键的信息,并想要查找与之对应的元素.映射(map)数据结构就 ...