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. CSS 选择器的兼容性

    参考网站 http://blog.csdn.net/yume_sola/article/details/70215695 http://www.youdiancms.com/jianrong/614. ...

  2. 在CentOS 7中搭建Git服务器

    环境说明 - CentOS 7.x 最小安装 - 配置网络连接 1. 安装Git及创建用户 # 安装Git $ yum install git # 创建一个git用户组和用户,用来运行git服务 $ ...

  3. K3CLOUD替代方案

    路径 [生产制造]->[工程数据]->[替代方案]->[替代方案] 应用场景 实际业务处理中,由于订单取消.工程变更.客户需求变化.预测或计划不准确等原因造成原材料库存积压.呆滞,使 ...

  4. 如何使用git在github上开发的时候和别人在别人仓库上进行协作编程，最后再统一提交

    因为总是忘记,所以记录一下. 这里首先需要添加你需要操作对象的仓库到你的远程仓库并给个名字,才能进行操作.这里我用我同事的邮箱做比喻.(如果对方为私有仓库,你必须要有同样的权限) 使用命令 git r ...

  5. Maven 3-Maven依赖版本冲突的分析及解决小结

    我自己遇到了一个问题: 我需要使用一个api,这个api已经引入包:slf4j-log4j12 所以,在自己的pom中,如果引入了这个包,需要exclude掉: 因为在pom.xml中查询是找不到的, ...

  6. Redis报错总结

    MISCONF Redis is configured to save RDB snapshots MISCONF Redis is configured to save RDB snapshots, ...

  7. day27 多态 多继承 接口类 抽象类

    简单来说:多态就是指一个相同的方法名在不同的对象调用的时候实现一样或者不一样的方法实例1: 动物类有个方法 "嚎叫" 狗类也有个方法 "嚎叫" 猫类继承了动物类 ...

  8. 23个Python爬虫开源项目代码，包含微信、淘宝、豆瓣、知乎、微博等

    今天为大家整理了23个Python爬虫项目.整理的原因是,爬虫入门简单快速,也非常适合新入门的小伙伴培养信心,所有链接指向GitHub,微信不能直接打开,老规矩,可以用电脑打开. 关注公众号「Pyth ...

  9. 自学Linux Shell16.2-函数中使用变量

    点击返回 自学Linux命令行与Shell脚本之路 16.2-函数中使用变量 1. 向函数传递参数 函数可以使用标准参数环境变量来表示命令行传递给函数的参数.例如,     函数名在变量$0中定义,函 ...

  10. node.js安装后出现环境变量错误找不到node

    安装node.js和bower之后,运行bower出现/usr/bin/env: 'node': No such file or directory错误 这个错误是由于安装完node.js环境变量并没 ...