HTML
文章目录
- HTML
- 前言
- 01:我的第一个html
- 02:html的基本标签
- 03:html的实体符号
- 04:html的表格
- 05:html表格的单元格合并/th标签
- 06:html-thead tbody tfoot
- 07:html背景色和背景图片
- 08:html图片img
- 09:html超链接
- 10:html的列表
- 11:html-form表单初步
- 12:html用户注册表单
- 13:html下拉列表支持多选
- 14:html-file控件
- 15:html-hidden隐藏域
- 16:html-readonly-disabled
- 17:html-input控件的manxlength属性
- 18:html-元素的id属性
- 19:html-div-span
前言
此贴为个人学习笔记, 学习视频:https://www.bilibili.com/video/BV11t411K74Q?p=101:我的第一个html
<!--
1.html的注释
2.加上一下代码的第一行表示html5语法,去掉就表示html4.0
3.html不区分大小写,语法松散不严格
-->
<!doctype html>
<!--根-->
<html>
<!--头-->
<head>
<!--网页标题-->
<title>网页的标题</title>
</head>
<!--体-->
<body>
网页的主体内容
</body>
</html>
02:html的基本标签
<!doctype html>
<HTML>
<head>
<title>html的标签</title>
</head>
<body>
<!--段落标记-->
<p>....</p><p>...</p>
<!--标题字:是html预留的格式,和Word中的标题字相同h1-h6-->
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
<!--换行标记,br标签是一个独目标记-->
hello
world!
hello world!<br>
<!--横线,独目标记-->
<hr>
<!--color和width都是hr标签的属性-->
<hr color="red" width="50%">
<!--语法太·松散了-->
<hr color="green" width=50%>
<hr color='green' width="30%">
<!--预留格式-->
<pre>
acbdefg hijklmn
opqrst uvwxyz
</pre>
<del>删除字</del>
<ins>插入字</ins>
<b>粗体字</b>
<i>斜体字</i>
10<sup>2</sup><!--右上角-->
10<sub>m</sub><!--右下角-->
<!--字体标签-->
<font color="red" size="20">字体标签</font>
</body>
</HTML>
03:html的实体符号
<!doctype html>
<HTML>
<head>
<title>html的实体符号</title>
</head>
<body>
<!--实体符号特点是:以&开始,以;结束-->
<!--<是小于号 …>是大于号-->
b<a>c
<br>
<!-- 是空格-->
a b c
<br>
a b c
a b c
</body>
</HTML>
04:html的表格
<!doctype html>
<HTML>
<head>
<title>html的表格</title>
</head>
<body>
<!--
border="1px"设置表格的边框为1像素宽度
width="60%",宽度 %可使表格随窗口同比例缩放
height 高度
-->
<br><br><br>
<center><h1 >表单</h1><center>
<hr>
<table align="center" border=“1px” width="60%" height=“150”><!--表-->
<!--align对齐方式-->
<!--align="center">-居中-->
<tr><!--行-->
<td>a</td><!--列-->
<td>b</td>
<td>c</td>
</tr>
<tr align="center">
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td align="center">z</td>
</tr>
</table>
</body>
</HTML>
05:html表格的单元格合并/th标签
<!doctype html>
<html>
<head>
<title>html表格的单元格合并/th标签</title>
</head>
<body>
L<!--
1.row合并的时候,删除相邻“下面的”单元格
2.col合并的时候,删除相邻哪一个都可以
-->
<table border="1px" width="50%">
<tr>
<!--th标签也是单元格标签,比td多的是居中加粗-->
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">69</td>
</tr>
<tr>
<td colspan="2">78</td>
<!--
<td>8</td>
-->
<!--
<td>9</td>
-->
</tr>
</table>
</body>
</html>
06:html-thead tbody tfoot
<!doctype html>
<html>
<head>
<title>html-thead tbody tfoot</title>
<!--在table中不是必须的,只是这样做便于后期的JS代码的编写-->
</head>
<body>
<table border="1px" width="50%">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">69</td>
</tr>
<tr>
<td colspan="2">78</td>
</tr>
</tbody>
<tfoot>
<!--
<tr>
<td colspan="2">78</td>
</tr>
-->
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tfoot>
</table>
</body>
</html>
07:html背景色和背景图片
<!doctype html>
<html>
<head>
<!--这行代码的作用是告诉浏览器采用哪一种字符集打开当前页面。
注意:并不是设置当前页面的字符编码方式-->
<meta charset="utf-8">
<title>html背景色和背景图片</title>
</head>
<!--
bgcolor:设置背景色
background:设置背景图片
-->
<body bgcolor="blue" background="1.jpg">
</body>
</html>
08:html图片img
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html图片img</title>
</head>
<body>
<!--
1.设置图片宽度和高度时,只设置宽度,高度会进行等比例缩放
2.img标签就是图片标签
3.src属性是图片的路径
4.width设置宽度,height设置高度
5.title设置鼠标悬停时显示的信息
6.alt设置图片加载失败时显示的提示信息
-->
<img src="1.jpg" width="100px" height="200px" title="图片1" alt="图片找不到哦"/>
<br><br><br>
<img src="1.jpg"></img>
<!--
若开始标签和结束标签之间没有内容
<img...></img> 可写作 <img.../>
-->
</body>
</html>
09:html超链接
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html超链接</title>
</head>
<body>
<!--
超链接的特点:
有下划线
鼠标停留在超链接上显示小手形状
点击超链接之后能跳转页面
-->
<a href="http://www.baidu.com/">百度</a>
<a hrdf="09html超链接.html">超链接</a>
<!--
href: hot references 热引用
href属性后面一定是一个资源的地址
href后面的路径可以是绝对路径也可以是相对路径
可以是网络中某个资源或本地资源的路径
-->
<!--图片超链接-->
<a href ="http://www.baidu.com/">
<img src="baidu.png" width="100"/>
</a>
<!--
超链接的target属性
可取值:
_blank 新窗口
_self 当前窗口(默认)
_top 顶级窗口
_parent 父窗口
-->
<a href="http://www.baidu.com/" target="_self">百度</a>
<!--
超链接的作用:
通过超链接可以从浏览器向服务器发送请求
浏览器向服务器发送数据(请求:request)
服务器向浏览器发送数据(响应:response)
B/S结构的系统,每一个请求都会对应一个响应
B--请求--S S--响应--B
用户点击超链接和用户在浏览器地址栏上直接输入URL
本质上没有区别,都是向服务器发送请求
操作上,超链接使用更方便
-->
</body>
</html>
10:html的列表
<!doctype html>
<html>
<head>
<title>html的列表</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>
11:html-form表单初步
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html-form表单初步</title>
</head>
<body>
<!--
1.表单的作用
收集用户信息,表单展现之后,用户填写表单,点击提交按钮提交数据给服务器
2.用form标签实现表单
3.一个网页当中可以有多个表单form
4.表单最终需要提交数据给服务器,用form中的action属性指定服务器地址
action属性用来指定数据提交给哪个服务器
action属性和超链接中的href属性一样,都可以向服务器发送请求
5.http://192.168.111.3:8080/oa/save 这是请求路径,表单提交数据最终提交给
192.168.111.3机器上的端口对应的软件
-->
<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>
<form action ="http://localhost:8080/oa/login">
用户名<input tyoe ="text"/>
密码<input type="passworld"/>
<input type="submit" value="登录"/>
</form>
<br><br>
<!--
表单是以什么格式提交数据的给服务器的
http://localhost:8080/oa/login?username=aaa&userpwd=aaa
格式:action?name=value&name=value&name=value&name=value...
HTTP协议规定,必须以此格式提交给服务器
重点强调,表单填写了name属性的,一律会提交给服务器,不想提交这一项,就不要写name属性
文本框和密码框的value不需要程序员指定,用户输入什么value就是什么
-->
<form action="http://localhost:8080/oa/login">
<table>
<tr>
<td>用户名</td>
<td><input type="txet" name="username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="passworld" name="userpwd"/></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" value="登录" name="hh"/>
<input type="reset" value="清空" />
</td>
</tr>
</table>
</form>
<br>
<!--reset,submit必须放到form标签内部-->
<input type="submit" value="登录"/>
<input type="reset" value="清空"/>
</body>
</html>
12:html用户注册表单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html用户注册表单</title>
</head>
<body>
<form action="http://localhost:8080/oa/register" method="post">
<!--
form表单的method属性
不指定时,默认get
get:采用get方式提交的时候,用户提交的信息会显示到浏览的地址栏
post:提交的用户名和密码不会显示到浏览器的地址栏
当用户提交的信息中含有敏感信息,例如:密码,建议采用post方式提交
post提交的时候提交的数据格式和get一样,只不过不在地址栏显示
-->
用户名
<input type="text" name="username"/><br><br>
密码
<input type="text" name="passworld"/><br><br>
确认密码<!--无需提交-->
<input type="text" /><br><br>
性别<!--Name相同只能选一个,不同可多选,单选按钮的value必须手动指定-->
<input type="radio" name="sex" value="0"/>男
<input type="radio"name="sex" value="1" checked/>女<!--checked默认选中-->
<br><br>
兴趣爱好
<input type="checkbox" name="interest" value="singing"/>唱歌
<input type="checkbox" name="interest" value="dancing"/>跳舞
<input type="checkbox" name="interest" value="writing" checked/>写作
<br><br>
学历
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option><!--默认选中-->
<option value="ss">硕士</option>
</select><br><br>
简介<br><!--文本域,文本域没有value属性,用户填写的内容就是value-->
<textarea rows="20" cols="80" name="introduction"></textarea><br><br>
<input type="submit" value="注册"/>
<input type="reset" value="清空"/>
<!--
超链接也可以提交数据给服务器,但是提交的数据都是固定不变的
超链接是get请求,不是post请求
<a href="http://localhost:8080/oa/register?username=a&passworld=a&sex=1&interest=writing&grade=bk&introduction=a">提交</a>
-->
</body>
</html>
13:html下拉列表支持多选
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html下拉列表支持多选</title>
</head>
<body>
<!--multiple="multiple"支持多选
size设置显示的条目数量
-->
<select multiple="multiple" size="2">
<option>江苏省</option>
<option>浙江省</option>
<option>山东省</option>
<option>河北省</option>
</select>
</body>
</html>
14:html-file控件
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html-file控件</title>
</head>
<body>
<!--file控件,文件上传专用-->
<input type="file"/>
</body>
</html>
15:html-hidden隐藏域
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html-hidden隐藏域</title>
</head>
<body>
<form action="http://localhost:8080/oa/save">
<!--hidden 隐藏域,网页上看不到,但是表单提交的时候数据会自动提交给服务器-->
<input type="hidden" name="userid" value="111"/>
用户代码<input type="text" name="usercode"/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
16:html-readonly-disabled
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html-readonly-disabled</title>
</head>
<body>
<!--
readonly和disabled相同点,都是只读不能修改
但readonly可以提交给服务器,disabled数据不会提交(即使有name属性也不会提交)
-->
<form action="http://localhost:8080/oa/save">
用户代码<input type="text" name="usercode" value="110" readonly />
<br>
用户代码<input type="text" name="usercode"value="zhangsan" disabled />
<input type="submit" value="提交"/>
</form>
</body>
</html>
17:html-input控件的manxlength属性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html-input控件的manxlength属性</title>
</head>
<body>
<!--
maxlength 设置文本框中可输入的字符数量
-->
<input type="text" maxlength="3"/>
</body>
</html>
18:html-元素的id属性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html-元素的id属性</title>
</head>
<body>
<!--
1.在html文档当中,任何元素(节点)都有id属性,
id属性是该节点的唯一标识,所以在同一个HTML文档当中id值不能重复
2.注意,表单提交数据的时候,只和name有关系,和id无关
3.id有什么用
JavaScript语音,可以对html文档当中的任意节点进行增删改操作
增删改之前需要先获取这个节点,通常我们通过id来获取节点对象
id的存在让我们获取元素(节点)更方便
4.html文档是一棵树,树上有很多节点,每一个节点都有唯一的id
JavaScript主要就是对这棵DOM(document)树上的节点进行增删改
-->
<form id="myform">
<input type="text" id="username" name="username"/>
<input type="password" id="userpwd" name="userpwd"/>
<!--id就是节点的“身份证号码”,不能重复-->
</form>
<input type="text" maxlength="3"/>
</body>
</html>
19:html-div-span
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html-div-span</title>
</head>
<body>
<!--
1.div和span是什么?有什么用?
*div和span都可以称为"图层"
*图层的作用是为了保证页面可以灵活的布局
*图层就是一个一个的盒子,div嵌套div就是盒子套盒子
*div和span是可以定位的,只要定下div的左上角的x轴和y轴坐标即可
2.其实最早的网页是采用table进行布局的,但是table不灵活,太死板
现代的网页开发中div布局使用最多,几乎很少使用table进行布局了
3.div和span的区别
div独自占用一行(默认情况下)
span不会独自占用一行
-->
<div id="div1">div1</div>
<div id="div2">div2</div>
<span id="span1">span1</span>
<span id="span2">span2</span>
<div id="div3">
<div>
<div></div><!--div嵌套-->
</div>
</div>
</body>
</html>