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中append、prepend, before和after方法的区别

    1.prepend() .append()方法在被选元素的开头/结尾插入文本/HTML: 2.before().after()方法在被选元素之前/之后插入内容: append() & prep ...

  2. shell of leetcode

    1.Tenth Line How would you print just the 10th line of a file? For example, assume that file.txt has ...

  3. 如何为TreeView定义三层模板并实现数据绑定

    一直以来都想对TreeView定义多层模板,并实现数据绑定做一个总结,今天在这里做一个概述,我们常用的两层的TreeView绑定的话,我们首先修改TreeView的模板,这里我们使用的是级联的数据模板 ...

  4. Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 4. 函数

    什么样的程序员才是优秀的程序员?咪博士认为“慵懒”的程序员才是真正优秀的程序员.听起来不合逻辑?真正优秀的程序员知道如何高效地工作,而不是用不止境的加班来完成工作任务.函数便是程序员高效工作的利器之一 ...

  5. 使用vscode 编写Markdown文件

    markdown简单语法参考下面简单事例: # 一级标题 1. 有序列表1 >1. 有序列表1 >>- *test1* >>- **test2** >>- * ...

  6. Js更改样式导致hover效果消失

    [问题来源] 今天做单次倒计时,利用JS更改了button样式之后,再次点击时,发现hover效果消失. 原因: CSS的优先级问题导致 [解决方法] 利用!important提高hover的优先级 ...

  7. Java 8 forEach简单例子（转载）

    forEach and Map 1.1 通常这样遍历一个Map Map<String, Integer> items = new HashMap<>(); items.put( ...

  8. 洛谷P2054 [AHOI2005]洗牌（扩展欧几里德）

    洛谷题目传送门 来个正常的有证明的题解 我们不好来表示某时刻某一个位置是哪一张牌,但我们可以表示某时刻某一张牌在哪个位置. 设数列\(\{a_{i_j}\}\)表示\(i\)号牌经过\(j\)次洗牌后 ...

  9. NOI2018退役记

    NOI2018退役记 终于我也退役了-- Day0 高中毕业前最后一次坐飞机了--在机场干什么呢?当然是打元气打元气打元气.下飞机干什么呢?当然是打元气打元气打元气. 有接机服务,大巴上有个导游,又向 ...

  10. NO.10: 在operator=中处理 "自我赋值"

    1.确保当对象自我赋值时operator=有良好的行为,其中的技术包括 "来源对象" 和 "目标对象" 的地址,精心周到的语句顺序,以及“ copy and s ...