1，html简介
*什么是html
-HyperText Markup Language:超文本标记语言，网页语言
**超文本：超出文本的范畴，使用html可以轻松实现这样的操作
**标记：HTML所有的操作都是通过标记实现的，标记就是标签,<标签名称>
**网页语言：
*第一个html程序。
- 创建java文件.java
**先编译，然后再运行（jvm）
- html后缀是 .html .htm
**直接通过浏览器就可以运行
- 代码
** 这是我的<font size = "10" color = "green">第一个程序！</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></html>）
网页中有很多数据可能需要不同的显示效果，这个时候需要使用标签吧操作的数据包起来（封装起来），
通过修改标签的属性值可以实现标签内数据样式的变化。
一个标签相当于一个容器，想要修改容器内数据的样式，只需要修改容器的属性值，就可以实现容器内数据样式的变化。
html中常用的标签
2.文字标签和注释标签
*文字标签：修改文字的样式
- 属性：
*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>：是网页的开始！
- 需要对特殊字符进行转义
* < <
* > >
* 空格 <!-- 一个空格一个 -->
* & &
4.列表标签
- 比如现在显示这样的效果
传智播客
财务部
学工部
人事部
**<dl></dl>:表示列表的范围
**在dl里面 <dt></dt>:上层内容
**在dl里面 <dd></dd>:下层内容
- 代码
<dl>
<dt>传智播客</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>
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
-----------------------------
<ol type = "a">
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ol>
------------------------------
<ol type = "i">
<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>
-------------------------
<ul type = "circle"><!-- 空心圆 -->
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>
-------------------------
<ul type = "square"><!-- 实心方块 -->
<li>财务部</li>
<li>学工部</li>
<li>人事部</li>
</ul>
-------------------------
5.图像标签（******************重点<html></html>）
*<img src = "图片的路径"/>
-src:图片的路径
- width:图片的宽度
- height:图片的高度
- alt:图片上显示的文字，把鼠标移动到图片上，停留片刻显示内容
**有些浏览器下不显示（没有效果）
6.路径的介绍（***********重点）
*分类：两类
** 绝对路径
- E:\JavaScript+html+Css_Practise\day01\code\1.jpg
- http://www.baidu.com/b.jpg
** 相对路径
- 一个文件相对于另外一个文件的位置
- 三种：
** html文件和图片在一个路径下，可以直接写文件名称
- <img src = "1.jpg" alt = "这是一个美女"/>
** 图片在html的下层目录
在html文件中，使用img文件夹下面的10.jpg
-- E:\JavaScript+html+Css_Practise\day01\code\ 4.html
-- E:\JavaScript+html+Css_Practise\day01\code\ img\10.jpg
*** 在html中使用图片 4.html和img在一个路径下
img\10.jpg
** 图片在html文件的上层目录
-- E:\JavaScript+html+Css_Practise\day01\ 3.jpg
-- E:\JavaScript+html+Css_Practise\day01\ code\4.html
***html文件所在的目录和图片是一个目录
**图片和html文件是什么关系？
- 图片在html的所在目录的上层目录day01
** 怎样表示上层路径 ../
- ../3.jpg
7.案例一：列表标签的使用
8.超链接标签（**************重点）
* 链接资源（*****）
- <a href = "连接到资源的路径">显示在页面上的内容</a>
** href:链接的资源的地址
** target:设置打开的方式，默认是在当前页面打开
-- _blank:在一个新的窗口打开
-- _self:在当前页面打开（默认）
- 当超链接不需要到任何的地址 在href里面加#
-<a href = "#">这是一个超链接1</a>
* 定位资源
** 如果想要定位资源：定义一个位置
<a name = "top">顶部</a>
** 回到这个位置
<a href = "#top">回到顶部</a>
** 引入一个标签 pre:原样输出
9.表格标签（********重要内容**********<html></html>）
<table></table>:表格的范围。属性：border,bordercolor,cellspacing,width,height
<tr></tr>:表示一行。属性：align:left center right
<td></td>:表示一行中的一个单元格。属性：align:left center right
* 可以对数据进行格式化，是数据显示更加清晰
* <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 = "200"></table>
* 画图分析表格的写法
- 首先定义一个表格的范围使用<table></table>
- 定义一行使用<tr></tr>
- 定义一个单元格使用<td></td>(有时候单元格还可以使用<th></th>：效果是加粗居中)
** 操作技巧
- 首先数有多少行，数每行里面有多少个单元格
** 表格的标题
<caption></caption>
** 合并单元格
- rowspan:跨行
- colspan:跨列
10.表单标签
* 可以提交数据到开心网的服务器，这个过程可以使用表单标签实现
* <form></form>:定义一个表单的范围
- 属性
** action：提交到地址，默认提交到当前的页面
** method：表单提交方式
- 常用的有两种 get 和 post,默认是get请求
** 面试题目：get 和 post区别
1.get请求地址栏会携带提交的数据，post不会携带（请求体里面。在第七天时候讲http协议时候）；
2.get请求安全级别较低，post较高；
3.get请求数据大小的限制，post没有限制。
** enctype:一盘请求下不需要这个属性，做文件上传时候需要
** 输入项：可以输入内容或者选择内容的部分
- 大部分的输入项 使用 <input type = "输入项的类型"/>
***** 在输入项里面需要一个name属性。
*** 普通输入项：<input type = "text"/>
*** 密码输入项：<input type = "password"/>
*** 单选输入项：<input type = "radio"/>
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
**** 实现默认选中属性
-- checked = "checked"
*** 复选输入项：<input type = "checkbox">
- 在里面需要属性 name
- name的属性值必须要相同
- 必须有一个value值
**** 实现默认选中属性
-- checked = "checked"
*** 文件输入项（在后面上传时候用到）
- <input type = "file"/>
*** 下拉输入项（不是在input标签里面的）
<select>
<option value = "1991">1991</option>
<option value = "1992">1992</option>
<option value = "1993">1993</option>
</select>
- 默认选择
*** selected = "selected"
*** 文本域
<textarea cols = "10" rows = "10"></textarea>
*** 隐藏项（不会显示在页面上，但是存在于html代码里面）
<input type = "hidden"/>
*** 提交按钮
<input type = "submit"/>
<input type = "submit"/ value = "注册">
file:///E:/JavaScript+html+Css_Practise/day01/code/10-表单标签1.html
?sex=on&love=on&birth=1992&tex=312&hid=
file:///E:/JavaScript+html+Css_Practise/day01/code/10-%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE1.html
?phone=123344&pwd=1234&sex=nan&love=y&love=p&love=l&birth=&tex=123456&hid=
** ?输入项name的值 = 输入的值&
** 参数类似于key-value形式
*** 使用图片提交
<input type = "image" src = "图片路径"/>
*** 重置按钮
<input type = "reset "/>
*** 普通按钮（和明天讲JS在一起使用）
<input type = "button" value = ""/>
11.案列，使用表单标签实现注册页面，具体案例链接：https://blog.csdn.net/qq_43751200/article/details/105667484
- 使用表格实现页面效果;
- 超链接不想要它的效果<a href = "#">XXX</a>;
- 如果表格里面的单元格没有内容，使用空格作为占位符
- 使用图片提交表单<input type = "image" src = "图片的路径">；
- 使用图片的时候<img src = "图片路径">
12.html中的其他的常用标签的使用
b:加粗
s:删除线
u:下划线
i:斜体
pre:原样输出
sub:下标
sup:上标
p:段落标签 比br标签多一行
==明天css时候一直使用
div:自动换行
span:在一行显示
13.html的头标签的使用
* html两部分组成 head 和 body
** 在head里面的标签就是头标签
** title标签：设置页面的一些相关内容
** <meta>标签：设置页面的一些相关内容（单个出现的的）
- <meta name = "keyword" content = "毕姥爷，熊出没，刘翔">
<meta heep-equiv = "refresh" content = "3"; url = "hello.html"/>
** base标签：设置超链接的基本设置
- 可以统一设置超链接的打开方式
<base target = "_blank">
** link标签：引入外部文件
- 利用link标签引入css文件
14.框架标签的使用
* <frameset>
- rows:按照行进行划分
** <frameset rows = "80,*">
- cols:按照列进行划分
** <frameset clos = "80,*">
*<frame>
- 具体显示的页面
- <frame name = "lower_left（自定义名字）" src = "a.html">
*** 使用框架标签的时候，不能写在body里面，使用了框架标签，需要把body去掉
* <frameset rows = "80,*"> //把页面划分成上下两部分
<frame name = "top" src = "a.html"> //上面的页面
<frameset cols = "80,*"> //把下面部分划分成左右两部分
<frame name = "left" src = "b.html">//左边的页面
<frame name = "right" src = "c.html">//右面的页面
</frameset>
<frameset>
* 如果在左边的页面有超链接，想让内容显示在右边的页面中
- 设置超链接里面的属性 target值设置成名称
- <a href = "hello.html" target = "right">超链接1</a>
JavaScript+html+Css学习day01
猜你喜欢
转载自blog.csdn.net/qq_43751200/article/details/105658004
今日推荐
周排行