Html与CSS学习（一）

来源：互联网发布：windows程序设计学什么编辑：程序博客网时间：2024/06/07 02:31

博客核心内容：

1、html与css
2、内边距、border和外边距
3、标签如何在整个页面进行居中

参考链接：
www.cnblogs.com/yuanchenqi/articles/6835654.html
http://www.cnblogs.com/yuanchenqi/articles/6856399.html
①html结构与标签的格式：

<head>    <meta charset="UTF-8">    <title>汽车之家</title></head><body>    <!--<h1 属性名="属性值">wang</h1>-->    <h2>ting</h2>    <h3>ting</h3>    <div>        <h1>wang</h1>    </div></body></html>

②head标签的使用：

<head>    <meta name="keywords" content="DBS自动审批">    <meta name="description" content="DBS审批">    <!--<告诉浏览器以utf-8格式的编码进行解码>-->    <meta charset="UTF-8">    <!--<2s之后跳转到百度页面>-->    <!--<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">-->    <!--<head标签里面主要就是meta标签和非meta标签>-->    <title>Title</title>    <!--<通过link可以加载图标icon>-->    <link rel="icon" href="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1d68b8f42a077e5fc13dd53282b884ad_121_121.jpg"></head>

运行效果：
这里写图片描述
③body内基本标签介绍：

    <!--<h标签:加粗>遇到多个空格会按照一个空格进行渲染</h3>-->    <!--<br>标签是换行标签-->    <!--&lt;!&ndash;<p>&#45;&#45;标签是段落标签,并且行与行之间含有距离>-->    <!--<hr>标签是一条分割线-->    <!--<b>标签用于加粗,<strong>用于加粗,<hello>用于倾斜-->    <!--特殊符号的应用:比如换行-->    &reg;

代码示例：

<body>    <h3>tingbao</h3>tingbao    <!--<h标签:加粗>遇到多个空格会按照一个空格进行渲染</h3>-->    wang ting                    ting <br>    <!--<br>标签是换行标签-->    <h4>静 夜  &nbsp;&nbsp;&nbsp;思</h4>    <!--&lt;!&ndash;<p>&#45;&#45;标签是段落标签,并且行与行之间含有距离>-->    <p>窗前明月光 </p>    <p>意识地上床</p>    <!--<hr>标签是一条分割线-->    <hr>    <!--<b>标签用于加粗,<strong>用于加粗,<hello>用于倾斜-->    <b>hello</b>    <strong>hello</strong>    <i>hello</i>    <strike>100</strike>    <!--特殊符号的应用:比如换行-->    &reg;</body>

运行结果：
这里写图片描述
div标签和span标签的作用：div标签和span标签的作用是一样的(没有效果,需要css配合使用才有意义),仅仅是标签的分类不一样而已，这两个标签需要配合css使用才有意义。
代码示例：

<head>    <meta charset="UTF-8">    <title>Title</title>    <!--<title>通过css渲染的方式可以查看一个标签是内联标签还是快级标签</title>-->    <div style="background-color: red"><h1>ting</h1></div>    <!--<title>div标签和span标签的作用是一样的(没有效果,需要css配合使用才有意义),仅仅是标签的分类不一样而已</title>-->    <h1><span style="background-color: red">ting</span></h1> hehe</head>

运行结果：
这里写图片描述
④img标签的使用：

    <body>       <h2>熊猫宝宝</h2>       <!--<title>通过image标签可以将一张图片嵌入到我们的页面当中,若图片加载失败,则显示alt后的属性值</title>-->       <img src="cat.jpg" width="200px" height="150px" alt="动物" title="懒惰的熊猫">    </body>

样例：
这里写图片描述
⑤常用标签之超链接标签：
代码示例：

    <body>    <p>熊猫宝宝</p>    <p><img src="cat.jpg" width="200px" height="100px" alt="图片" title="熊猫宝宝"></p>    <!--</a>标签是超链接标签,通过target可以保留原页面-->    <a href="http://www.baidu.com" target="_blank">点我</a>    <a href="常用标签之img的使用6.html" target="_blank">click</a>    <!--</a>image在这里起到的是文本的作用-->    <a href="http://www.baidu.com" target="_blank"><img src="cat.jpg"></a>    </body>

