HTML基础总结

1.块元素 display:block

<p>、<h>、<ul>、<ol>、<div>、<hr>、<form>

2.行元素display:inline

<b>、<strong>、<i>、<em>、<sup>、<sub>、<small>、<span>、<a href></a>、<label>

3.行内块元素display:inline-blocks

<img src="">、<iframe src=""></iframe>、<input type="">、<button>、<textarea>、<select>

4.HTML标签解释

<hr />                                    <!--水平分割线 -->
<ul>                                      <!-- 无序列表 -->
<ol>                                      <!-- 有序列表 -->
<b>                                       <!-- 加粗-->
<strong></strong>                         <!-- 加粗,起强调作用-->
<i>                                       <!-- 倾斜作用 -->    
<em></em>                                 <!-- 强调作用的倾斜 -->		
<font></font>                             <!-- 字体的类型和大小颜色 -->
<sub></sub>                               <!-- 下标显示-->
<sup></sup>                               <!-- 上标显示 -->
<marquee direction=""></marquee>          <!-- 滚动文本标签 -->

<!-- table 表格标签
	 border:表格四边的宽度
	 bordercolor:四边边框颜色
     cellspacing:单元格外间距
	 cellpadding:单元格内填充
	 rules:表格间隔线设置 行列显示 rows  cols all
	 frame:表格四边的显示 abov上 below下 lhs左 rhs右
	 bgcolor:背景色
	 align:水平对齐方式
	 valign:垂直对齐方式
	 rowspan:行合并;colspan:列合并
-->    

5.表单标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 表单标题
		<fieldset id="">
			<legend></legend>
		</fieldset> -->
		<!-- 1.表单标签 -->
		<!--action: 提交服务器的地址-->
		<!-- method:提交方法
		             post:将数据封装成数据包发送给服务器;
		             get:将数据放在地址栏给服务器发过去-->
		<form enctype="multipart/form-data" action="http://192.168.17.3:8888/s" method="get">
			<!-- 2.表单域 -->
			<!-- 2.1 单行文本输入框 -->
			<!-- name=value 向服务器发送数据 -->
			<!-- placeholder 提示文本 -->
			<!-- maxlength 字符的最大长度 -->
			<!-- required 提交时的验证 不能为空 -->
			<input type="text" name="wd" id="wd" value="" required="required" maxlength="10" placeholder="请输入内容"/>
			<br>
			<!-- 2.2 密码输入框 -->
			<input type="password" name="pwd" id="q1" value="" required="required" placeholder="请输入密码"/>
			<br>
			<!-- 2.3多行文本输入框 -->
			<textarea name="te1" rows="3" cols="10">	
			</textarea>
			<br>
			<!-- 2.4 下拉列表 --><!-- multiple(多选) -->
			<select name="city">
				<option value ="郑州">郑州</option>
				<option value ="开封">开封</option>
				<option value ="鹤壁">鹤壁</option>
			</select>
			<br>
			<!-- 2.5 单选按钮 多个单选按钮 如果是一组的话,将name统一-->
			<!-- <label> for属性可以绑定到对应的表单域属性 for=id -->
			<!-- checked 属性实现默认勾选 -->
			<label for="r1">男</label><input type="radio" name="sex" id="r1" value="男" />
			<label for="r2">女</label><input type="radio" name="sex" id="r2" value="女" />
			<br>
			<!-- 2.6 多选按钮 checkbox-->
			<!-- <label for="s1">🍉</label><input type="checkbox" name="s1" id="s1" value="西瓜" />
			<label for="s2">🍌</label><input type="checkbox" name="s2" id="s2" value="香蕉" />
			<label for="s3">🍊</label><input type="checkbox" name="s3" id="s3" value="橘子" /> -->
			<ul>
				<li><label for="s1">🍉</label><input type="checkbox" name="s1" id="s1" value="西瓜" /></li>
				<li><label for="s2">🍌</label><input type="checkbox" name="s2" id="s2" value="香蕉" /></li>
				<li><label for="s3">🍊</label><input type="checkbox" name="s3" id="s3" value="橘子" /></li>
			</ul>
			<br>
			<!-- 2.7 文件选择表单 -->
			<!-- 要修改form表单的enctype编码为:multipart/form-data;要不然文件提交不了 -->
			<input type="file" name="f1" id="f1" value="" />
			<br>
			<!-- 其他的表单域 -->
			<input type="color" name="" id="" value="" />
			<input type="date" name="" id="" value="" />   <!-- datetime-local 日期时间,按照本地的时区 -->
			<input type="range" name="" id="" value="" />
			<!-- 3.表单按钮 -->
			<br>
			<!-- 提交按钮 submit-->
			<input type="submit" value="提交"/>
			<!-- 重置按钮 reset-->
			<input type="reset" name="" id="" value="重置" />
			<!-- 自定义按钮 button-->
			<input type="button" name="" id="" value="自定义按钮" />
			<!-- 隐藏域 -->
			<!-- 使用隐藏域增加表单的验证安全,可以防止跨站请求伪造 -->
			<input type="hidden" name="" id="" value="" />
			
		</form>
	</body>
</html>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值