html笔记

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" http-equiv="refresh" content="2;URL=http://www.baidu.com">    
    <meta charset="utf-8" http-equiv="x-ua-compatible" content="IE=edge">       
    <meta name="keywords" content="商城,网上购物,网购">           
    <meta name="description" content="专业线上综合购物平台，全球消费者挚爱的品质购物之城！">      
    <title>浏览器标签名称title>                  
    <style>h1{color: green} h6{color: red}style>     
    <link rel="stylesheet" href="test.css">     
    <script>alert("我是alert弹窗")script>      
    <script src="test.js">script>
head>
<body id="db">
    块级标签（独占一行，如p,h1,div），行内标签（自身多大就多大，如iusb,span）
    <hr>        
    <h1>你好啊h1>        
    <h6>你好啊h6>
    普通文本，<br>       
    <b>加粗b>@<i>斜体i> <u>下划线u>#<s>删除线s>$<p>段落标签p>*<p>1个p是1行，p标签只能嵌套行内标签p>
       (空格 )
    – (-符号)
    >    (大于号)
    <    (小于号)
    &   (&符号)
    ¥   (￥符号)
    ©  (?符号)
    ®   (?符号)
    <div>将页面划分区域div>
    <span>占位文本，类似占位符span>
    <img src="图片地址" alt="描述，当图片损坏时才能看见该描述" title="鼠标在图片上停留时出现的文字" height="高度" width="宽度">
    <a href="http://www.baidu.com" target="_self">点我跳转到百度，默认为_self，无需填写a>
    <a href="http://www.baidu.com" target="_blank新页面打开">点我跳转到百度a>
    <div style="height: 700px">
        <a id="d1">你好啊a>
            div>
    <a href="#d1">返回至你好啊a>
    <a href="#db">返回顶部a>
    <ul type="none">    
        <li>无序列表1li>
        <li>无序列表2li>
    ul>
    <ol type="1" start="3">
        <li>第一行li>
        <li>第二行li>
        <li>第三行li>
    ol>
    <dl>
        <dt>标题1dt>
        <dd>内容1dd>
        <dt>标题2dt>
        <dd>内容2dd>
    dl>
body>
html>

 表格标签

 1 <body>
 2     <table border="10" cellpadding="10" cellspacing="">
 3         <theade>
 4             <tr>        
 5                 <th>IDth>     
 6                 <td>NAMEtd>   
 7                 <th>AGEth>
 8                 <th>GENDERth>
 9             tr>
10         theade>
11         <tbody>
12             <tr>
13                 <td>1td>
14                 <td>xiaomingtd>
15                 <td>38td>
16                 <td>maletd>
17             tr>
18             <tr>
19                 <td>2td>
20                 <td>hanmeimeitd>
21                 <td>18td>
22                 <td>femaletd>
23             tr>
24             <tr>
25                 <td colspan="50">3td>     
26                 <td rowspan="2">lileitd>
27                 <td >73td>
28                 <td>maletd>
29             tr>
30             <tr>
31                 <td>4td>
32                 <td>polytd>
33                 <td>84td>
34                 <td>otherstd>
35             tr>
36         tbody>
37     table>
38 body>

表单标签

 1 <body>
 2     <h1>欢迎h1>
 3     <form action="跳转地址" method="post" enctype="multipart/form-data">    
 4         <label for="i1">
 5             用户名：<input type="text" id="i1">
 6         label>
 7         <br>
 8         <label for="i2">密  码：label>
 9         <input type="password" id="i2">
