前端基础 -- html （一）

一：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>