Web前端学习笔记:day01(HTML)
HTML
1.HTML概述
1.1 什么是HTML
HTML 是超文本标记语言，Hyper Text Markup Language
超文本：
有流媒体、图片、声音的存在
标记语言：
所有标记语言都由标签组成，有开始标签也有结束标签 ，例如： 、
主要用来展示页面，修饰数据
1.2 HTML基本元素
HTML标签
标签属性
引号样式
HTML特点:语法松散不严格,还有就是不区分大小写
2.HTML基本标签
段落标签 ：
可以把 HTML 文档分割为若干段落
标题字 ： 至
标题是通过 - 等标签进行定义的，定义最大标签， 定义最小标签
换行 ：
可插入一个简单的换行符,需要注意的是
标签是空标签 ,它没有结束标签
注释 ：
align 属性 ： 对齐方式属性
align = "center" 居中对齐
水平线 ：
3.HTML常用实体符号
空格
小于号 <
大于号 >
乘号 ×
除号 ÷
3.HTML表格
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>
实例二：行合并属性 ，列合并性属性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>
实例三：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)