前端基础（一）

一、head.demo.html
<!--html5-->
<!DOCTYPE html>
<html lang="en">
<head>
    <!--head中写的东西有个特点 就是不会在页面中呈现-->
    <!--字符集编码-->
    <!--自闭合标签-->
    <meta charset="UTF-8">
    <!--标签中存在属性-->
    <!--有标签自带属性和自定义属性-->
    <!--打开页面1秒后刷新-->
    <!--<meta http-equiv="refresh" content="1">-->
    <!--打开页面1秒后跳转到百度-->
    <meta http-equiv="refresh" content="1;http://www.baidu.com">
    <!--title是你浏览器tab的标签名-->
    <!--主动闭合标签-->
    <title>金牛座</title>
    <!--title的图标-->
    <!--rel代表告诉浏览器我要把link当做title的图标-->
    <link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg" >
    <!--引入CSS样式表-->
    <link rel="stylesheet" href="xx.css">
    <!---引入js或者写js的->
    <script></script>
</head>
<body>

</body>
</html>

二、body.demo.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
dfggfgfdgdsf
<!--<p>段落标签-->
<!--<br>换行标签-->
<!--<p>dfggfgfdgdsf<br>-->
         <!--dfggfgfdgdsf</p>-->
<!--标题标签-->
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
<!--div是块级标签-->
<!--块级标签无论自己有多大 都占满一整行-->
<!--伪白板标签-->
<!--<div>水电费</div>-->
<!--span行内标签 或叫 内联标签-->
<!--行内自己有多大 就占多大-->
<!--白板标签 没有附着css样式的就叫做白板标签-->
<!--<span>水电费</span>-->
<!--<p>s123</p>-->
<!--<span>水电费</span>-->

<!--文本框-->
<!--name属性是跟后端交互的key value属性是跟后端交互的值-->
<!--{"username":"admin","passwd":"123123"}-->
<!--<input type="text" placeholder="请输入用户名" value="admin" name="username">-->
<!--passwd 密文-->
<!--<input type="password" placeholder="请输入密码" name="passwd">-->
<!--radio 单选-->
<!--<span>男</span><input type="radio" name="sex">-->
<!--<span>女</span><input type="radio" name="sex">-->
<!--check box 多选框-->
<!--<span>奔驰</span><input type="checkbox" checked="checked">-->
<!--<span>宝马</span><input type="checkbox" name='c' value='1'>-->
<!--上传文件-->
<!--<input type="file">-->
<!--表单标签-->
<form action="http://www.baidu.com" method="post">
    <div>
        <span>用户名：</span>
        <input type="text" placeholder="请输入用户名">
    </div>
    <div>
        <span>密&nbsp&nbsp&nbsp码：</span>
        <input type="text" placeholder="请输入密码">
    </div>
    <div>
        <!--button如果想要有操作 只能通过js绑定事件来做-->
        <input type="button" value="登录">
        <!--submit按钮如果和form表单连用则会直接触发请求-->
        <input type="submit" value="注册">
        当reset和form表单连用时，会触发重置操作
        <input type="reset">
    </div>
</form>
<!--特殊转义符-->
<!--&ltp&gt&lt/p&gt-->
<p></p>
<!--label扩展input的可点击范围-->
<!--<label for="i1">用户名</label>-->
<!--<input id="i1" type="text" placeholder="请输入密码">-->
<!--复文本标签-->
<!--<textarea>金牛座复文本标签</textarea>-->

<!--下拉框标签-->
<!--<select name="s1">-->
<!--<option value="1">中秋</option>-->
<!--<option value="2">国庆</option>-->
<!--<option selected="selected">都过不上</option>-->
<!--</select>-->

<!--<select>-->
<!--<optgroup label="黑龙江">-->
<!--<option>请选择城市</option>-->
<!--<option>哈尔滨</option>-->
<!--<option>牡丹江</option>-->
<!--</optgroup>-->
<!--<optgroup label="河北">-->
<!--<option>石家庄</option>-->
<!--<option>秦皇岛</option>-->
<!--</optgroup>-->
<!--</select>-->
<!--超链接标签-->
<!--<a href="http://www.baidu.com">跳转到百度</a>-->
<!--图片标签-->
<!--<img src="http://ui.imdsx.cn/static/image/dsx_Smal1l.jpg" alt="图片加载失败战士的文案" title="鼠标悬浮显示的文案">-->

<!--列表 点的列表-->
<!--<ul>-->
<!--<li>第一列</li>-->
<!--<li>第二列</li>-->
<!--</ul>-->
<!--&lt;!&ndash;数字的列表&ndash;&gt;-->
<!--<ol>-->
<!--<li>第一列</li>-->
<!--<li>第二列</li>-->
<!--</ol>-->


<table border="1">
    <thead>
    <tr>
        <th>id</th>
        <th>请求方式</th>
        <th>请求参数</th>
        <th colspan="2">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td rowspan="4">post</td>
        <td>{}</td>
        <td>修改</td>
        <td>执行</td>
    </tr>
    <tr>
        <td>1</td>
        <td>{}</td>
        <td>修改</td>
        <td>执行</td>
    </tr>
    <tr>
        <td>1</td>
        <td>{}</td>
        <td>修改</td>
        <td>执行</td>
    </tr>
    <tr>
        <td>1</td>
        <td>{}</td>
        <td>修改</td>
        <td>执行</td>
    </tr>
    </tbody>
