参考文章 | ||
https://www.cnblogs.com/pythonywy/p/11265345.html | ||
表单 | 表单元素 | 块级元素和内联元素 | css |
form | submit | div | |
action | text | span | |
method | password | ||
name | value | ||
input |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<!-- 文本域 -->
<input type="text">
<!-- 按钮 -->
<input type="submit">
<!-- 密码框 -->
<input type="password">
</form>
<form action="">
用户名：<input type="text">
密码：<input type="password">
<!-- value 框里面的文本 -->
<input type="submit" value="登陆">
<!-- 下拉按钮 -->
<!-- 多选按钮 -->
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>表单</h1>
<!-- action 传入服务器的地址 method 提交的方式 name 表单名字 -->
<!-- get url可以看到 post url看不到 -->
<form action="www.baiud.com" method="get" name="man">
</form>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 块级元素 -->
<div>我是块</div>
<div>我是块</div>
<div>我是块</div>
<!-- 独占一行，自上向下垂直排列，可以设置宽高 -->
<!-- 还有其他元素就没有举例子了，百度 -->
<!-- 内联元素 -->
<span>我是内联元素，我只占自身大小</span>
<span>我是内联元素，我只占自身大小</span>
<span>我是内联元素，我只占自身大小</span>
<!-- 内联元素，只占自身大小，宽高设置无效 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- html5标签 -->
<!-- 有利于搜索引擎优化，网站的排名靠前 -->
<!-- 更语义化标签，更好的使用 -->
<header>
头部
</header>
<nav>
导航
</nav>
<article>
<section>
</section>
</article>
<aside>
侧边栏
</aside>
<footer>
底部
</footer>
</body>
</html>
