HTML课程
一.HTML概述
1.什么是HTML：
是一种超文本标记语言，构建网页文件，即以.html/.htm为后缀的文件，由浏览器解释运行，可以使用CSS定义样式，嵌入js代码实现动态效果。
2.标记语法：
封闭类型：双标记，比如<p></p>
非封闭类型：单标记或者空标记，比如<br/>，对于单标记，建议写法<br />，而不是<br>
3.元素和属性:
如：<p align="center">段落文本</p>
4.html文档的标准结构：
版本信息
<html>
<head></head>
<body></body>
</html>
5.版本信息：
严格型，过渡型（常用类型），框架型
6.<head>头元素：
定义整个文档相关的信息，常包含如下子元素:
<title>:标题
<meta>：元数据元素，定义页面的编码格式或者刷新频率等
7.<body>元素：
文档的主体，包含所有要显示的内容
<!--html元素，表示整个文档-->
<html>
<!--头元素：描述整个文档的相关信息-->
<head>
<title>第一网页</title>
<meta http-equiv="refresh" content="3" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<!--文档主体：显示-->
<body>
aa aa
b<bb>bb
</body>
</html>二. 文本标记
1.标题元素：
<h1>---<h6>
2.段落：
<p></p>:p中的内容会独占一行，会有一
3.换行：
<br />--回车，间距较小
4.分区元素：
对某些元素进行一些统一的设置<span>文本</span>：不会影响布局，常用于同一行中的部分元素
<div>文本或者其他</div>：独占一行，常用于多行的情况下
5.块级元素（block)和行内元素（inline）块：
那些独占一行的元素，比如div，p,hn
行内：可以和其他元素位于同一行，比如span,a
<!--版本信息-->
<html>
<head>
<title>第一个页面</title>
<meta http-equiv="content-type"
content="text/heml; charset=utf-8"/>
</head>
<body>
<h1 align="center">
Java 语言基础<span style="color:red;"><Day03></span>
</h1>
<h2>1 个人所得税计算器</h2>
<h3>1.1 问题</h3>
<p>测试测试测试</p>
<h3>1.2 问题</h3>
<p>测试测试测试</p>
<h3>1.3 问题</h3>
<p>测试测试测试</p>
public class IncomeTax<br/>
{<br/><br/><br/><br/>
}
</body>
</html>三.图像和链接
1.<img src="图像的路径“ /》
2.超级链接：
点击，去往其他资源（页面）
<a href="url" target="">被单击的内容，文字
target的取值：
_self:默认值，替换
_blank:打开新的空白页面，显示页面
3.锚点：
当前页面的不同位置之间跳转
第一步：使用a在目标位置定义一个锚点
<a name="link1"></a>
第二步：使用链接a，href指向link1
<a href="#link1">to link1</a>
4.直接回到页面的顶端：
非常常用，简化
<a href="#”>text</a>
<!--版本信息-->
<html>
<head>
<title>第一个页面</title>
<meta http-equiv="content-type"
content="text/heml; charset=utf-8"/>
</head>
<body>
<h1 align="center">
Java 语言基础<span style="color:red;"><Day03></span>
</h1>
<h2>1 个人所得税计算器</h2>
<h3>1.1 问题</h3>
<p>测试测试测试</p>
<h3>1.2 问题</h3>
<p>测试测试测试</p>
<h3>1.3 问题</h3>
<p>测试测试测试,如图1所示：</p>
<div align="center">
<a href="https://blog.csdn.net/qq_38826019" target="_blank">
<img src="a.jpg" width="200" />
</a>
<p>图1</p>
</div>
public class IncomeTax<br/>
{<br/><br/><br/><br/>
}
<br />
<a href="#">To Top</a>
</body>
</html>四：列表
1.什么是列表：
将几项内容排列在一起
2.ul,ol和li
定义一个列表，必须使用ol/ul
列表项：列表的每个内容，使用一个li
3.嵌套的列表
可以将整个列表放在某个li里，层次结构
<!--版本信息-->
<html>
<head>
<title>第一个页面</title>
<meta http-equiv="content-type"
content="text/heml; charset=utf-8"/>
</head>
<body>
<h1 align="center">
Java 语言基础<span style="color:red;"><Day03></span>
</h1>
<!--添加目录-->
<ol>
<li>
1个人所得税
<ul>
<li><a href="#link1">问题</a></li>
<li><a href="#link2">方案</a></li>
<li><a href="#link3">实现</a></li>
</ul>
</li>
<li>
2命令解析器
</li>
</ol>
<h2>1 个人所得税计算器</h2>
<a name="link1"></a>
<h3>1.1 问题</h3>
<p>测试测试测试</p>
<a name="link2"></a>
<h3>1.2 方案</h3>
<a name="link3"></a>
<p>测试测试测试</p>
<h3>1.3 实现</h3>
<p>测试测试测试,如图1所示：</p>
<div align="center">
<a href="https://blog.csdn.net/qq_38826019" target="_blank">
<img src="a.jpg" width="200" />
</a>
<p>图1</p>
</div>
public class IncomeTax<br/>
{<br/><br/><br/><br/>
}
<br />
<a href="#">To Top</a>
</body>
</html>五.表格：
显示网格数据，常用于页面的布局
1.创建表格：
表格的基本结构--table/tr/td(table defination)
2.常用属性
表格的属性：border（表格外边框）/width/height/align/cellpadding（单元格内容和单元格边框之间的距离）/cellspacing(单元格之间的距离）
单元格的属性：width/height/align/valign
3.表格的标题
<caption>:位于<table>,作为第一个子元素存在
4.行分组：
将多个行作为一组，进行统一设置的时候，使用专门的对表格实现行分组的元素
行分组元素只能出现在table里，只能包含tr元素
thead:只能出现一次
tbody:多次
tfoot:一次
5.不规则表格：
td元素而言，有colspan,rowspan属性设置单元格跨列或者跨行
colspan:单元格跨列，横着
rowspan:单元格跨行，竖着
<!--版本信息-->
<html>
<head>
<title>第一个页面</title>
<meta http-equiv="content-type"
content="text/heml; charset=utf-8"/>
</head>
<body>
<h1 align="center">
Java 语言基础<span style="color:red;"><Day03></span>
</h1>
<!--添加目录-->
<ol>
<li>
1个人所得税
<ul>
<li><a href="#link1">问题</a></li>
<li><a href="#link2">方案</a></li>
<li><a href="#link3">实现</a></li>
</ul>
</li>
<li>
2命令解析器
</li>
</ol>
<h2>1 个人所得税计算器</h2>
<a name="link1"></a>
<h3>1.1 问题</h3>
<p>测试测试测试</p>
<a name="link2"></a>
<h3>1.2 方案</h3>
<a name="link3"></a>
<p>测试测试测试</p>
<h3>1.3 实现</h3>
<p>测试测试测试,如图1所示：</p>
<div align="center">
<a href="https://blog.csdn.net/qq_38826019" target="_blank">
<img src="a.jpg" width="200" />
</a>
<p>图1</p>
</div>
<p>个人所得税的计算方式如表-1所示：</p>
<table align="center" border="1" width="700">
<caption>表-1</caption>
<thead style="color:red；background-color:gray;">
<tr>
<td>全国应纳税所得额</td>
<td>税率</td>
<td>速算扣除数</td>
</tr>
</thead>
<tbody style="color:green;">
<tr>
<td>全月应纳税所得额<1500</td>
<td>3%</td>
<td>0</td>
</tr>
<tr>
<td>1500=<全月应纳税所得额<4500</td>
<td>10%</td>
<td>105</td>
</tr>
<tr>
<td colspan="3">...</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<table>
<tr>
<td>width="80”>计算公式为：</td>
<td>应纳税额=全月应纳税所得额*适用税率-速算扣除数</td>
</tr>
</table>
</td>
</tr>
</tfoot>
</table>
public class IncomeTax<br/>
{<br/><br/><br/><br/>
}
<br />
<a href="#">To Top</a>
</body>
</html>六.表单：
交互---页面上录入数据并且提交服务器端
1.表单元素<form>:
承载其他交互的元素，
<form action="login.jsp" method="post">
地址信息：
包含文本框，密码框等录入数据的元素
包含一个提交按钮
</form>
<form action=" ">
发票信息：
</form>
2.表单上可以承载的元素
a)input元素，依靠其type属性的取值决定元素的类型，比如：
文本框 type="text"
密码框 type="password"
单选按钮 type="radio"--互斥的选择
多选按钮 type="checkbox"
提交按钮 type="submit"--提交，页面刷新
重置按钮 type="reset" --恢复到初始
普通按钮 type="button"--为其设置 onclick,才会有功能
文件选择框 type="file"
隐藏域 type="hidden"--不会显示，常用于在页面上记载那些不希望被用户看到的数据
value属性的作用：取决于元素的类型，用作初始值，用于提交的值，按钮上的文本。
b)其他元素
label元素：用来包含文本，使用for属性关联其他元素---单击文本时，就像单击关联的元素一样
选择框：
多个选项列出来，供用户选择--下拉选择，列表选择
<select>
<option value=""></option>
多行文本框 <textarea></textarea>
</select>
由size属性区分下拉，列表框
七：iframe:
在当前文档上引入并显示其他页面（嵌入），常用于类似于广告页面的嵌入
<iframe src="a.html"></iframe>
<!--版本信息-->
<html>
<head>
<title>第一个页面</title>
<meta http-equiv="content-type"
content="text/heml; charset=utf-8"/>
</head>
<body>
<h1 align="center">
Java 语言基础<span style="color:red;"><Day03></span>
</h1>
<!--添加目录-->
<ol>
<li>
1个人所得税
<ul>
<li><a href="#link1">问题</a></li>
<li><a href="#link2">方案</a></li>
<li><a href="#link3">实现</a></li>
</ul>
</li>
<li>
2命令解析器
</li>
</ol>
<h2>1 个人所得税计算器</h2>
<a name="link1"></a>
<h3>1.1 问题</h3>
<p>测试测试测试</p>
<a name="link2"></a>
<h3>1.2 方案</h3>
<a name="link3"></a>
<p>测试测试测试</p>
<h3>1.3 实现</h3>
<p>测试测试测试,如图1所示：</p>
<div align="center">
<a href="https://blog.csdn.net/qq_38826019" target="_blank">
<img src="a.jpg" width="200" />
</a>
<p>图1</p>
</div>
<p>个人所得税的计算方式如表-1所示：</p>
<table align="center" border="1" width="700">
<caption>表-1</caption>
<thead style="color:red；background-color:gray;">
<tr>
<td>全国应纳税所得额</td>
<td>税率</td>
<td>速算扣除数</td>
</tr>
</thead>
<tbody style="color:green;">
<tr>
<td>全月应纳税所得额<1500</td>
<td>3%</td>
<td>0</td>
</tr>
<tr>
<td>1500=<全月应纳税所得额<4500</td>
<td>10%</td>
<td>105</td>
</tr>
<tr>
<td colspan="3">...</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<table>
<tr>
<td>width="80”>计算公式为：</td>
<td>应纳税额=全月应纳税所得额*适用税率-速算扣除数</td>
</tr>
</table>
</td>
</tr>
</tfoot>
</table>
public class IncomeTax<br/>
{<br/><br/><br/><br/>
}
<br />
<a href="#">To Top</a>
</body>
</html><!--版本信息-->
<html>
<head>
<title>第二个页面</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h2>增加管理员</h2>
<form>
<table>
<tr>
<td>姓名：</td>
<td><input type="text" /></td>
<td>10个字符以内</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" /></td>
<td>10个字符以内</td>
</tr>
<tr>
<td>性别：</td>
<td><input type="radio" name="sex" value="0" />女生 <input type="radio" name="sex" value="1" />男生</td>
<td>10个字符以内</td>
</tr>
<tr>
<td>角色：</td>
<td>
<fieldset>
<legend>角色</legend>
<input type="checkbox" name="role" value="0" id="r1"/><label for="r1">普通管理员</label>
<br />
<input type="checkbox" name="role" value="1" id="r2"/><label for="r2">角色管理员</label>
</fieldset>
</td>
<td>至少选择一个</td>
</tr>
<tr>
<td>状态：</td>
<td>
<select>
<option value="1">启用</option>
<option value="2">停用</option>
<option value="3">删除</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>上传头像：</td>
<td><input type="file" /></td>
<td></td>
</tr>
<tr>
<td>自我描述：</td>
<td>
<textarea></textarea>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="保存" />
<input type="reset" value="取消" />
</td>
<td></td>
</tr>
</table>
<iframe src="https://blog.csdn.net/qq_38826019"></iframe>
</form>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