10         <label for="i3">颜色：<input type="color">label>
11         右面有个隐藏框=><input type="hidden">
12         <p>
13             <input type="text" disabled value="disabled">
14             <input type="text" readonly value="readonly">
15         p>
16         <p>gender:
17             <input type="radio" name="gd" value="male" checked="checked">male    
18             <input type="radio" name="gd" value="female">female
19         p>
20         <p>hobby:
21             <input type="checkbox" name="hobby" value="swim">swim
22             <input type="checkbox" name="hobby" value="read" checked>read
23             <input type="checkbox" name="hobby" value="song">song
24         p>
25         <p>province
26             <select name="province">
27                 <option value="河北">河北option>
28                 <option value="河南">河南option>
29                 <option value="hz" selected>河中option>
30             select>
31             贷款超人
32             <select name="dkcr" id="" multiple>     
33                 <option value="jb">借呗option>
34                 <option value="hb" selected>花呗option>
35                 <option value="bt">白条option>
36             select>
37             贷款技能
38             <select name="dkjn" id="" multiple>
39                 <optgroup label="主动技能">
40                     <option value="ku">哭option>
41                     <option value="nao">闹option>
42                 optgroup>
43                 <optgroup label="被动技能">
44                     <option value="md">手机没电option>
45                     <option value="wd">身在外地option>
46                 optgroup>
47             select>
48             <input type="file">
49             <textarea name="info" id="" cols="30" rows="10" >textarea>
50         p>
51         <input type="submit" value="提交">
52         <input type="button" value="点我呀">
53         <button>点我呀（自带提交功能的按钮）button>
54     form>
55 body>

 选择器

 1 <body>
 2 
 5 
 6     <div id="d1">文本div1
 7         <p id="p1">文本pp1p>
 8     div>
 9     <div id="d2" class="c2 c4">文本div2
10         <p id="p2">文本pp2p>
11     div>
12     <div id="d3" class="c3">文本div3
13         <p id="p3">文本pp3p>
14     div>
15     <div id="d4" class="c2">文本div4
16         <p id="p4">文本pp4p>
17     div>
18 
19 
20     <span>第一行：spanspan>
21     <p>第二行:pp>
22     <div>第三行：div
23         <p>第四行：div内的pp>
24         <span>第五行：div内的spanspan>
25         <p>第六行：div内的pp>
26         <span>第七行：div内的spanspan>
27     div>
28     <span>第八行：spanspan>
29     <p>第九行：pp>
30     <span>第十行：spanspan>
31     <p>第十一行：pp>
32 
33 
34     <input type="text" placeholder="你想输点什么？">
35     <p>1p>
36     <input type="text" name="abc" value="abc" disabled>
37     <p>2p>
38     <input type="text" name="opq" value="opq" readonly>
39     <p name="abc">3p>
40 
41 
42 <a href="http://www.baidu.com">百度a>
43 <input type="text">
44 
45 
46 <p>明天开盘又得跌，就是个韭菜的命p>
47 body>

/*基本选择器*/
    /*id*/
#d1{color: red}
/*class*/
.c2,.c3{color: blue}
/*!*组合选择器*!*/
/*    !*后代，内嵌的全部标签*!*/
div p{color: red}
/*    !*弟弟，下面同级别的全部标签*!*/
div~p{color: green}
/*    !*儿子，内嵌的第一级的全部标签*!*/
div>span{color: yellow}
/*    !*毗邻，下面紧挨的第一个标签*!*/
div+span{background-color: blue}
/*属性选择器*/
[name]{background-color: red}
[name='abc']{color:orange}
input[name='opq']{color: aqua}
/*伪类选择器*/
a:link{color: white;background-color: black}    /*普通状态*/
a:hover{color: green;background-color: black}   /*鼠标悬浮之上的状态*/
a:active{color: red;background-color: black}    /*鼠标选中不放的状态*/
a:visited{color: grey;background-color: black}  /*已访问过的状态*/
input:focus{background-color: steelblue}   /*input框获取焦点*/
/*伪元素选择器*/
p:first-letter{font-size: 40px;color: brown}
p:before{content: '无法复制吧';color: steelblue}
p:after{content: '复制不了吧';background-color: burlywood}

 字体、背景、边框、隐藏标签

