通过学习获得知识
最编程
2024-05-07 13:11:38
...
HTML
基本标签
<html>
<head>
<meta charset="GBK">
<title>
基本标签
</title>
</head>
<body>
<!--段落标记-->
<p>《西游记》是中国古代第一部浪漫主义章回体长篇神魔小说。</p>
<p>现存明刊百回本《西游记》均无作者署名，作者是明代吴承恩。</p>
<p>全书主要描写了孙悟空出世及大闹天宫后，遇见了唐僧、猪八戒、沙僧和白龙马，西行取经，</p>
<p>一路上历经艰险，降妖除魔，经历了九九八十一难，终于到达西天见到如来佛祖</p>
<!--标题字-->
<h1>标题字</h1>
<h2>标题字</h3>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
<!--换行标记-->
<!--长了一直眼镜,独目标记-->
Hello<br> World!
<!--水平线-->
<hr>
<!--color是属性名,red是属性值-->
<!--color后面可以是单引号,也可以是双引号-->
<hr color="red">
<!--预留格式-->
<pre>
for(int i = 0;i < 100; i++){
System.out.println("i = " + i);
}
</pre>
<!--粗体字-->
<b>粗体字</b>
<!--斜体字-->
<i>斜体字</i>
<!--插入字-->
<ins>插入字</ins>
<!--删除字-->
<del>删除字</del>
<!--右上角加字-->
10<sup>2</sup>
<!--右下角加字-->
10<sub>2</sub>
<!--font字体标签-->
<font color="red" aria-setsize="12">hello World</font>
</body>
</html>
实体符号
<!--凡是HTML页面中第一行是以下代码的时候,表示该页面是一个HTML5的页面:H5-->
<!DOCTYPE html>
<html>
<head>
<!--这个是告诉浏览器采用那样一种浏览器采用哪一种的编码方式打开该页面,一般这个编码方式-->
<!--程序员的工作区一般来说都是用的utf-8,因为utf-8更加通用-->
<meta charset="utf-8">
<title>实体符号</title>
</head>
<body>
<!--空格 -->
a
<br>
a bc
<br>
<!--小于号呢-->
b<a>c
<br>
b<a>c
<!--<小于号 >大于号-->
</body>
</html>
<html>
<head>
<meta charset="GBK">
<title>
基本标签
</title>
</head>
<body>
<!--段落标记-->
<p>《西游记》是中国古代第一部浪漫主义章回体长篇神魔小说。</p>
<p>现存明刊百回本《西游记》均无作者署名，作者是明代吴承恩。</p>
<p>全书主要描写了孙悟空出世及大闹天宫后，遇见了唐僧、猪八戒、沙僧和白龙马，西行取经，</p>
<p>一路上历经艰险，降妖除魔，经历了九九八十一难，终于到达西天见到如来佛祖</p>
<!--标题字-->
<h1>标题字</h1>
<h2>标题字</h3>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
<!--换行标记-->
<!--长了一直眼镜,独目标记-->
Hello<br> World!
<!--水平线-->
<hr>
<!--color是属性名,red是属性值-->
<!--color后面可以是单引号,也可以是双引号-->
<hr color="red">
<!--预留格式-->
<pre>
for(int i = 0;i < 100; i++){
System.out.println("i = " + i);
}
</pre>
<!--粗体字-->
<b>粗体字</b>
<!--斜体字-->
<i>斜体字</i>
<!--插入字-->
<ins>插入字</ins>
<!--删除字-->
<del>删除字</del>
<!--右上角加字-->
10<sup>2</sup>
<!--右下角加字-->
10<sub>2</sub>
<!--font字体标签-->
<font color="red" aria-setsize="12">hello World</font>
</body>
</html>
<!--凡是HTML页面中第一行是以下代码的时候,表示该页面是一个HTML5的页面:H5-->
<!DOCTYPE html>
<html>
<head>
<!--这个是告诉浏览器采用那样一种浏览器采用哪一种的编码方式打开该页面,一般这个编码方式-->
<!--程序员的工作区一般来说都是用的utf-8,因为utf-8更加通用-->
<meta charset="utf-8">
<title>实体符号</title>
</head>
<body>
<!--空格 -->
a
<br>
a bc
<br>
<!--小于号呢-->
b<a>c
<br>
b<a>c
<!--<小于号 >大于号-->
</body>
</html>
HTML表格 table
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML表格</title>
</head>
<body>
<!--3行3列的taable-->
<table border="1px" width="300px" height="200px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
表格单元格的合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格单元格的合并</title>
</head>
<body>
<table width="50%" border="1px">
<tr>
<td>1</td>
<td colspan="2">xy</td>
<!-- <td>y</td> -->
</tr>
<tr>
<td>1</td>
<td>1</td>
<td rowspan="2">KINGFOND</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<!-- <td>FOND</td> -->
</tr>
</table>
</body>
</html>
表格-th标签
th可以用来代替td,th的内容会自动加粗,会自动居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px" width="50%">
<tr>
<!-- <td>员工编号</td>
<td>员工姓名</td>
<td>员工薪资</td> -->
<!--th可以用来代替td,th的内容会自动加粗,会自动居中-->
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪资</th>
</tr>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800.0</td>
</tr>
<tr>
<td>7370</td>
<td>KING</td>
<td>8000.0</td>
</tr>
</table>
</body>
</html>
表格-thead-tbody-tfoot
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>thead tbody tfoot</title>
</head>
<body>
<!--一个表格可以被thead tbody tfoot分割,方便于后期的javascript-->
<table border="1px" width="50%">
<thead>
<tr>
<!--th可以用来代替td,th的内容会自动加粗,会自动居中-->
<th>员工编号</th>
<th>员工姓名</th>
<th>员工薪资</th>
</tr>
</thead>
<tbody>
<tr>
<td>7369</td>
<td>SMITH</td>
<td>800.0</td>
</tr>
<tr>
<td>7370</td>
<td>KING</td>
<td>8000.0</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>x</td>
<td>y</td>
<td>z</td>
</tr>
</tfoot>
</table>
</body>
</html>
背景颜色和背景图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景颜色和背景图片</title>
</head>
<!--body的bgcolor指定背景颜色-->
<!--body标签的background指定的是背景图片-->
<body bgcolor="red" background="images/赵今麦.jpeg">
</body>
</html>
图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body bgcolor="red" background="images/赵今麦.jpeg">
<img src="images/Baidu.png"/>
<!--img标签的属性有哪些呢?-->
<!--开始标签和结束标签之间没有内容的话,可以直接把结束标签删除掉,开始标签末尾加上斜杠/-->
<img src="images/Baidu.png" width="200px" title="点击我跳转到百度哦"/>
<!--title表示悬停时鼠标的提示信息-->
<!--alt用来指定当前图片加载失败的时候的提示信息-->
<img src="images/Bai.png" alt="图片找不到哦"/>
</body>
</html>
超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--链接到百度-->
<!--href表示:hot references,用来指定链接的路径-->
<a href="http://www.baidu.com">百度</a>
<br>
<!--链接路径可以是一个网络中的路径,也可以是本地的一个路径-->
<a href="004-表格.html">链接到本地的表格</a>
<br />
<a href="http://www.126.com">126邮箱</a>
<br />
<a href="http://www.baidu.com">百度的另一个网址</a>
<!--关于超链接的target属性-->
<!--
target:
_blank,新窗口
_self,当前窗口
_parent,当前窗口的父窗口
_top,当前窗口的*窗口
-->
<a href="http://www.baidu.com" target="_self">百度(当前窗口)</a>
<a href="http://www.baidu.com" target="_blank">百度(新窗口)</a>
</body>
</html>
列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!--无序列表-->
<ul type="disc">
<!--列表项-->
<ul>
<li>北京</li>
<li>上海</li>
<li>广州</li>
</ul>
<li>中国</li>
<li>美国</li>
<li>俄国</li>
<li>英国</li>
<li>德国</li>
</ul>
<!--有序列表-->
<ol type="i">
<li>水果
<ol type="a">
<li>香蕉</li>
<li>哈密瓜</li>
<li>菠萝</li>
<li>香瓜</li>
</ol>
</li>
<li>蔬菜</li>
<li>茶
<ol>
<li>龙井
<ol>
<li>绿茶</li>
<li>红茶</li>
<li>白茶</li>
</ol>
</li>
<li>毛尖</li>
<li>大红袍</li>
</ol>
</li>
</ol>
</body>
</html>
表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<!--表单的作用是!-->
<!--发送请求,并携带数据给到服务器
表单和超链接都是可以向服务器发送请求.
表单中还可以携带输入的数据.
表单的对应英文单词:form
2,怎么定义各个表单队形呢>
<form>
表单项1:
表单项2:
</form>
3,form标签中有一个action属性,这个属性和超链接的href相同.
-->
<!--这个是一个超链接-->
<a href="http://www.baidu.com">百度</a>
<!--表单-->
<form action="http://www.baidu.com">
<!-- 按钮,提交表单额按钮,只要点击这个按钮,就发送请求了-->
<input type="submit" name="" id="" value="百度" />
</form>
</body>
</html>
form
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 画一个登录的表单 -->
<!-- action里面随便写了 -->
<form action="http://192.168.145.2:8080/crm/login">
用户名:<input type="text" name="x"/>
<br>
密码:<input type="password" name="y"/>
<br>
<!-- <input type="submit" value=""/> -->
<input type="submit" value="登录" />
</form>
</body>
</html>
用户注册的表单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户注册的表单</title>
</head>
<body>
<form action="http://localhost:80/crm/register" >
用户名:<input type="text" name="username"/>
<br>
密码:<input type="password" name="userpwd" />
<br>
性别:
<input type="radio" name="sex" value="1" checked="checked"/>男
<input type="radio" name="sex" value="0"/>女
<br>
兴趣:
<input type="checkbox" name="aihao" id="aihao" value="smoke" checked="checked"/>抽烟
<input type="checkbox" name="aihao" id="aihao" value="drink" />喝酒
<input type="checkbox" name="aihao" id="aihao" value="firehair" />烫头
<br>
学历:<!--下拉列表-->
<select name="xueli">
<option value="gz">高中</option>
<option value="bk" selected="selected">本科</option>
<option value="ss">硕士</option>
</select>
<br>
简介:
<textarea rows="10" cols="60" name="简介">
</textarea>
<br>
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</form>
</body>
</html>
下拉列表多选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉列表多选</title>
</head>
<body>
<select name="province" size="7" multiple="multiple">
<option value="hebei">河北省</option>
<option value="shandong">山东省</option>
<option value="anhui">安徽省</option>
<option value="jiangsu">江苏省</option>
<option value="jilin">吉林省</option>
</select>
</body>
</html>
file控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>file控件</title>
</head>
<body>
<form action="http://www.baidu.com" >
文件: <input type="file" />
<input type="submit" value="文件上传"/>
</form>
</body>
</html>
hidden控件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hidden控件</title>
</head>
<body>
<form action="http://127.0.0.1:8080/crm/save" >
<input type="hidden" name="usercode" id="usercode" value="1111" />
<input type="submit" value="提交"/>
</form>
</body>
</html>
readonly和disabled
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>readonly和disabled</title>
</head>
<body>
<!--readonly和disabled都是只读的,readonly可以提交给服务器,但是disabled不会提交给服务器.-->
<form action="http://127.0.0.1:8080/crm/save" >
机构代码 <input type="text" name="orgcode" value="1111" readonly="readonly"/>
<br>
用户代码 <input type="text" name="usercode" value="222" disabled="disabled"/>
<br>
<input type="submit" value="提交"/>
</form>
</body>
</html>
maxlength属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>maxlength属性</title>
</head>
<body>
<!-- 最多输入3个字符 -->
<input type="text" maxlength="3" />
</body>
</html>
HTML的id属性
<!DOCTYPE html>
<!-- doctype是文档类型 -->
<html id="myhtml">
<head id="myhead">
<meta charset="utf-8">
<title>HTML的id属性</title>
</head>
<body id="mybody">
<!-- 在html的任何一个节点上,都有id属性,并且id属性是不能重复的
3,id代表这个节点,是节点的身份证
4,id属性方便获取到节点的属性,和信息
5,通过id属性可以很方便的在javascript中获取该节点,
然后对该节点进行增删改查,让网页更加生动.
-->
</body>
</html>
div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div和span</title>
</head>
<body>
<!-- div和span都是图层
1,什么是图层,有什么用?
每一个图层在网页中都是独立的盒子
最主要的作业就是布局
div非常灵活
2,现代化的网页全都是使用div和span进行布局
每一个浏览器都内置了调试器,
使用快捷键f12可以调出来调试器
div和span的区别?
div默认情况下是默认独占一行
span不是独占一行
-->
<div id="div1">我是一个div!
</div>
是新的一行那?
<span id="myspan">
我是一个span标签!
</span>
</body>
</html>
iframe 元素会创建包含另外一个文档的内联框架（即行内框架）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
parent
<iframe src="self.html" width="300px" height="300px"></iframe>
</body>
</html>