一：html页面结构：
1.页面框架：
<!DOCTYPE html> #页面类型 <html lang="en"> <head> #头部信息 <meta charset="UTF-8"> #字符集信息 <title>百度首页</title> # 打开一个页面显示的标签信息 <style> #放入CSS调试的样式 </style> </head> <body> #放入被css调试样式的主体内容，例如<p>,<a>,等 </body> </html>
- <!DOCTYPE html> 告诉浏览器使用什么样的html或者xhtml来解析html文档
- <html></html>是文档的开始标记和结束标记。此元素告诉浏览器其自身是一个 HTML 文档，在它们之间是文档的头部<head>和主体<body>。
- <head></head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。
- <title></title>定义网页标题，在浏览器标题栏显示。
- <body></body>之间的文本是可见的网页主体内容
2.样式类型：
.reg {
border: none; #边框信息
145px; #宽度
height: 42px; #高度
padding-left: 0; 做内边框距离
text-align: center; 字体居中
border-radius: 3px;
background: #f7f7f7; #背景色
border: 1px solid #ddd; 边框及厚度及颜色
}
3.image 标签：
'''
src: 要显示图片的路径.
alt: 图片没有加载成功时的提示.
title: 鼠标悬浮时的提示信息.
图片的宽
height:图片的高 (宽高两个属性只用一个会自动等比缩放.)
'''
例子：
<a href="#"> <img src="./01.jpg" alt="图片来了" width="200" height="300"> </a>
4.超链接标签：（用于关联和引用文件）
<a href="#"> <img src="./01.jpg" alt="图片来了" width="200" height="300"> </a>
#alt 表示图片没有加载成功时的提示
5.列表标签：
''' <ul>: 无序列表 [type属性：disc(实心圆点)(默认)、circle(空心圆圈)、square(实心方块)] <ol>: 有序列表 <li>:列表中的每一项. <dl> 定义列表 <dt> 列表标题 <dd> 列表项 '''
6. <label>标签：
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
1 label 元素不会向用户呈现任何特殊效果。
2 <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
''' <form method="post" action=""> <label for="username">用户名</label> <input type="text" name="username" id="username" size="20" /> </form> '''
7.清楚浮动的简单方法：
方法一：
<!--内墙法：在最后浮动的元素的后面加一个空的块级标签 设置该标签的属性clear:both;--> # 设置样式： <style> .clearfix{ clear: both; } </style> <body> <div class="content"> <div class="container" > <ul> <li class="item">1</li> <li class="item">2</li> <li class="item">3</li> <li class="item">4</li> <li class="clearfix"></li> <!--内墙法：在最后浮动的元素的后面加一个空的块级标签 设置该标签的属性clear:both;--> </ul> </div> </div> </body
8.form表单信息
<div class="reg"> <form action="http://127.0.0.1:8080" method="post" enctype="application/x-www-form-urlencoded"> <p> <label for="user">用户名</label> <input type="text" name="username" id="user" placeholder="请输入用户名" class="a"> </p> <p> <label for="phone">手机号</label> <input type="text" name="phone" id="phone" placeholder="请输入手机号" class="a"> </p> <p> <label for="pwd">密码</label> <input type="password" name="pwd" id="pwd" placeholder="请输入账户密码"class="a"> </p> <p> <label for="verifyCode">验证码</label> <input type="text" name="verifyCode" id="verifyCode" class="a b"> <input type="button" value="获取短信验证码" class="code"> </p> <p class="regs"> <!--p只能放 span a 表单控件--> <input type="submit" value="注册"> </p> </form> </div> 描述： 1.<div class="reg">： 定义一个类名：reg 2.action： 交给后端的服务器地址： 3.method： 请求方式：get 或者 post 4.<p> ：段落标签，块级标签，独占一行 5.<label>：标签行内标签 6.<input type="button" value="获取短信验证码" class="code"> ：获取短信验证码的方式 7.<input type="submit" value="注册"> ：注册图标 8.name属性：将name="username" 中的username定义为一个变量，输入的值作为value传给后端，后端接收到的信息为：username=555&phone=666&pwd=777&verifyCode=888
9. 盒子模型：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 180px; height: 180px; background-color: green; /*padding: 20px;*/ padding-top: 20px; padding-left: 20px; /*border: 1px double red;*/ /*如果保持盒模型不变，加padding，就要减内容的宽高*/ border-radius: 5px ; /*margin垂直方向会出现塌陷问题，避免问题的问题只设置一个标准文档流的盒子的垂直方向的margin*/ margin-bottom: 100px; /*盒子的宽度 = 内容的宽度 + 2*padding + 2*border*/ } .box2{ width: 100px; height: 100px; background-color: yellow; margin-top: 50px; } </style> </head> <body> <div class="box">alex</div> <div class="box2">wusir</div> </body> </html>