html常用标签使用,编写一个简单的注册页面

曦月朗空

已于 2022-01-21 10:51:12 修改

阅读量1.2k

点赞数 2

文章标签： html 前端 css3

于 2022-01-21 10:47:54 首次发布

本文链接：https://blog.csdn.net/yangkkkkaaad/article/details/122616345

版权

1.文件标签：构成HTML最基本的标签
html：html的根标签
head：头标签。指定html的属性。引入外部资源
title：标题标签
body：体标签
<!DOCTYPE>：定义html文档
2.文本标签：和文本有关的标签

	<h1>to<h6>：标题标签
	<p>：段落标签
	<br>：换行
	<hr>：水平线标签	
		color：颜色
		width：宽度
		size：高度
		align：对齐方式center，left，right
	<b>：字体加粗
	<i>：斜体
	<font>:字体标签
		color：颜色  size：大小  face：字体

3.图片标签：img ：src：写相对路径 ./ 代表当前目录 …/ 代表上一级目录
4.列表标签：
有序列表：
ol：使用列表
li：列表项
无序列表：
ul：使用无需列表
li：列表项
5.链接标签：

	<a href="http://www.baidu.com">点我</a> 默认连接使用
	<a href="http://www.baidu.com" target="_blank">点我</a>  新开一页
	<a href="./3_图片.html " target="_blank">图片</a>  寻找图片
	<a href="mailto:xxxxxx@163.com">联系我</a>  邮箱连接
	<a href="http://www.baidu.com"><img src="./image/123.jpg"/> 点击图片连接

6.span ,div
span:文本信息在一行展示，行内标签，内联标签，不换行
div:块级标签，换行
7.语义化标签

	<header>
	<footer>

8.表格标签：
table:定义表格
tr：定义行
td：定义单元格
td的属性值：
cospan：合并行
rospan：合并列
th：定义表头单元格
caption：标题
thead：表示表格头
tbody：表示表格体部分
tfoot：表示表格脚部分
例子

<table border="1" width="50%" cellpadding="0" cellspacing="0">
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>1</td>
        <td>拿破仑</td>
        <td>45</td>
    </tr>
    <tr>
        <td>2</td>
        <td>张无忌</td>
        <td>20</td>
    </tr>
</table>
	table:定义表格
	tr：定义行
	td：定义单元格
	td的属性值：
		cospan：合并行
		rospan：合并列
	th：定义表头单元格
	caption：标题
	thead：表示表格头
	tbody：表示表格体部分
	tfoot：表示表格脚部分

结果

编号	姓名	年龄
1	拿破仑	45
2	张无忌	20

9.表单标签：用于采集用户输入的数据。用户和服务器进行交互。

   <form>
 <!--表单标签。可以定义一个范围，范围代表采集用户数据的范围
		 属性 action：提交数据的url
       		 method：指定提交方式 get post
	-->
	<form action="#" method="get">
    	用户名：<input name="username"><br>
    	密码：<input name="password"><br>
    	<input type = "submit" value="登陆">
	</form>
get与post的区别
get：
   1.请求参数会在地址栏中显示
   2.请求参数长度有限制
   3.不太安全
post：
   1.请求参数不会显示在地址栏	
   2.请求参数大小无限制
   3.比较安全

input：通过type值改变标签展示样式
*type取值 text：文本输入框，
	password：密码输入框，
	radio：单选框：checked表示提供的默认值，指定value属性，提交属性值
	checkbox：复选框
	file：文件选择框
	hidden：隐藏域，提交一些信息
	按钮：
	  submit：提交按钮
	  button：一个按钮
	  image：图片按钮
	  color：取色器
	  date：日期
	  datetime：带时间的日期
		src属性指定图片
label：指定文字描述信息
select：下拉列表：
	option：表示列表项
textarea：文本域

注册页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="get">
        <table border="1" align="center" width="500">
            <tr>
                <td colspan="2" align="center">注册页面</td>
            </tr>
            <tr>
                <td><label for="username">用户名：</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td><label for="password">密码：</label></td>
                <td><input type="password" name="password" id="password"></td>
            </tr>
            <tr>
                <td><label for="email">Email：</label></td>
                <td><input type="email" name="email" id="email"></td>
            </tr>
            <tr>
                <td><label for="name">姓名：</label></td>
                <td><input type="text" name="name" id="name"></td>
            </tr>
            <tr>
                <td><label for="telephone">手机号：</label></td>
                <td><input type="text" name="telephone" id="telephone"></td>
            </tr>
            <tr>
                <td><label >性别：</label></td>
                <td><input type="radio" name="gender" value="male">男
                    <input type="radio" name="gender" value="female">女</td>
            </tr>
            <tr>
                <td><label for="birthday">出生日期：</label></td>
                <td><input type="date" name="date" id="birthday"></td>
            </tr>
            <!--<tr>
                <td><label for="username">验证码：</label></td>
                <td><input type="text" name="username" id="username"></td>
            </tr>-->
            <tr>
                <td colspan="2" align="center"><input type="submit" value="注册" ></td>
            </tr>
        </table>
    </form>

Title