HTML详细内容

最新推荐文章于 2024-07-17 17:17:48 发布

JJpZh

最新推荐文章于 2024-07-17 17:17:48 发布

阅读量255

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/dsafghljk/article/details/115702542

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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 href="要跳转的网页资源路径“>内容(文字/图片)</a>
target:_self   在当前页中刷新展示
       _blank  在新页中展示
       _top    在顶层页面中显示
       _parent  在父级页面中显示

**锚点**：
<a href="#first">名字</a>
**在一张网页中进行资源跳转**，格式为<a id="first"></a>
<a href="#">刷新网页，回到顶部，也可以直接设锚点

6.表格标签

table

快接建：table>tr*4>td*5（4行5列）
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#
在这里插入图片描述

JJpZh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML详细内容

head标签body标签<h>标题标签 h1到h6依次变小自带换行功能（块级标签）<hr/>好人(拼音)的分界线align(位置)：center,left,rightwidth="600px/40%"size(字体高度)color（颜色）列表标签有序列表：<ol><li> 1. 2. 3.(可用type更改：I,a,A)无序列表:<ul><li> . . .自定义列表:<dl><
复制链接

扫一扫