HTML详细内容

1.head标签

2.body标签

<h>标题标签  h1到h6依次变小
自带换行功能(块级标签)
<hr/>好人(拼音)的分界线
<br/>换行符
align(位置):center,left,right
width="600px/40%"
size(字体高度)
color(颜色)
<b>加黑
<i>斜体
<u>下划线
<pre>原样输出文本

3.列表标签

有序列表:<ol><li>   1. 2. 3.(可用type更改:I,a,A)
无序列表:<ul><li>  .  .  .
自定义列表:<dl><dt><dd>

4.图片标签

img

<img src:图片路径 。
相对路径:从当前文件出发查找另一个文件所经过的路径
绝对路径:从根盘符出发所查找文件的路径
width:  height:  
title=图片名(鼠标附着效果) 
alt(加载失败的提示语)
>

5.超链接

a

<a href="要跳转的网页资源路径“>内容(文字/图片)</a>
target:_self   在当前页中刷新展示
       _blank  在新页中展示
       _top    在顶层页面中显示
       _parent  在父级页面中显示
       
**锚点**<a href="#first">名字</a>
**在一张网页中进行资源跳转**,格式为<a id="first"></a>
<a href="#">刷新网页,回到顶部,也可以直接设锚点

6.表格标签

table

快接建:table>tr*4>td*545列)
table:声明一个表格
  tr:声明一行
    td:声明一格
    th:声明单元格,表头格,剧中加黑
属性:border:给表格加边框
      (tr)hight:行修饰个高
     (th,th)width:表头控制宽
      cellpadding:设内容与边的距离
      cellspacing:设置边框大小
合并单元格
1.确认是完整的表格
2.找到要合并的单元格位置
3.列合并:在第一个位置加入rowspan+"合并个数",删除另一个的位置
  行合并:同理,只是加入的是colspan

7.内嵌标签

iframe
在这里插入图片描述

7.框架标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8.form标签

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

快捷方式:form>input*3+select

实战:
1.模拟百度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>牛逼一下</title>
	</head>
	<body>
		<h3>模拟百度</h3>
		<hr >
		<form action="https://www.baidu.com/s" method="get">
			<input type="text" name="wd">
			<input type="submit" value="牛逼一下">
			</form>
	</body>
</html>

在这里插入图片描述

2.注册页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h3>注册页面</h3>
		<hr />
		<form action="#" method="get">
			<table border="1px" cellspacing="0" cellpadding="10px">
				<tr height="35px">
					<td width="70px">用户名:</td>
					<td width="200px">
						<input type="text" name="1"  />
					</td>
				</tr >
				<tr height="35px">
					<td>密码:</td>
					<td>
						<input type="password" name="2"  />
					</td>
				</tr>
				<tr height="35px">
					<td>邮箱:</td>
					<td><input type="text" name="emile"  /></td>
				</tr>
				<tr height="35px">
					<td>手机号:</td>
					<td><input type="text" name="3"  /></td>
				</tr>
				<tr height="35px">
					<td>性别:</td>
					<td>
						男:<input type="radio" name="sex" id="" value="4.1" />
						女:<input type="radio" name="sex" id="" value="4.2" />
					</td>
				</tr>
				<tr height="35px">
					<td>爱好:</td>
					<td>
						唱跳<input type="checkbox" name="hobby" id="" value="5.1" />
						rap<input type="checkbox" name="hobby" id="" value="5.2" />
						打篮球<input type="checkbox" name="hobby" id="" value="5.3" />
					</td>
				</tr>
				<tr height="35px">
					<td>籍贯</td>
					<td>
						<select name="6">
							<option value="6.1">中国</option>
							<option value="6.2">美国</option>
							<option value="6.3">日本</option>
							<option value="6.4">外太空</option>
						</select>
					</td>
				</tr>
				<tr height="35px">
					<td>个人介绍</td>
					<td>
						<textarea  namrows="6px" cols="20px" name="show" value="7">
						</textarea>
					</td>
				</tr>
				<tr height="35px">
					<td colspan="2"><input type="checkbox" name="8" id="" value="8" />是否同意本公司的协议</td>
					
				</tr>
				<tr height="35px">
					<td colspan="2"><input type="submit" value="注册"/></td>
					
				</tr>
			</table>
			
		</form>
	</body>
</html>

1=朱&2=123&emile=1627039473&3=18224525696&sex=4.1&hobby=5.1&hobby=5.2&6=6.4&show=%09yyy%09%09%09%09%09&8=8#
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

JJpZh

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值