HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01——这是我的第一个入门案例</title>
</head>
<body>
<h1 align="center">
这是我的第一个HTML入门案例
</h1>
</body>
</html>
基本语法
注释
<!--hello world-->
-
标题标签中 h1最大，h6最小。
<h1>我是标题 h1</h1> <h2>我是标题 h2</h2> <h3>我是标题 h3</h3> <h4>我是标题 h4</h4> <h5>我是标题 h5</h5> <h6>我是标题 h6</h6><div>和<span>两个标签就是用来布局页面的 <div> 这是第一个div </div>- div和span的区别是div都是独立的一行显示的而span则不是独立显示的
同学们在访问其他网站页面时会看到字体颜色是五颜六色的，我们可以该字体颜色吗？当然可以了
font标签就可以使用，该标签有一个color属性可以设置字体颜色，如： 就是将文字设置成了红颜色。那么我们只需要将需要变成红色的文字放在标签体部分就可以了，如下：<html> <head> <title>html 快速入门</title> </head> <body> <font color='red'>乾坤未定，你我皆是黑马~</font> </body> </html>属性
属性可以提供一些格外的信息
同一个标签中的属性应该唯一，属性建议是用小写，属性值要用双引号引起来
- class 定义元素的类名，用来选择和访问特定的元素
- id 定义元素的唯一标识，在整个文档中必须是唯一的
- name 定义元素的名称，一般用于表单数据提交到服务器
- value 定义在元素内显示的默认值，一般用于表单标签中
- style 使用css对于元素进行一些样式的指定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一个div</title>
<style>
div {
/*显示边框*/
border: 1px solid red;
/*宽度的控制*/
width: 60%;
/*对高度进行控制,这个高度设置的是边框的高度*/
height: 500px;
/*边框的外边距*/
margin: auto;
}
</style>
</head>
<body>
<div>
第一个div
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
<!--这里是段落标签可以使将正文内容写在这里-->
传智教育(股票代码 003032)，隶属江苏传智播客教育科技股份有限公司，注册资本4亿元，是第一个实现A股IPO的教育企业，
公司致力于培养高精尖数字化人才，主要培养人工智能、python+大数据开发、智能制造、软件、互联网、区块链等数字化专业人才及数据分
析、网络营销、新媒体等数字化应用人才。公司由一批拥有10年以上开发管理经验，且来自互联网或研究机构的IT精英组成，负责研究
、开发教学模式和课程内容。公司具有完善的课程研发体系，一直走在整个行业发展的前端，在行业内竖立起了良好的品质口碑。
</p>
<!--h1到h6标题从大到小-->
<h1>一级标题</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
<!--水平线标签hr/ 另外还有属性size和color属性-->
<hr/>
<!--在ul中利用li写出的是无序列表，还有属性type = disc实心圆 circle 是空心圆 square是实心得方块-->
<ul type="circle">
<li>
丁真
</li>
<li>
怪零
</li>
</ul>
<!--ol是有序列表 同样也有type属性，数字1，字母a或者A,i或者I罗马数字 start属性表示的起始位置例如从10开始标号-->
<ol>
<li>
dinner
</li>
<li>
what
</li>
</ol>
<em>
表示的是斜体
</em>
<i>
同样表示的是斜体
</i>
<strong>
加粗文本
</strong>
<b>
加粗文本
</b>
</body>
</html>
控制样式
使用不同的类来控制不同的div 、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*给每一个div都加上边框的效果*/
div{border: 1px solid aqua}
/*左侧的div的样式控制*/
.left {
width: 20%;
float: left;
height: 500px;
}
/*中间正文的样式控制*/
.center {
width: 59%;
float: left;
height: 500px;
}
.right{
width: 20%;
float: left;
height: 500px;
}
/*底部超链接的控制*/
.footer {
/*清除之前的浮动效果*/
clear: both;
/*控制文本居中显示*/
text-align: center;
background: red;
}
</style>
</head>
<body>
<div>top</div>
<div>导航条</div>
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
<div class="footer">
底部超链接
</div>
</body>
</html>
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--插入图片插入本地和网络图片都是可以的
src 图片的路径
title 鼠标悬停的时候显示的内容
alt 图片找不到时显示的内容
width 图片的宽度
height 图片的高度-->
<img src="https://blob.keylol.com/forum/202105/18/163823hddsdic4mzmwh3og.jpg" title="蒂法" alt="图片找不到了" width="300px" height="300px"/>
</body>
</html>
超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a {
/*去掉超链接的下划线*/
text-decoration: none;
/*设置超链接的颜色*/
color: black;
}
/*鼠标悬浮的时候的控制样式*/
a:hover{
color: red;
}
</style>
</head>
<body>
<!--超链接标签的演示
超链接标签是a 其中有两个属性 href跳转的网址 target跳转的方式_self在本页面 _blank在新的页面-->
<a href="https://www.cnblogs.com/daniuma/" target="_blank ">博客</a>
<a href="https://www.cnblogs.com/daniuma/"><img src="https://blob.keylol.com/forum/202105/18/163823hddsdic4mzmwh3og.jpg" width="500px" height="700px"/></a>
</body>
</html>
表单标签
form 用于表示表单标签
action 用于提交数据的路径
method 提交表单的方式 get 和 post
autocomplete 是否记录补全on还是off
get：表单数据和显示在地址栏中，不安全，地址栏的url长度是有限制的
post：表单的数据不会显示在地址栏中，安全，长度没有限制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: url("https://pic3.zhimg.com/80/v2-eaab3d4f837e0a65e69e253aa9de4992_720w.webp");
}
</style>
</head>
<body>
<!--
标点项标签：<label> 表单元素说明-
属性：for 属性：属性值必须和表单项标签id属性值一致
表单项标签：<input> 多种类型数据
属性：
type——数据类型
id—-唯一标识
name——提交服务器的标识
value——默认的数据提示
placeholder——默认的提示信息
required——是否是必须的
按钮标签：
<button>
属性：
type——按钮的类型：summit提交，reset重置，button就是普通的按钮
-->
<form action="#" autocomplete="off" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" value="" placeholder="请在此处输入用户名 " required/>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background: url("https://pic3.zhimg.com/80/v2-eaab3d4f837e0a65e69e253aa9de4992_720w.webp");
}
</style>
</head>
<body>
<!--
标点项标签：<label> 表单元素说明-
属性：for 属性：属性值必须和表单项标签id属性值一致
表单项标签：<input> 多种类型数据
属性：
type——数据类型
id—-唯一标识
name——提交服务器的标识
value——默认的数据提示
placeholder——默认的提示信息
required——是否是必须的
按钮标签：
<button>
属性：
type——按钮的类型：summit提交，reset重置，button就是普通的按钮
-->
<form action="#" autocomplete="off" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" value="" placeholder="请在此处输入用户名 " required/>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
</body>
</html>
表单标签type属性值
| date | 日期框 |
|---|---|
| time | 时间框 |
| datetime-local | 时间日期框 |
| number | 数字框 |
| range | 滚动条数值框 |
| search | 可清除文本框 |
| tel | 电话框 |
| url | 网址框 |
| file | 文件上传框 |
| hidden | 隐藏框 |
以下是一些演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--type属性值
<input type=“text”> 普通文本输入框
<input type="passwoed"> 密码输入框
<input type="email"> 邮箱输入框
<input type="radio"> 单选框，必须有相同的name属性值，value属性真是提交的数据，checked属性默认选中
<input type="checkbox"> 多选框 必须有相同的name属性值，value属性真是提交的数据，checked属性默认选中-->
<form action="#" method="get" autocomplete="off">
<label for="username">用户名：</label>
<input type="text" id="username" name="username"/>
<br/>
<label for="password">密码：</label>
<input type="password" id="password" name="password"/>
<br/>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email"/>
<br/>
<label for="gender">性别</label>
<input type="radio" id="gender" name="gender" value="men"/>男
<input type="radio" name="gender" value="women"/>女
<input type="radio" name="gender" value="other"/>其他
<br/>
<label for="hobby">性别</label>
<input type="checkbox" id="hobby" name="hobby" value="music"/>音乐
<input type="checkbox" name="hobby" value="game"/>游戏
<input type="checkbox" name="hobby" value="other"/>其他
<br/>
<label for="birthday">生日</label>
<input type="date" id="birthday" name="birthday">
<br/>
<label for="time">时间</label>
<input type="time" id="time" name="time">
<br/>
<label for="age">时间</label>
<input type="number" id="age" name="age">
<br/>
<label for="file">上传文件</label>
<input type="file" id="file" name="file">
<br/>
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
</body>
</html>
案例实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<style>
body{
background: url("https://pic1.zhimg.com/v2-dfdefe8db4bdc79e8007ed9dfe210dac_r.jpg");
}
.center {
background: wheat;
width: 400px;
text-align: center;
margin: auto;
}
</style>
</head>
<body>
<div class="center">
<div>
注册详情
<hr/>
<!--表单标签-->
<form action="#" method="get" autocomplete="off">
<div>
<label for="username">姓名</label>
<input type="text" id="username" name="usename" placeholder="请在此输入姓名" required>
</div>
<div>
<label for="password">密码</label>
<input type="password" id="password" name="password" placeholder="请在此输入密码" required>
</div>
<div>
<label for="email">邮箱</label>
<input type="email" id="email" name="email" placeholder="请在此输入邮箱" required>
</div>
<div>
<label for="tel">电话</label>
<input type="tel" id="tel" name="tel" placeholder="请在此输入电话" required>
</div>
<hr>
<div>
<label for="gender">性别</label>
<input type="radio" id="gender" name="gender" value="men">男
<input type="radio" name="gender" value="women">女
</div>
<div>
<label for="hobby">爱好</label>
<input type="checkbox" id="hobby" name="hobby" value="music">音乐
<input type="checkbox" name="hobby" value="movie">电影
<input type="checkbox" name="hobby" value="game">游戏
</div>
<div>
<label for="birthday">电话</label>
<input type="date" id="birthday" name="birthday">
</div>
<div>
<label for="city">城市</label>
<select id="city" name="city">
<option>
---请选择城市--
</option>
<optgroup label="直辖市">
<option>北京</option>
<option>上海</option>
</optgroup>
<optgroup label="省会城市">
<option>天津</option>
<option>武汉</option>
</optgroup>
</select>
</div>
<hr/>
<div>
<label for="desc">个性签名</label>
<textarea id="desc" name="desc" rows="5" cols="40"></textarea>
</div>
<hr/>
<button type="submit">注册</button>
<button type="reset">重置</button>
</form>
</div>
</div>
</body>
</html>