运行结果：
这里写图片描述
⑥列表：有序、无序、创建列表
代码：

    <body>       <!--<ul>为无序列表,用的比较多:实心圆-->       <ul>           <li>123</li>           <li>456</li>           <li>789</li>       </ul>       <!--<ol>为有序列表:阿拉伯数字-->       <ol>           <li>123</li>           <li>456</li>           <li>789</li>       </ol>       <!--<dl>为定义列表-->       <dl>           <dt>河北省</dt>           <dd>承德市</dd>           <dd>保定</dd>           <dd>石家庄</dd>       </dl>    </body>

运行结果：
这里写图片描述
⑦表格标签：
代码示例：

<body>    <!--<cellpadding>用于设置表格内文本与边框的距离, cellspacing指的是单元格之间的距离-->    <table BORDER="1" cellpadding="10px" cellspacing="5px">        <!--<tr>在这里面是行的意思-->        <tr>            <!--<th>相当于<td><strong>,常用于表格的头部-->            <th>姓名</th>            <th>年龄</th>            <th>性别</th>            <th>工资</th>        </tr>        <tr>            <td>111</td>            <td>111</td>            <td>111</td>            <td>111</td>        </tr>        <tr>            <!--<colspan>用于单元格横跨多少列-->            <td colspan="2">222</td>            <td>222</td>            <!--<rowspan>用于单元格横跨多少行-->            <td rowspan="2">222</td>        </tr>        <tr>            <td>333</td>            <td>333</td>            <td>333</td>        </tr>    </table></body>

运行结果：
这里写图片描述
⑧常用标签之表单标签（一）
代码：

<body>    <!--在python当中是通过键值对这种映射关系向服务端发送消息的-->    <!--登陆所用的输入框基本上都是form标签:与server端通信的功能&#45;&#45;,post代表post请求方式发送>-->    <!--action中填写的是server端登陆的地址,但是现在这两个参数用不了-->    <h3>注册页面</h3>    <form action=""  method="post">        <!--input标签一定要有一个name属性作为键,一个value属性作为值,type决定是什么功能的-->        <!--{username:xxxx,pwd:xxxx},name在这里充当key的作用,键是通过name来标志的-->        <p>姓名: <input type="text" name="username" ></p>        <p>密码: <input type="password" name="pwd"  ></p>        <!--checkbox是复选框的意思,既可以进行多选-->        <!--篮球,足球,乒乓球是给用户看的,给server端发送的是:name:[basketball,pingpang]这种样式-->        <p>爱好: <input type="checkbox" name="hobby" value="basketball"> 篮球                <input type="checkbox" name="hobby" value="football"> 足球                <input type="checkbox" name="hobby" value="pingpang"> 乒乓球        </p>        <!--radio是从多个选项当中选择一个-->        <p>性别: <input type="radio" name="sex" value="man">男                <input type="radio" name="sex" value="woman">女        </p>        <p><input type="button" value="按钮"></p>        <p><input type="file" ></p>        <!--下面的value和上面的value不是同一个含义-->        <p><input type="reset"></p>        <p><input type="submit" value="提交"></p>    </form></body>

运行结果：
这里写图片描述
⑨常用标签之表单标签（二）
代码：

    <body>        <p style="background-color: red" >select标签</p>        <form action=""  method="post">            <p>                <!--label在这里有点类似于指针的意思-->                <label for="user">姓名: </label>                <!--name和ID的数值可以重复,两个并没有冲突-->                <input type="text" id="user" name="username" value="fdsf">            </p>            <!--name作为键值对整体的key值:name:[value,value,value]-->            <!--size代表用户可以直接看到的选项个数,multiple代表可以选多个-->             <select name="province" id=""  size="3" multiple="multiple" >                 <option value="hebei" >河北省</option>                 <option value="henan">河南省</option>                 <!--selected和checked是相同的功能:默认选中-->                 <option value="shandong" selected>山东省</option>                 <option value="liaoning">辽宁</option>                 <option value="helongjiang">黑龙江</option>             </select>             <!--textarea为多行文本框-->             <p>个人简介:<textarea name="person" id="1" cols="30" rows="10"></textarea></p>        </form>    </body>