</table>

</body>
</html>
三、css样式及优先级
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--head中style是第一处写css样式的地方-->
    <style>
        .c1{
            background-color: red;
        }
    </style>
    <!--第三种引入css样式表-->
    <link rel="stylesheet" href="s.css">

s.css里面：

.c1{
    background-color: pink;
}


</head>
<body>
    <!--第二种通过属性的方式对标签增加css样式-->
    <div class="c1" style="background-color: black">1</div>
    <!--优先级-->
    <!--由内而外 由近到远-->

</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*.c1{*/
            /*!*宽度*!*/
            /* 100px;*/
            /*!*高度*!*/
            /*height: 100px;*/
            /*!*背景色*!*/
            /**/
        /*}*/
        /*.c1{*/
            /* 100px;*/
            /*height: 100px;*/
            /*!*外边框 1像素 红色 实线*!*/
            /*border: 1px red solid;*/
            /*!*水平居中*!*/
            /*text-align: center;*/
            /*!*垂直居中*!*/
            /*line-height: 100px;*/
        /*}*/
        /*.f1{*/
            /* 100px;*/
            /*height: 48px;*/
            /**/
            /*float: left;*/
        /*}*/
    </style>
</head>
<body>
    <!--<div class="c1"></div>-->
    <!--font-size 大小 font-weight 粗细-->
    <!--<div style="font-size: xx-large;font-weight: bolder">金牛座</div>-->

    <!--<div class="c1">1</div>-->

    <!--浮动-->
    <!--<div class="f1"></div>-->
    <!--<div class="f1" style="</div>-->
    <!--<div class="f1" style="float: right"></div>-->

    <!--宽度可以使用百分比的方式 高度 不可以 写百分比-->
    <!--<div style=" 30%;height: 48px;</div>-->

    <!--display 可以让标签在行内 和 块级之间 自由转换
    块转行内display: inline;
    行内转块display: block;

    即使块 又是 行内display:inline-block;
    -->
    <!--<div style="display: inline;">金牛座</div>-->
    <!--<span style="display: block;">金牛座</span>-->
    <!--行内标签不可以应用 宽、高 外边距 内边距的样式-->
    <!--<span style=" 100px;height: 100px">123</span>-->
    <!--<span style="display:inline-block; 100px;height: 100px;"></span>-->

    <!--<div style="display:none;border:1px red solid;100px;height: 100px;"></div>-->
    <!--<input type="file">-->

    <!--外边距
    不改变自身，针对外侧进行像素移动
    -->
    <!--<div style=" 100%;height: 100px;border: 1px red solid">-->
        <!--<div style="margin-top:1px; 100%;height: 48px;</div>-->
    <!--</div>-->

    <!--内边距
    改变自身

    -->
    <!--<div style=" 100%;height: 100px;border: 1px red solid">-->
        <!--<div style="padding-top:1px; 100%;height: 48px;</div>-->
    <!--</div>-->

    <!--分层.html-->
    <!--<input type="button" value="登录" style="cursor: pointer">-->
    <!--overflow滚动条
    overflow: hidden 当图片或内容大于外层div时，自动 截取左上角图片

    overflow: auto 当内容或图片小于外层div则自动隐藏滚动条
    overflow: scroll 无论大小 都在增加滚动条

    -->

    <!--<div style="overflow: scroll;border: 1px black solid; 200px;height: 200px">-->
        <!--<img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg">-->
    <!--</div>-->

    <!--<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat:repeat-y; 200px;height: 200px;border: 1px black solid">-->

    <!--</div>-->

    <!--<div style="background-position: 1px 1px;background-repeat: no-repeat;background-image: url('http://ui.imdsx.cn/static/image/icon.png'); 20px;height: 20px;border: 1px black solid;"></div>-->

</body>
</html>

四、分层
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{

            height: 48px;
            background-color: green;
            position: fixed;
            top:0;
            left: 0;
            right: 0;


        }
    </style>
</head>

<!--postion 分层 fixed 绝对定位-->
<body style="margin: 0">
    <!--<div class="c1"></div>-->
    <!--&lt;!&ndash;<div style="height: 48px; 48px;position: fixed;right: 0;bottom: 0;"></div>&ndash;&gt;-->
    <!--<div style="margin-top:48px;height: 1000px; 100%;border: 1px red solid;-->
        <!--金牛座 真厉害-->
    <!--</div>-->
    <!--postion 相对定位-->
    <!--<div style="position: relative;500px;height:500px;border:1px black solid;">-->
        <!--<div style="position: absolute; 100px;height: 100px;</div>-->
        <!--<div style="position: absolute; 100px;height: 100px;</div>-->
        <!--<div style="position: absolute; 100px;height: 100px;</div>-->
        <!--<div style="right: 0;bottom:0;position: absolute; 100px;height: 100px;</div>-->
    <!--</div>-->
    <!--z-index-->
    <!--<div style="position: relative; 200px;height: 200px;border: 1px red solid">-->
        <!--<div style="z-index: 10;position: absolute; 200px;height: 200px;</div>-->
        <!--<div style="z-index: 9;position: absolute; 200px;height: 200px;</div>-->
    <!--</div>-->

</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/mengmeng1011/p/9752011.html