<body>
    <div id="d1">我是div-d1，设置text-align:centerdiv>
    <a href="http://www.baidu.com">点我去百度,我的下划线没了a>
    <div id="d2">我是div-d2设置display:none的文字，应该看不见div>
    <div id="d3">我是div-d3（我上面有个d2，但隐藏了）我是块级标签，但我设置display:inlinediv>
    <div id="d4">我是div-d4，没设置displaydiv>
    <span id="s1">我是span-s1（我下面有个s2，但隐藏了）我是行内标签，但我设置display:blockspan>
    <span id="s2">我是span-s2,我是行内标签，但我设置display:blockspan>
    <span id="s3">我是span-s3（我上面有个s2，但隐藏了）我是行内标签，但我设置display:blockspan>
    <p>开头空两格大结局可能从哪里中心城市的氛围安第斯地区我法人股东非v染发膏表达方式而为人物个个2请问额外企鹅必须做的事如果返回湖南p>
body>

#d1{
    /*标签*/
    width: 600px;
    height: 40px;
    /*边框*/
    border-radius: 100px;
    border-color: green;
    border-width: 5px;
    border-style: ridge;
    /*背景*/
    background-color: brown;
    /*文本排列*/
    text-align: center
}
a{
    /*文本格式*/
    text-decoration: none;
    text-align: center;
}
#d2{
    width: 500px;height: 50px;
    /*不展示，位置也隐藏*/
    display: none;
}
#d3{
    width: 300px;height: 50px;
    background: green;
    /*将标签设置为行内属性，无法修改长宽*/
    /*display: inline;*/
    /*将标签设置为行内属性，可以修改长宽*/
    display: inline-block;
}
#d4{
    width: 300px;height: 50px;
    background: orange;
}
#s1{background: steelblue;
    /*将标签设置为块级标签属性*/
    display: block;
}
#s2{background: salmon;
    display: block;
    /*设置可见性，位置还在*/
    visibility: hidden;
}
#s3{background: #ceb12b;
    display: block;
}
p{
    /*标签*/
    height: 500px;
    width: 500px;
    /*边框*/
    border-radius: 50%;
    border: 1px solid red ;
    /*字体*/
    font-size: 16px;
    /*font-family: "Microsoft YaHei UI";*/
    font-weight: inherit;   /*继承字重，字体粗细*/
    color: rgba(68, 100, 213,0.7);
    /*文本格式*/
    text-decoration: underline;
    text-indent: 32px;
    /*背景*/
    /*background-color: burlywood;*/
    /*background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.officedoyen.com%2Fuploads%2Fallimg%2F180612%2F1-1P61223001a92.gif&refer=http%3A%2F%2Fwww.officedoyen.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1616178708&t=d28426941753c9f72298ddd413ff52bf");*/
    /*background-position: center;*/
    /*background-repeat: no-repeat;*/
    /*background-repeat: repeat-x;*/
    /*background-repeat: repeat-y;*/
    /*background-attachment: fixed;*/
    /*背景简写*/
    background: burlywood no-repeat center url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=893583318,39082211&fm=26&gp=0.jpg");
}

外边距、内边距

<body>
    <p id="p1">我是p-p1,我为测试margin而生p>
    <p id="p2">我是p-p2,我为测试margin而生p>
    <div id="d1">我是div-d1,我为测试margin而生
        <div id="d2">我是div-d2,我为测试margin而生div>
    div>
    <div id="d3">
        <p id="p3">
            我是p-p3,我为测试margin而生
        p>
        div>
body>

body,body *{
    /*外边距，标签与标签的距离.两个标签的外边距设置有冲突时取值大的为准*/
    margin: 0;
}
#p1{
    border: 1px greenyellow solid;
    /*margin: 0;*/
}
#p2{
    border: 1px red solid;
    /*上下，左右*/
    margin: 5px 10px;
    /*上，左右，下*/
    /*margin: 5px 10px 20px;*/
    /*上，右，下，左*/
    /*margin: 5px 10px 20px 30px;*/
}
#d1{height: 300px;width: 300px;
    border: black solid;
    text-align: center;
    margin-left: 50px;
}
#d2{height: 140px;width: 140px;
    background: steelblue;
    /*auto只能左右居中，不管上下*/
    margin: auto;
}
#d3{
    width: 350px; height: 200px;
    border: black solid;
    margin-top: 10px;
    /*内边距*/
    padding: 20px;
}
#p3{
    background: greenyellow;
}