运行结果：
这里写图片描述
⑩css代码引入方式1：
代码：

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /*<!--1、名字查找-->*/        /*p{*/            /*color: red;*/        /*}*/        /*div{*/            /*color:blue;*/            /*font-size: 20px;*/        /*}*/        /*2、id选择器*/        /*#p1{*/            /*background-color: wheat;*/            /*font-size: 20px;*/        /*} */        /*3、类选择器*/        /*.p_ele{*/            /*color: #a2fff2;*/            /*font-size: 20px;*/        /*}*/        /*4、通配符选择器*/        *{            color: #ffb0fc;            font-size: 30px;        }    </style>        /*5、文件选择器*/        /*<link rel="stylesheet" href="css.name">*/</head><body>    <div>hello word1</div>    <p id="p1" class="p_ele">hello word2</p>    <div class="p_ele">hello word3</div>    <p>hello word4</p></body>

⑾CSS当中的选择器：

4、CSS 选择器有哪些？(用于查找标签元素)1）id 选择器（#myid）id是不会重复的2）类选择器（.myclassname） 类名是可以重复的3）标签选择器（div，h1，p） 4）相邻选择器（h1 + p）5）子选择器（.outer > p）6）后代选择器（.outer p）7）通配符选择器（* ）8）属性选择器（ [rel] ==> [rel = "external"] ==> p[rel = "external"]）9）伪类选择器（a: hover, li: nth - child）17、可继承的样式： font-size font-family color, UL LI DL DD DT18、不可继承的样式：border padding margin width height19、优先级就近原则，同权重情况下样式定义最近者为准20、多元素原则器 （p,div,.title）21、并且选择器 （h2.title）既是h2标签,又是.title标签

具体链接：http://blog.csdn.net/a2011480169/article/details/75949262
⑿仿京东的图片操作：（这个例子很重要，可以知道一个标签中的文本如何居中）
文本在标签中居中的方法：

text-align: center;line-height = height

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .btn{            width: 40px;            height: 60px;            background-color: darkgray;            text-align: center;            line-height: 60px;            font-size: 30px;            color: white;        }    </style></head><body>    <div class="btn"> > </div></body>

运行结果：
这里写图片描述

⒀内边距、border和外边距（注意：背景色指的是全部、高度和宽度指的是内容区自己）

    <head>        <meta charset="UTF-8">        <title>Title</title>        <style>            .item,.item2{                /*内容区*/                height: 200px;                width: 200px;                /*背景色加的是div标签,不仅仅是内容区*/                background-color: wheat;                /*设置border的厚度*/                border:5px solid red;                padding-top: 100px;                padding-left: 100px;            }            .item1{                margin-bottom: 50px;            }            /*body与html的标签距离为0*/            body{                margin: 0px;            }        </style>    </head>    <body>          <!--将标签理解为一个盒子-->          <div class="item item1">aaaa</div>          <div class="item2">bbbb</div>    </body>

运行结果：
这里写图片描述
⒁标签如何在整个页面进行居中

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        /*<!--设置样式的过程是按照标签加载的顺序执行的-->*/        .item1{            background-color: red;            width: 100px;            height: 100px;            /*如何将一个标签进行居中:auto代表左右的意思,高度没有办法居中*/            margin: 0 auto;        }        .item2{            width: 100px;            height: 100px;            background-color: blue;            /*如何将一个标签进行居中:0代表外边距中的上边距的距离*/            margin: 0 auto;        }    </style></head><body>    <div class="item1">1111</div>    <div class="item2">2222</div></body>

这里写图片描述
⒂CSS当中的漂浮：假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
标准流中的标签只看标准流的，和float的标签没有半毛钱关系。
情况1：上一个元素是漂浮的：

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .item1{            width: 200px;            height: 200px;            background-color: red;            float: left;        }        .item2{            width: 400px;            height: 400px;            background-color: wheat;            float:left;        }    </style></head><body>        <div class="item1"></div>        <div class="item2"></div></body>

这里写图片描述
情况2：

<head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .item1{            width: 200px;            height: 200px;            background-color: red;        }        .item2{            width: 400px;            height: 400px;            background-color: wheat;            float:left;        }    </style></head><body>        <div class="item1"></div>        <div class="item2"></div></body>

这里写图片描述

阅读全文

0 0