Html与CSS学习（一）
博客核心内容：
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>
<h2>tingh2>
<h3>tingh3>
<div>
<h1>wangh1>
div>
body>
html>②head标签的使用：
<head>
<meta name="keywords" content="DBS自动审批">
<meta name="description" content="DBS审批">
<meta charset="UTF-8">
<title>Titletitle>
<link rel="icon" href="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/1d68b8f42a077e5fc13dd53282b884ad_121_121.jpg">
head>运行效果：
③body内基本标签介绍：
®代码示例：
<body>
<h3>tingbaoh3>tingbao
wang ting ting <br>
<h4>静 夜 思h4>
<p>窗前明月光 p>
<p>意识地上床p>
<hr>
<b>hellob>
<strong>hellostrong>
<i>helloi>
<strike>100strike>
®
body>运行结果：
div标签和span标签的作用：div标签和span标签的作用是一样的(没有效果,需要css配合使用才有意义),仅仅是标签的分类不一样而已，这两个标签需要配合css使用才有意义。
代码示例：
<head>
<meta charset="UTF-8">
<title>Titletitle>
<div style="background-color: red"><h1>tingh1>div>
<h1><span style="background-color: red">tingspan>h1> hehe
head>运行结果：
④img标签的使用：
<body>
<h2>熊猫宝宝h2>
<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 href="http://www.baidu.com" target="_blank">点我a>
<a href="常用标签之img的使用6.html" target="_blank">clicka>
<a href="http://www.baidu.com" target="_blank"><img src="cat.jpg">a>
body>运行结果：
⑥列表：有序、无序、创建列表
代码：
<body>
<ul>
<li>123li>
<li>456li>
<li>789li>
ul>
<ol>
<li>123li>
<li>456li>
<li>789li>
ol>
<dl>
<dt>河北省dt>
<dd>承德市dd>
<dd>保定dd>
<dd>石家庄dd>
dl>
body>
运行结果：
⑦表格标签：
代码示例：
<body>
<table BORDER="1" cellpadding="10px" cellspacing="5px">
<tr>
<th>姓名th>
<th>年龄th>
<th>性别th>
<th>工资th>
tr>
<tr>
<td>111td>
<td>111td>
<td>111td>
<td>111td>
tr>
<tr>
<td colspan="2">222td>
<td>222td>
<td rowspan="2">222td>
tr>
<tr>
<td>333td>
<td>333td>
<td>333td>
tr>
table>
body>运行结果：
⑧常用标签之表单标签（一）
代码：
<body>
<h3>注册页面h3>
<form action="" method="post">
<p>姓名: <input type="text" name="username" >p>
<p>密码: <input type="password" name="pwd" >p>
<p>爱好: <input type="checkbox" name="hobby" value="basketball"> 篮球
<input type="checkbox" name="hobby" value="football"> 足球
<input type="checkbox" name="hobby" value="pingpang"> 乒乓球
p>
<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>
<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 for="user">姓名: label>
<input type="text" id="user" name="username" value="fdsf">
p>
<select name="province" id="" size="3" multiple="multiple" >
<option value="hebei" >河北省option>
<option value="henan">河南省option>
<option value="shandong" selected>山东省option>
<option value="liaoning">辽宁option>
<option value="helongjiang">黑龙江option>
select>
<p>个人简介:<textarea name="person" id="1" cols="30" rows="10">textarea>p>
form>
body>运行结果：
⑩css代码引入方式1：
代码：
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
/**/
/*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 word1div>
<p id="p1" class="p_ele">hello word2p>
<div class="p_ele">hello word3div>
<p>hello word4p>
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 DT
18、不可继承的样式：border padding margin width height
19、优先级就近原则，同权重情况下样式定义最近者为准
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>Titletitle>
<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>Titletitle>
<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">aaaadiv>
<div class="item2">bbbbdiv>
body>运行结果：
⒁标签如何在整个页面进行居中
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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">1111div>
<div class="item2">2222div>
body>
⒂CSS当中的漂浮：假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
标准流中的标签只看标准流的，和float的标签没有半毛钱关系。
情况1：上一个元素是漂浮的：
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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>Titletitle>
<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>