CTF前端基础-html

CTF-前端基础 html

1.html基本元素

 <!DOCTYPE html> <!-- html5标准网页声明-->
 <html></html> <!-- 限定了文档的开始点和结束点-->
 <head></head> <!-- 头部元素的容器-->
 <meta charset=""/> <!-- 规定HTML文档的字符编码-->
 <title></title> <!-- 网页的标题-->
 <body></body> <!-- 定义文档的主体-->
 <div></div> <!-- 区隔标记,块元素-->

示例:在这里插入图片描述

2.文本元素

 <p></p> <!-- 独占一行--> 
 <b></b> <!-- 加粗显示-->
 <i></i> <!-- 斜体-->
 <u></u> <!-- 下划线-->
 <br> <!-- 换行-->
 <hr> <!-- 一条横线-->
 <a href="" target=""></a> <!-- 超链接-->

注意:a元素中的href属性值为目标网页地址,target属性为打开目标网页的方式。(_self为刷新本页面打开,_blank为在新页面中打开)

示例:
在这里插入图片描述在这里插入图片描述

3.表格元素

 <table border="1" cellspacing="1" cellpadding="1"> <!-- 创建表格-->
 <tr></tr> <!-- 表中一行-->
 <th></th> <!-- 表头-->
 <td></td> <!-- 表中的一个单元格-->

注意:th和td标签中有colspan属性和rowspan分别可以合并单元格的行和列。

示例:在这里插入图片描述在这里插入图片描述

4.序列元素

<ol type="A"></ol> <!-- 定义有序列表-->
<ol reversed></ol> <!-- 定义逆序列表-->
<ul></ul> <!-- 定义无序列表-->
<li></li> <!-- 列表元素-->

注意:ol元素的type属性的值为有序列表元素的序号,通常取‘A’、‘a’、‘1’,ol元素的reversed属性表示逆序,不需要属性值。列表可以嵌套使用。

示例:
在这里插入图片描述
在这里插入图片描述

5.表单元素

<form action="" method=""></form> <!-- 定义表单-->
<input type="text" placeholder="name" maxlength="8"> <!-- 可输入文本框-->
<input type="text" value="123456" readonly="readonly"/> <!-- 只读文本框-
<input type="password"/></td> <!-- 密码文本框-->
<textarea rows="8" cols="36"></textarea> <!-- 多行文本框-->
<input type="button" name="" id="" value="按钮" /> <!-- 普通按钮-->
<input type="submit" name="" id="" value="提交" /> <!-- 提交按钮-->
<input type="range" min="-100" max="100" step="10"/> <!-- 滑动条 -->
<input type="number" min="-100" max="100" value="0"/> <!-- 数字框-->
<input type="radio" name="a" id="" value="1" /> <!-- 单选-->
<input type="checkbox" name="1" id="" value="1" /> <!-- 多选-->
<select>
	<option value ="1"></option> <!-- 选项列表-->
</select>

注意:input元素的value属性的字符占位,而placeholder属性不占位;maxlength属性是文本框可输入的最大长度,size属性是文本框的长度;

示例:

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值