目录
一、入门认识
首先要了解最基本的框架
<!DOCTYPE html>
<html>
<head>
<!-- 文字格式 -->
<meta charset="utf-8" />
<!-- 窗口标题 -->
<title>第一个html</title>
</head>
<!-- 主体部分 -->
<body>
这是我的第一个html
hello,HTML
</body>
</html>二、文本标签
了解最常用的文本标签
<!-- ctrl+shift+/
1)标题标签 h1-h6:从大到小的标题
-->
<h1>我的JavaEE</h1>
<h2>我的JavaEE</h2>
<h3>我的JavaEE</h3>
<h4>我的JavaEE</h5>
<h5>我的JavaEE</h6>
<h6>我的JavaEE</h6>
<!-- 2)段落标签 p -->
<p>段落内容</p>
<!-- 3)滚动标签marquee
属性:
behivour:滚动的方式
slide:默认从右滚动的左边结束
alternate:默认从滚动到左边,在来回滚动
默认值:scroll:穿梭滚动
scrollamount:滚动速度, 正数值 值越大,速度越快
direction:滚动方向,默认left,从右到左
right从左到右滚动
bgcolor:背景颜色
-->
<marquee behavior="scroll" direction="right" bgcolor="pink" scrollamount="25">JavaEE</marquee>
<!-- 4) div标签和span标签
div:占一行空间
span:行内标签---在一行上,不会换行
div----层级布局去使用 div+Css-----完成页面布局
-->
<div>div</div>
<div>div2</div>
<span>span</span>
<span>span2</span>
<!-- 5)引用标签:blockquote ----针对某个段落的文字进行解释说明,自带段落缩进的效果 -->
<blockquote>
段落文章
</blockquote>
<!-- 6)原样输出 pre标签,按照文本的原先格式---原封不动的展示! -->
<pre>
文本内容
</pre>
<!-- 7)上下标标签
sup和sub
-->
数学公式: X<sup>2</sup> <br/> <!-- br:换行标签-->
化学公式 : H<sub>2</sub>O CO<sub>2</sub><br/>
<!--
上标 sup使用居多----结合html转义字符
版权所有 © ----©
注册商品 ® ®
-->
xxx公司 <sup>©</sup> 2022-2023 <br/>
xxx公司 <sup>®</sup><br/>
<!-- 居中标签 -->
<center>你很帅</center>
<!-- 无序列表 ul li
ul
type属性 列表项前的标记 默认值 disc(实心原点)
circle:空心原点
square:正方形
-->
<ul type="square">
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>刘六</li>
</ul>
<hr/>
<!-- 有序列表
ol li
ol里面 type属性的默认值从1开始
-->
课程管理
<ol type="1">
<li>成绩管理</li>
<li>选课管理</li>
<li>教师管理</li>
</ol>三、超链接标签
主要分为两种：
1）直接跳转到指定的地点
2）锚链接
示例
<!--
超链接标签 a标签
属性
href:连接到本地地址或者服务器地址 (url地址:统一资源定位符)
协议://域名/地址
协议
http协议---https---联网
thunder:// 迅雷协议
file://:本地文件协议
后面用的服务器 tomcat---window系统本地部署
Linux系统---远程部署
http://localhost:8080/findProduct
127.0.0.1
域名 ---绑定 ip地址
target属性:
打开新页面地址的方式
默认值:_self 当前页面直接打开
_blank:新建一个窗口打开
超链接的应用:
1)<a href="跳转url地址" target="打开方式">文本内容<a> 直接跳转指定的地址(经常用的)
2)锚链接的使用
在同一个页面使用
a)创建一个锚点 (创建一个标记)
<a name="锚点名称"></a>
b)创建跳转链接
<a href="#锚点名称">跳转</a>
在不同页面上使用
a)在另一个页面的某个位置创建一个标记(锚点)
<a name="锚点名称"></a>
b)在当前页面中,进行跳转链接,
<a href="链接到另一个页面地址#锚点名称"></a>
-->
<!-- 锚点 -->
<a name="top"></a>
<a href="#foot">[跳转底部]</a><br/>
<a href="01_其他文本标签.html#01_top" target="_blank">点我试试</a> <br>
<a href="http://www.baidu.com" target="_blank">连接到百度</a> <br>
网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容
网站内容网站内容网站内容网站内容
网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容
网站内容网站内容网站内容
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
网站内容网站内容网站内容网站内容网站内容网站内容网站内容网站内容
网站内容网站内容网站内容
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<!--打锚点 -->
<a name="foot"></a>
<!-- 跳转地址 -->
<a href="#top">[跳转顶部]</a>四、图片标签
<!--
img
src属性: 连接到图片地址(可以本地图片/或者网络图片)
width: 图片宽度 指定像素px或者百分比(占整个宽度分辨率的百分之几)
heigth:图片高度 指定像素px或者百分比(占整个宽度分辨率的百分之几)
title:当前鼠标悬浮在图片上的时候,有 提示信息,(标题)
alt :替代文本
当这个图片失效了(地址找不到了),它会给你一个信息描述
-->
<!-- src="相对路径"
图片文件这种素材文件是放在项目img文件夹中
-->
<img src="img/adv.jpg" width="400px" alt="图片" height="200px" title="图片插入" />
<hr/>
<!-- 图像连接
应用场景:在查询出来所有商品的列表--展示图片以及商品名称
点击图片或者是商品名称---查看商品详情
图像标签 外面包超链接
-->
<a href="Test.html" target="_self">
<img src="img/adv.jpg" width="300px" title="广告图片" height="300px" />
</a>五、表格标签
html中的表格比较特殊只有行的概念，没有列的概念，即想到得到5行四列的表格则需要依次输入四个不同属性并换行输入5次
实例
<!--
表格标签
table
html语言中只有行的概念 tr,没有列的概念---td(单元格,理解为"列")
tr一行中有多少个td
属性:
要表格边框线 border 边框线 单位px
表格对齐方式 align left center right
bgcolor :背景色
width和hight:宽和高 可以指定像素或者指定百分比
cellspacing:设置单元格和边框线的距离 0,合并
子标签
tr:行
algin:对齐方式 center 居中
td:是一个普通单元格
th:是一个特殊单元格(表格的表头---自动居中,加粗)
caption:表格的标题标签
-->
<table border="1px" width="600px" cellspacing="0" height="600px" bgcolor="cornsilk" align="center">
<caption>商品列表页面</caption>
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>商品图片</th>
<th>商品描述</th>
<th>操作</th>
</tr>
<tr align="center">
<td>1</td>
<td>华为mate30pro</td>
<td>6700</td>
<td>
<img src="img/c_0001.jpg" width="100px" height="100px"/>
</td>
<td>为照相而生</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td>2</td>
<td>小米p10</td>
<td>4599</td>
<td>
<img src="img/c_0003.jpg" width="100px" height="100px" />
</td>
<td>为发烧而生</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td>3</td>
<td>三星手机</td>
<td>3999</td>
<td>
<img src="img/c_0004.jpg" width="100px" height="100px" />
</td>
<td>为爆炸而生</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>普通单元格合并实例
<!--
td:普通单元格合并
colspan: 合并列(列合并),当这个单元格占的格子数量
rowspan:合并行(行合并),当这个单元格占的格子数量
-->
<table border="1px" cellspacing="0" width="400px" height="500px" align="center">
<caption>xxx学生成绩管理</caption>
<tr>
<th>学号</th>
<th>姓名</th>
<th>班级</th>
<th>高等数学</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>计算机1班</td>
<td rowspan="2">98</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>软工1班</td>
<!-- <td>98</td> -->
</tr>
<tr align="center">
<td>3</td>
<td>王五</td>
<td>软工1班</td>
<td>100</td>
</tr>
<tr align="center">
<td>4</td>
<td>刘六</td>
<td>计算机2班</td>
<td>95</td>
</tr>
<tr align="center">
<td colspan="3">平均成绩</td>
<td>80</td>
</tr>
</table>六、表单标签
1、表单的应用场景
<!--
表单标签
form
属性:action-----
url地址:表单中的表单项的所有数据提交后端服务器地址上
method:表单的提交方式
get/post
表单场景:
注册或者登录
注册--将用户的信息提交后端服务器上,校验用户信息是否存在,如果存在,不能注册;否则,可以注册
登录---将用户信息提交服务器上,查看是否有这个用户,有才能的登录;否则不能登录!
表单提交的时候,里面所有的表单项标签必须有一个name属性--后端系统服务器就能知道用户书写的内容
-->
<form action="server.html" method="get">
<!-- placeholder 一段文字提示 h5效果,鼠标移动到文本输入框,输入数据,里面提示自动消失 -->
<!-- name属性必填,给系统后端标记写的什么内容 -->
用户名:<input type="text" placeholder="请您输入用户名" name="username" /><br/>
<!--
代表一个空格
  代表两个空格
