文本标签
<!--html5中定义该文档为html文档-->
<!DOCTYPE html>
<!--html文档的跟标签-->
<html lang="en">
<!--头标签,同于指定html的属性,引入外部资源-->
<head>
<meta charset="UTF-8">
<!-- 标题标签-->
<title>Title</title>
</head>
<!--体标签-->
<body>
<!--居中-->
<center>
<!-- <段落标签>-->
<p>
<!-- 标题标签<h1> to <h6>-->
<h1>HTML 基础- 4个实例</h1>
<!--展示一条水平线,参数包括:/颜色color/宽度width/高度size/对齐方式align-->
<hr>
不要担心本章中您还没有学过的例子，<br>
您将在下面的章节中学到它们。
<hr>
<h1>HTML 标题</h1>
HTML 标题（Heading）是通过h1 - h6 标签来定义的.
<hr>
<h1>HTML 段落</h1>
<!-- 定义斜体字-->
<i>HTML 段落是通过标签 p 来定义的.</i>
</center>
</body>
</html>
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../index.jpg" alt="山东农业大学" height="100" width="100" align="right">
<!--
相对路径
* 以.为开头的路径
* ./:代表当前目录 .index.jpg
* ../:代表返回上一级目录-->
</body>
</html>
列表标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 有序列表 ol -->
<!-- 参数1:技术类型,参数2:起始位置 -->
早上起床干的事情
<ol type="I" start="2">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ol>
<!--无序列表 ul -->
<ul type="disc">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
<ul type="square">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
<ul type="circle">
<li>睁眼</li>
<li>看手机</li>
<li>穿衣服</li>
<li>洗漱</li>
</ul>
</body>
</html>
链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--定义方法<a></a>-->
<a href="https://www.baidu.com/">
百度一下
</a>
<br>
<!-- 打开一个新的页面-->
<a href="https://www.baidu.com/" target="_blank">
百度一下
</a>
<br>
<!--访问列表标签-->
<a href="./列表标签.html">访问列表标签</a>
<br>
<!--与图片连接的链接-->
<a href="https://www.baidu.com/">
<img src="./index.jpg" width="100" height="100">
</a>
</body>
</html>
块标签div与span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--保持默认设定(一般与CSS结合使用)
span:文本信息在一行内展示,不会换行,行内标签/内联标签
div:每一个div占满一整行,会进行自动换行,块级标签-->
<span>山东农业大学</span>
<div>山东农业大学</div>
</body>
</html>
语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--html5中的语义化标签,用来区分头和尾-->
<header>
山东农业大学
</header>
<footer>
山东农业大学
</footer>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 在html中表格没有列的概念,只有行的概念-->
<!--
table:定义表格
tr:定义行
td:定义单元格
colspan:合并行
rowspan:合并列
th:定义表头单元格
table表格属性:
width:宽度
border:边框
align:对齐方式
bgcolor:表格背景颜色
cellpadding:定义内容和单元格的距离
cellspacing:定义单元格之间的距离,如果指定为0,则单元格的线会何为一条
caption:定义表格标题
thead:表示表格的头部分
tbody:表示表格体的部分
tfoot:表示表格的脚的部分-->
<table border="1" width="50%" cellpadding="5" cellspacing="0">
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>001</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>003</td>
<td>小芳</td>
<td>女</td>
</tr>
</table>
<hr>
<table border="1" width="50%" cellpadding="5" cellspacing="0">
<tr>
<th rowspan="2">学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<!-- <td>001</td>-->
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>002</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>003</td>
<td colspan="2">小芳</td>
<!-- <td>女</td>-->
</tr>
</table>
</body>
</html>
表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--概念：用于采集用户输入的数据。用于和服务器进行交互
使用的标签：
form：用于定义表单。可以定义一个范围，范围用于代表采集用户数据的范围
1.属性:
action:指定数据提交的URL(位置)
method:指定提交方式
1.get:请求参数会在地址栏中显示,会封装在请求行中;请求参数的长度(url)会有限制;不太安全
2.post:请求参数不会在地址栏中显示,会封装在请求体中(HTTP协议);请求参数大小没有限制;较为安全
2.表单中的数据要想被提交必须指定其name属性
3.表单项标签
input:可以通过type属性值,改变元素展示样式
type属性:
placeholder:指定输入框的提示信息,当输入框内容发生改变是会自动清空提示信息
password:密码输入框
radio:单选框
1.要想让多个单选框实现单选效果,则多个单选框的name属性值必须相同
2.一般会给每一个单选框提供value属性,指定其被选中后提交的值
3.checked属性,可以指定默认值
checkbox:复选框
1.一般会给每一个单选框提供value属性,指定其被选中后提交的值
2.checked属性,可以指定默认值
file:文件选择框
hidden:隐藏域,用于提交一些信息
按钮:
submit:提交按钮,可提交表单
button:普通按钮
imag:图片提交按钮
src属性指定图片路径
lable:指定输入项的文字信息描述
lable的for属性一般会和input的id属性值对应,如果对应了,则点击lable区域,会让input输入框获取焦点
select:下拉列表
子元素:option,指定列表项
textarea:文本域
cols:指定列数,每一行有多少个字符
rows:默认行数
-->
<form action="#" method="post">
<lable for="username">
用户名:
</lable>
<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
密码:<input type="password" name="password" placeholder="请输入密码"><br>
性别:<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<br>
爱好:<input type="checkbox" name="hobby" value="shopping">逛街
<input type="checkbox" name="hobby" value="JAVA">JAVA
<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="sleeping">睡觉
<br>
图片:<input type="file" name="file">
<br>
隐藏域:<input type="hidden" name="id" value="aaa">
<br>
取色器:<input type="color" name="color">
<br>
生日:<input type="date" name="birthday">
<br>
生日:<input type="datetime-local" name="birthday">
<br>
年龄:<input type="number" name="age">
<br>
省份:<select name="province">
<option>--请选择--</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>山东</option>
</select>
<br>
自我介绍:<textarea cols="20" rows="5"></textarea>
<br>
<input type="submit" value="登录">
<br>
<input type="button" value="按钮">
<br>
<input type="image" src="index.jpg">
</form>
</body>
</html>
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
color:blue;
}
div{
color:red;
}
.class1{
color:green;
}
*{
color:purple;
}
div,p{
color:black;
}
div p{
color:yellow;
}
div>p{
color:orange;
}
input[type="text";]{
border:5px solid blue;
}
a:link{
color:pink;
}
a:visited{
color:pink;
}
a:hover{
color:pink;
}
a:active{
color:pink;
}
</style>
</head>
<!--
选择器分类:
1.基础选择器
1.id选择器:选择具体的id属性值的元素.建议在一个html页面中id的值唯一
语法:#id属性值
2.元素选择器:选择具有相同标签名称的元素
语法:标签名称{}
3.类选择器:选择具有相同的class属性值的元素
语法:class属性值{}
2.扩展选择器
1.选择所欲元素:
语法:*{}
2.并集选择器:
语法:选择器1,选择器2{}
3.子选择器:筛选选择器1元素下的选择器2元素
语法:选择器1 选择器2{}
4.父选择器:筛选选择器2的符元素选择器1
语法:选择器1>选择器2{}
5.属性选择器:选择元素名称,属性名=属性值的元素
语法:元素名称[属性名="属性值]{}
6.伪类选择器:选择一些元素具有的状态
语法:元素:状态{}
如:<a>
状态:
link:初始化的状态
visited:被访问过的状态
active:正在访问的状态
hover:鼠标悬浮状态
-->
<body>
<div id="div1">山东农业大学</div>
<div>信息科学与工程学院</div>
<div class="class1">计算机科学与技术</div>
<div>山东农业大学</div>
<div>信息科学与工程学院</div>
<div>计算机科学与技术</div>
<div>山东农业大学
<p>
信息科学与工程学院
</p>
<p>
计算机科学与技术
</p>
用户<input type="text">
<br>
密码<input type="password">
<br>
<a href="https://blog.csdn.net/qq_45836790" target="_blank">CSDN</a>
</div>
</body>
</html>
属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1.字体/文本
1.font-size:字体大小
2.color:文本颜色
3.text-align:文本对齐方式
4.line-height:行高
2.背景
background:#00ff00 url() no-repeat fixed center
3.边框
border:设置边框,复合属性
4.尺寸
width:宽度
height:高度
5.盒子模型:控制布局
1.margin:外边距
2.padding:内边距
box-sizing:border-box:设置盒子属性,让width和height就是盒子的高度和宽度
3.float:浮动
left:左浮动
right:右浮动
-->
<style>
p{
color:#FF0000;
font-size:30 px;
text-align:center;
line-height:20 px;
border:1px solid blue;}
div{
border:1px solid blue;
<!-- width:100px;-->
<!-- height:100px;-->
}
.div2{
width: 100px;
height: 100px;
<!-- margin:50px;-->
}
.div1{
width: 200px;
height: 200px;
padding:50px;
box-sizing:border-box;
}
.div3{
float:left;
}
.div4{
float:left;
}
.div5{
float:right;
}
</style>
</head>
<body>
<p>
山东农业大学
</p>
<div></div>
<hr>
<div class="div1">
<div class="div2"></div>
</div>
<div class="div3">aaaaa</div>
<div class="div4">bbbbb</div>
<div class="div5">ccccc</div>
</body>
</html>
扫一扫
619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