解决塌陷、溢出

<body>
    <div id="d1" class="clearfix">
        <div id="dd1">div>
        <div id="dd2">div>
    div>
    <div id="d2">
        我是div-d2，我为测试溢出而生。我是div-d2，我为测试溢出而生。我是div-d2，我为测试溢出而生。我是div-d2，我为测试溢出而生。我是div-d2，我为测试溢出而生
    div>
    <div id="d3">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2924902919,387745997&fm=15&gp=0.jpg"
             alt="头像" title="这是一个头像">
    div>
body>

.clearfix:after{
    /*解决浮动塌陷问题*/
    content: '';
    display: block;
    clear: both;
}
#d1{
    border: 1px black dashed;
}
#dd1{
    height: 50px;width: 50px;
    background: green;
    /*浮动*/
    float: left;
}
#dd2{
    height: 50px;width: 50px;
    background: red;
    float: left;
}
#d2{
    width: 100px;height: 100px;border: 2px black dotted;
    /*当文本溢出标签后的操作*/
    /*overflow: visible;*/  /*可见*/
    /*overflow: hidden;*/   /*隐藏*/
    /*overflow: auto;     !*出现纵向下拉框*!*/
    overflow: scroll;   /*出现纵横2个下拉框*/
}
#d3{
    height: 120px;width: 120px;
    border: 3px green dotted ;
    border-radius: 50%;
    margin: auto;
    overflow: hidden;
}
#d3>img{
    max-width: 100%;
}
body{background: orange}

 定位

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body{margin: 0}
        /*相对定位，移动后原位置还保留*/
        #d1{
            height: 100px;width: 100px;background: green;
            /*定位默认为static*/
            position: relative;
            /*移动，负数为反向移动*/
            left: 100px;top: 10px;
            text-align: center;
            line-height: 100px;
        }
        #d2{
            height: 100px;width: 100px;background: red;
            text-align: center;
            line-height: 100px;
            position: relative;
        }
        /*绝对定位，以已经定位的父标签为基准移动，没有父标签就已body为基准*/
        #d3{
            height: 100px;width: 100px;background: chocolate;
            text-align: center;
            line-height: 100px;
            position: absolute;
            left: 70px;top:60px;
        }
        /*固定定位*/
        #d4{
            height: 30px;width: 80px;background: chartreuse;
            position: fixed;
            right: 10px;bottom: 100px;

        }
        #d5{
            height: 1500px;width: 50px;background: darkkhaki;
        }
    style>
head>
<body>
    <div id="d1">我是d1div>
    <div id="d2">我是d2
        <div id="d3">我是d3div>
    div>
    <div id="d4">固定定位div>
    <div id="d5">div>
body>
html>

 z-index模态框、透明度

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body{margin: 0}
        .cover{
            position: fixed;
            top: 0;bottom:0;left: 0;right: 0;
            background: rgba(28, 158, 158,0.5);
            z-index: 100;
        }
        .modal{
            height: 250px;width: 200px;background: white;
            position: fixed;
            left: 50%;top:50%;
            margin-left: -50px;margin-top: -50px;
            z-index: 100;
        }
        #p1{
            /*透明度opacity，影响背景色与字体*/
            opacity: 70%;
            color: chocolate;
        }
    style>
head>
<body>
    <div>我是最底层div>
    <div class="cover">我是cover层div>
    <div class="modal">我是模态框
        <p>name:<input type="text">p>
        <p>password:<input type="password">p>
        <button>提交button>
        <input type="reset" value="重置">
        <p id="p1">我是opacityp>
    div>

body>
html>