-->
密  码:<input type="password" placeholder="请输入密码" name="password" /><br/>
<!-- 提交按钮 -->
<input type="submit" value="登录" />
</form>
<hr/>
<form action="server.html" method="post">
<!-- placeholder 一段文字提示 h5效果,鼠标移动到文本输入框,输入数据,里面提示自动消失 -->
<!-- name属性必填,给系统后端标记写的什么内容 -->
<!-- 文本输入框 -->
用户名:<input type="text" placeholder="请您输入用户名" name="username" /><br/>
<!--
代表一个空格
  代表两个空格
-->
<!--密码输入框 -->
密  码:<input type="password" placeholder="请输入密码" name="password" /><br/>
<!-- 提交按钮 -->
<input type="submit" value="登录" />
</form>2、常见的表格标签
</head>
<!--
body
background 指定背景图片 (一定和屏幕分辨率相同,否则图片重复)
-->
<body>
<!--
跟input 标签相关的表单项
input type = "text" 文本输入框
input type = "password" 密码输入框
input type = "radio" 单选按钮
input type = "checkbox" 复选框
input type = "date" 日期组件
input type ="file" 文件上传组件
普通按钮
input type ="button" 必须和value属性="默认值"
特殊按钮
input type="submit" 表单提交按钮
input type="reset" 重置按钮 ,清空表单项
select :下拉菜单 ---传统下拉菜单(选一个)
option:下拉选项
-->
<form action="server.html" method="get">
用户名:<input type="text" name="username" placeholder="请输入用户名" /><br/>
密码:<input type="password" name="password" placeholder="请输入密码" /><br/>
性别:
<!--
将他们看同一组信息, 指定相同的name属性
-->
<input type="radio" name="sex" value="男" /> 男
<input type="radio" name="sex" value="女" /> 女 <br/>
爱好:
<!--
将他们看同一组信息, 指定相同的name属性
-->
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="玩lolo" />玩lol
<input type="checkbox" name="hobby" value="篮球" />篮球<br/>
出生日期:
<input type="date" name="birthday" /> <br/>
籍贯
<select name="jiguan">
<option value="请选择">请选择</option>
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="广东省">广东省</option>
</select>
<br/>
上传照片:
<input type="file" name="photo" /><br/>
<input type="button" value="点我试试" /><br/>
<input type="submit" value="注册" />
<input type="reset" value="重置" />
</form>
9778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
