基本标签
文件标签
构成html最基本的标签
html:html文档的根标签
head:头标签,用于指定文档的一些属性,引入外部资源
title:标题标签
body:体标签
!DOCTYPE html :html5中定义该文档是html文档
文本标签
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>文本标签</title>
</head>
<br>
<!-- 标题标签 -->
<h4>定风波</h4>
<h4>苏轼</h4>
<!--换行-->
<i>三月七日,沙湖道中遇。雨具先去,同行皆狼,余独不觉,已而遂,故作此。</i></br><!-- i->斜体-->
莫听穿林打叶声,何妨吟啸且徐行。竹杖芒鞋轻胜马,谁怕?一蓑烟雨任平生。</br>
料峭春风吹酒醒,微冷,山头斜照却相迎。回首向来萧瑟处,归去,<b>也无风雨也无晴</b>。<!-- b->黑体-->
<!--显示一条水平线-->
<hr color="red" size="10" align="left" >
<!--段落标签-->
<p>看过这样一个故事:一对小夫妻开了个小店卖馒头,就一张红纸写了店名贴在门口。一个电蒸锅,一天也蒸不出几屉馒头。邻居都替他们发愁,这日子可咋过呢?</p>
<p>谁知过了几个月,来买馒头的人越来越多,红纸上便添了几个字,开始卖花卷、糖三角和发糕。又过了几个月,又添了煮黏苞米、
自制大酱、咸鸭蛋和咸菜……</p>
<p>作者写到,这家人“就像雨后抖动的一株草”。是的,这株草虽然柔弱,但却有一种令人感动的生命力。一对普通的小夫妻,通过一天天踏实的努力,生活越来越好。然而,也有一些人, 感觉自己没有握住一手好牌,便早早放弃了。</p>
<hr color="green" size="5" align="center" width="50%">
<!--字体标签-->
<center> <!--居中标签-->
<font color="black" size="20" face="宋体"> 加油!</font>
</center>
</body>
</html>
属性定义:color:1.英文单词:red、green等;
2.rgb(值1,值2,值3):值的范围:0~225(rgb为三原色的缩写)
3.#值1值2值3:值的范围:00~FF之间(取色器)
width:1.数值:例如:width=“20”,默认单位是像素;
2.数值%:占比相对于父元素的比例
图片标签
<!--展示一张图片-->
<img src="图片路径.jpg" alt="图片没有正确展示" width="50" height="50"/>
<!--
相对路径
*以.开头的目录
./代表当前目录
../代表上一级目录
-->
列表标签
<!-- 有序列表 -->
<ol type="A" start="3">
<li>睡觉</li>
<li>吃饭</li>
<li>学习</li>
</ol>
<!-- 无序列表 -->
<ul type="circle/square/disk" >
<li>睡觉</li>
<li>吃饭</li>
<li>学习</li>
</ul>
链接标签
<!--超链接 a-->
<a href="http://www.baidu.com">百度</a><br>
<a href="http://www.baidu.com" target="_blank">百度2</a>
</br><a href="./Demo2.html">图片标签</a></br>
<a href="http://www.baidu.com"><img src="为图片设置超链接.img"></a></br>
属性:href:指定访问资源的URL(统一资源定位符)
target:-self(默认):在当前界面打开;
-blank:在空白页面打开
表格标签
table:定义表格 caption::定义表格名
tr:定义行 thead:定义表格的头部分
tb:定义单元格 tbody:定义表格的体部分
th:定义表头单元格 tfoot:定义表格的脚部分
<table border="1" width="30%">
<caption>学生信息表</caption>
<!--
border:边框;width:宽度 cellspacing:定义单元格之间的距离
cellpadding:定义内容和单元格之间的距离 bgcolor:定义背景色-->
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>小明</td>
</tr>
<tr>
<td>02</td>
<td>小红</td>
</tr>
</tbody>
<tfoot>
<tr>
<td >colspan="2"备注</td>
<!-- 属性:该单元格占两列(rowspan=“2”,单元格占两列)-->
</tr>
<td >colspan="2"备注</td>
<!-- 属性:该单元格占两列(rowspan=“2”,单元格占两列)-->
</tr>
</tfoot>
</table>
表单标签
表单:用于采集用户输入数据的,用语和服务器进行交互。
标签:form
<!--
from:用于定义表单,可以定义一个范围,范围代表采集数据的范围
属性:action:指定提交数据的URL
method:指定提交方式
分类:共有七种,常用两种
get:1.请求参数在地址栏中显示
2.请求参数有大小限制
3.不太安全
post:1.请求参数在不会地址栏中显示,会封装在请求体中
2.请求参数没有大小限制
3.比较安全
表单项中的数据要想被提交,必须指定其name属性
-->
表单项标签
input:可以通过type属性值改变元素的展示样式
select:下拉列表textarea:文本域
<form action="#" method="post">
<lable for="usernaem"> 用户名:</lable><input type="text" name="username" placeholder="请输入用户名" id="usernaem"><br>
//label标签for后的内容与输入内容的id相同,可以定位光标
密码:<input tupe="password" name="password" placeholder="请输入密码"><br>
//type为密码类型可以隐藏输入
性别:<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女<br>
//type为radio单选框,应保证name后面的内容相同
爱好:<input type="checkbox" name="hobby" value="game">游戏
<input type="checkbox" name="hobby" value="ball">篮球
<input type="checkbox" name="hobby" value="chess" checked>象棋<br>
//type为checkbox复选框,应保证name后面的内容相同
上传图片:<input type="file" name="file"><br>
隐藏域:<input type="hidden" name="cc" value="aa"><br>
取色器:<input type="color" name="color"><br>
日期:<input type="date" name="data1"><br>
<input type="datetime-local" name="data2"><br>
邮箱:<input type="email" name="email"><br>
定义数字:<input type="number" name="number"><br>
按钮:
提交按钮:<input type="submit" value="登录">
按钮效果:<input type="button" value="这是一个按钮">
图片提交:<input type="img" src="图片路径">
下拉框:<select name="select">
<option value=""> 请选择</option>
<option value="1"> 1</option>
<option value="2"> 2</option>
</select><br>
文本域:<textarea cols="10" rows="20" name="text"></textarea>