HTML 是超文本标记语言,Hyper Text Markup Language
超文本:
有流媒体、图片、声音的存在
标记语言:
所有标记语言都由标签组成,有开始标签也有结束标签 ,例如: 、
主要用来展示页面,修饰数据
HTML标签
标签属性
引号样式
HTML特点:语法松散不严格,还有就是不区分大小写
段落标签 :
可以把 HTML 文档分割为若干段落
标题字 : 至
标题是通过 - 等标签进行定义的,定义最大标签, 定义最小标签
换行 :
可插入一个简单的换行符,需要注意的是
标签是空标签 ,它没有结束标签
注释 :
align 属性 : 对齐方式属性
align = "center" 居中对齐
水平线 :
空格  
小于号 <
大于号 >
乘号 ×
除号 ÷
HTML中的table标签实现表格
表格的作用:
主要用作布局
先把表格画出来,然后往表格中放入数据
现在网页采用 table的比较少,采用 div 较多
表格常用元素
table标签 :
table标签的border属性 :表格的边框属性
table标签的align属性 :规定表格相对于周围元素的对齐方式
table标签的width属性 :
width=”100px” :表示整个表格的宽度为 100 像素
width=”50%” :表示整个表格占整个浏览器 50% 的宽度
table 标签的 height 属性
height=”200px” :表示整个表格的高度为 200 像素
height=”50%” :表示整个表格占浏览器 50% 的高度
tr,td标签:每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由 标签定义)。
tr标签 : 定义 HTML 表格中的行
td标签 : 定义 HTML 表格中的标准单元格
HTML表格有两类单元格
标准表头单元 th - 包含头部信息(由 th 元素创建)
th标签 : 表头单元 ,包含头部信息
标准单元 td - 包含数据(由 td 元素创建)
thead 、tbody 、tfoot 标签
thead标签:定义表格的表头,该标签用于组合 HTML 表格的表头内容
tbody标签:表格主体
tfood 标签:定义表格的页脚(脚注或表注)
单元格合并
rowspan 行合并属性:规定单元格可横跨的行数
colspan 列合并属性:规定单元格可横跨的列数
实例一:创建 table 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table</title>
</head>
<body>
<!--
border="1px" 设置表格的边框为1像素宽度。
width 宽度
height 高度
-->
<h1 align="center">Table</h1>
<hr color="red"/>
<table align="center" border="1px" width="500px" height="300px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
![Web前端学习笔记:day01(HTML)_第1张图片](http://img.e-com-net.com/image/info8/bdaa64030f13469b8cc6c94f5d8a9353.jpg)
实例二:行合并属性 ,列合并性属性rowspan ,colspan
<!doctype html>
<html>
<head>
<title>表格单元格合并,以及th标签</title>
</head>
<body>
<!--注意事项:
1、row合并的时候,删除“下面的”单元格
2、col合并的时候,对删除哪个没有要求。
-->
<table border="1px" width="50%">
<tr>
<!--
<td>员工编号</td>
<td>员工薪资</td>
<td>部门名称</td>
-->
<!-- th 标签也是单元格标签,比td多的是居中、加粗。-->
<th>员工编号</th>
<th>员工薪资</th>
<th>部门名称</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td rowspan="2">f</td>
</tr>
<tr>
<td colspan="2">d</td>
<!--
<td>f</td>
-->
</tr>
</table>
</body>
</html>
![Web前端学习笔记:day01(HTML)_第2张图片](http://img.e-com-net.com/image/info8/95369918ad354969aeb8ac96013279ac.png)
实例三:thead tbody tfoot标签
加上去对表格其实没有影响,只是为了让我们更好地维护表格
4.HTML背景色背景图片
bgcolor,background属性
bgcolor : 设置背景色
background : 设置背景图片
实例一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<!--
bgcolor : 设置背景色
background : 设置背景图片
以上的设置都是对背景进行设置。
-->
<body bgcolor="red" background="img/bd_logo1.png">
</body>
</html>
5.HTML图片
图片相关基本元素
1、设置图片宽度和高度的时候,只设置宽度,高度会进行等比例缩放。
2、img标签就是图片标签
3、src属性是图片的路径
4、width设置宽度,height设置高度
5、title设置鼠标悬停时显示的信息。
6、alt设置图片加载失败时显示的提示信息。
实例一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片img</title>
</head>
<body>
<!--
1、设置图片宽度和高度的时候,只设置宽度,高度会进行等比例缩放。
2、img标签就是图片标签
3、src属性是图片的路径
4、width设置宽度,height设置高度
5、title设置鼠标悬停时显示的信息。
6、alt设置图片加载失败时显示的提示信息。
-->
<img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"/>
<img src="img/bd_logo1.png" width="100px" title="我是百度图片哦" alt="图片找不到哦!"></img>
<br><br><br>
<img src="img/bd_logo1.png" />
</body>
</html>
6.HTML超链接
超链接的特点
1、有下划线
2、鼠标停留在超链接上面显示小手形状。
3、点击超链接之后还能跳转页面。
超链接的作用
超链接的作用:
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据(请求:request)
服务器向浏览器发送数据(响应:response)
B/S结构的系统:每一个请求都会对应一个响应。
用户点击超链接和用户在浏览器地址栏上直接输入URL,有什么区别?
本质上没有区别,都是向服务器发送请求。
从操作上来讲,超链接使用更方便。
超链接相关元素
1、a标签就是超链接标签
2、href:hot references 热引用
href属性后面一定是一个资源的地址。
href后面的路径可以是绝对路径也可以是相对路径,可以是网络中某个资源的路径,也可以是本地资源的路径。
3、超链接有一个target属性:
可取值:
_blank : 新窗口
_self : 当前窗口(默认就是这种方式。)
_top : 顶级窗口
_parent : 父窗口
实例一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超链接 热链接</title>
</head>
<body>
<!--
超链接的特点:
有下划线
鼠标停留在超链接上面显示小手形状。
点击超链接之后还能跳转页面。
-->
<a href="http://www.baidu.com">百度</a>
<a href="http://news.baidu.com/">百度新闻</a>
<a href="http://www.jd.com/">京东商城</a>
<a href="http://www.tmall.com/">天猫</a>
<a href="http://www.126.com/">126邮箱</a>
<br><br>
<!--
href:hot references 热引用
href属性后面一定是一个资源的地址。
href后面的路径可以是绝对路径也可以是相对路径,可以是网络中某个资源的路径,也可以是本地资源的路径。
-->
<a href="007-背景颜色和背景图片.html">007</a>
<!--图片超链接-->
<a href="https://www.hao123.com/">
<img src="img/hao123.png" width="120px"/>
</a>
<!--
超链接有一个target属性:
可取值:
_blank : 新窗口
_self : 当前窗口(默认就是这种方式。)
_top : 顶级窗口
_parent : 父窗口
-->
<a href="https://www.hao123.com/" target="_self">
<img src="img/hao123.png" width="120px"/>
</a>
</body>
</html>
<!--
超链接的作用:
通过超链接可以从浏览器向服务器发送请求。
浏览器向服务器发送数据(请求:request)
服务器向浏览器发送数据(响应:response)
B/S结构的系统:每一个请求都会对应一个响应。
用户点击超链接和用户在浏览器地址栏上直接输入URL,有什么区别?
本质上没有区别,都是向服务器发送请求。
从操作上来讲,超链接使用更方便。
-->
7.列表
无序列表
1、
2、type属性可选值:
disc 默认值 ,实心圆
circle 空心圆
square 实心方块
有序列表
1、
2、type属性可选值:
大小写字母
阿拉伯数字
I、II、III、IV、V
实例一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol type="I">
<li>水果
<ol type="a">
<li>苹果</li>
<li>西瓜</li>
<li>桃子</li>
</ol>
</li>
<li>蔬菜
<ol>
<li>西红柿</li>
</ol>
</li>
<li>甜点</li>
</ol>
<!--无序列表-->
<ul type="circle">
<li>中国
<ul type="square">
<li>北京
<ul type="disc">
<li>东城区</li>
<li>西城区</li>
<li>海淀区</li>
<li>朝阳区</li>
</ul>
</li>
<li>天津</li>
<li>上海</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
</body>
</html>
8.表单
表单基本信息
1、表单有什么用?
收集用户信息。表单展现之后,用户填写表单,点击提交按钮提交数据给服务器。
2、怎么画一个表单?
使用form标签画表单。
3、一个网页当中可以有多个表单form。
4、表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址:
action属性用来指定数据提交给哪个服务器。
action属性和超链接中的href属性一样。都可以向服务器发送请求(request)
5、method 属性:用来设置表单提交 数据 的方式:get 、post
get 方式:为默认提交方式,提交的数据会显示在地址栏中
post 方式:提交的数据不会在地址栏中显示,相对安全
6、http://192.168.111.3:8080/oa/save 这是请求路径,表单提交数据最终提交给:
192.168.111.3机器上的8080端口对应的软件。
7、表单是以什么格式提交数据给服务器的?
http://localhost:8080/jd/login?username=abc&userpwd=111
格式:action?name=value&name=value&name=value&name=value&name=value...
W3C的HTTP协议规定的,必须以这种格式提交给服务器。
重点强调:表单项写了name属性的,一律会提交给服务器。不想提交这一项,就不要写name属性。
文本框和密码框的value不需要程序员指定,用户输入什么value就是什么。
当name没有写的时候,该项不会提交给服务器。但是当value没有写的时候,value的默认值是空字符串"",会将空字符串提交给服务器。java代码得到的是:String username = "";
表单下常用标签信息
1、input 标签
1.1、input type 类型为 text: 文本输入域
1.2、 input type 类型为 password: 密码输入框
1.3、input type 类型为 radio: 单选按钮
1.4、input type 类型为 checkbox :多选按钮
1.5、input type 类型为 submit :表单提交按钮
1.6、input type 类型为 button: 普通按钮
1.7、input type 类型为 reset: 表单重置按钮
1.8 input type 类型为 file :文件上传组件
1.9 input type 类型为 hidden :隐藏控件
在浏览器上看不到,但提交表单的时候会提交给服务器
1.10只读控件 readonly :只能看不能改, 数据 也会提交给服务器
1.11 无效控件 disabled : 只能看不能改,数据不会提交给服务器
1.12、input 控件 size 属 性: 设置文本框的 可视 长度
1.13、 input 控件 maxlength 属性: 设置文本框中可编写的长度
2、下拉列表标签:
3、 文本域标签
实例一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单form</title>
</head>
<body>
<!--
1、表单有什么用?
收集用户信息。表单展现之后,用户填写表单,点击提交按钮提交数据给服务器。
2、怎么画一个表单?
使用form标签画表单。
3、一个网页当中可以有多个表单form。
4、表单最终是需要提交数据给服务器的,form标签有一个action属性,这个属性用来指定服务器地址:
action属性用来指定数据提交给哪个服务器。
action属性和超链接中的href属性一样。都可以向服务器发送请求(request)
5、http://192.168.111.3:8080/oa/save 这是请求路径,表单提交数据最终提交给:
192.168.111.3机器上的8080端口对应的软件。
-->
<form action="http://192.168.111.3:8080/oa/save">
<!-- 画一个提交按钮,这个按钮可以提交表单-->
<!-- 画按钮可以使用input输入域,type="submit"的时候表示该按钮是一个提交按钮,具有提交表单的能力。-->
<!-- 对于按钮来说,按钮的value属性用来指定按钮上显示的文本信息。-->
<input type="submit" value="登录"/>
<!--这是一个普通按钮,不具备提交表单的能力。-->
<input type="button" value="设置按钮上显示的文本"/>
</form>
<a href="http://www.baidu.com">百度</a>
<!--这个按钮和普通的超链接没什么太大的区别。(超链接和表单都可以向服务器发送请求,只不过表单发送请求的同时可以携带数据。)-->
<form action="http://www.baidu.com">
<input type="submit" value="百度" />
</form>
<br>
<br>
<form action="http://localhost:8080/jd/login">
用户名<input type="text" /><br>
密码<input type="password" /><br>
<input type="submit" value="登录" />
</form>
<!--
表单是以什么格式提交数据给服务器的?
http://localhost:8080/jd/login?username=abc&userpwd=111
格式:action?name=value&name=value&name=value&name=value&name=value...
W3C的HTTP协议规定的,必须以这种格式提交给服务器。
重点强调:表单项写了name属性的,一律会提交给服务器。不想提交这一项,就不要写name属性。
文本框和密码框的value不需要程序员指定,用户输入什么value就是什么。
当name没有写的时候,该项不会提交给服务器。
但是当value没有写的时候,value的默认值是空字符串"",会将空字符串提交给服务器。java代码得到的是:String username = "";
-->
<form action="http://localhost:8080/jd/login">
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username" /></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userpwd" /></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录" />
<input type="reset" value="清空" />
</td>
</tr>
</table>
</form>
<!--submit必须放到form标签内部-->
<input type="submit" value="登录" />
<!--必须放到form标签内部-->
<input type="reset" value="清空" />
<form></form>
</body>
</html>
9.HTML标签的id属性
1、HTML标签:
在HTML页面中任何一个标签都可以看做一个节点
整个HTML页面可以看作是节点的集合
整个HTML页面也可以看作一棵树
这棵树的根是, 这个根节点里有两个子节点和
任何一个节点都有id属性,id在同一个页面中不能重复,id是这个节点的身份证号,是这个节点的唯一标识
2、id属性的作用
任何一个标签都有id属性
在同一个页面中id属性的值 不能重复 ,是唯一标识
通过节点的 id 获取该节点对象,然后对这个节点对象进行增删改的操作从而达到页面的动态效果
10.HTML中的div和span
1、div和span是什么?有什么用?
div和span都可以称为“图层”
图层的作用是为了保证页面可以灵活的布局
图层就是一个一个的盒子,div嵌套div就是盒子套盒子
div和span是可以定位的,只要定下div的左上角的x轴和y轴坐标即可。
2、其实最早的网页是采用table进行布局的,但是table不灵活,太死板。
现代的网页开发中div布局使用最多,几乎很少使用table进行布局了。
3、div和span的区别?
div独自占用一行(默认情况下)
span不会独自占用一行。
你可能感兴趣的:(Web)