HTML和CSS基础
html文件的结构:
<html>
<head>...</head>
<body>...</body>
</html>
<html></html>
称为根标签,所有的网页标签都在<html></html>
中。<head>
标签用于定义文档的头部,它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>
等标签,头部标签在下一小节中会有详细介绍。- 在
<body>
和</body>
标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>
等网页内容标签,在这里的标签中的内容会在浏览器中显示出来。
HTML注释:
<!--注释文字 -->
CSS注释:
/*注释语句*/
头标签:
<head>
<title>文档的标题</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>`
段落标签:
<p>段落文本</p>
标题标签:
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
【注意】h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。
并且依据重要性递减。h1是最高的等级。
强调标签:
<em>需要强调的文本</em>
<strong>需要强调的文本</strong>
【注意】<em>
的内容在浏览中显示为斜体,<strong>
显示为加粗。
单独样式标签:
<style>
span{ <!--样式设置--> }
</style>
<span>文本</span>
【注意】<span>
标签是没有语义的,它的作用就是为了设置单独的样式用的。
短文本引用标签:
<q>引用文本</q>
【注意】这里用<q>
标签的真正关键点不是它的默认样式双引号,而是它的语义:引用别人的话。
长文本引用标签:
<blockquote>引用文本</blockquote>
【注意】浏览器对<blockquote>
标签的解析是左右两边缩进样式。
分行显示文本标签:
xhtml1.0写法:<br />
html4.01写法:<br>
【注意】在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行,就必须输入<br />
或者<br>
。
添加一些空格:
添加水平横线:
html4.01版本: <hr>
xhtml1.0版本:<hr />
地址信息标签:
<address>联系地址信息</address>
短代码标签:
<code>代码语言</code>
【注意】如果是多行代码,可以使用<pre>
标签。
大段代码标签:
<pre>语言代码段</pre>
【注意】<pre>
标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
无顺序信息列表标签:
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
【注意】每项li前都自带一个圆点。
有顺序信息列表标签:
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
【注意】每项<li>
前都自带一个序号,序号默认从1开始。
独立的逻辑部分标签:
<div>…</div>
###给div命名:
<div id="版块名称">…</div>
表格标签:
<table summary="摘要">
<caption>表格标题</caption>
<tbody>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
<td>单元格3</td>
</tr>
</tbody>
</table>
创建表格的5个元素:
table、tbody、tr、th、td
1、<table>…</table>
:整个表格以<table>
标记开始、</table>
标记结束。
2、<tbody>…</tbody>
:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>
标签后,这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。
3、<tr>…</tr>
:表格的一行,所以有几对tr 表格就有几行。
4、<td>…</td>
:表格的一个单元格,一行中包含几对<td>...</td>
,说明一行中就有几列。
5、<th>…</th>
:表格的头部的一个单元格,表格表头。
6、表格中列的个数,取决于一行中数据单元格的个数。
【注意】1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
2、表头,也就是th标签中的文本默认为粗体并且居中显示
用css样式,为表格加入边框:
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
超链接标签:
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
【注意】默认情况下,链接的网页是在当前浏览器窗口中打开。
如果想在新的浏览器窗口中打开:
<a href="目标网址" target="_blank">click here!</a>
发送Email:
<a href="mailto:邮件地址1;邮件地址2 ?cc=抄送地址 &bcc=密件抄送地址 &subject=邮件主题 &body=邮件内容">发送</a>
【注意】1、如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
2、多个邮件地址用”;”隔开。
插入图片标签:
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
表单标签:
<form method="传送方式" action="服务器文件"></form>
【注意】1. :标签是成对出现的,以开始,以结束。
2.action :浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method : 数据传送的方式(get/post)。
4.所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在 标签之间(否则用户输入的信息可提交不到服务器上哦!)。
输入框标签:
<input type="text/password" name="名称" value="文本" />
【注意】1、type:
当type="text"
时,输入框为文本输入框;
当type="password"
时, 输入框为密码输入框。
2、name:为文本框命名,以备后台程序ASP 、PHP使用。
3、value:为文本输入框设置默认值。(一般起到提示作用)
文本输入域标签:
<textarea rows="行数" cols="列数">文本</textarea>
【注意】1、标签是成对出现的,以开始,以结束。
2、cols :多行输入域的列数。
3、rows :多行输入域的行数。
4、在<textarea></textarea>
标签之间可以输入默认值。
单选框/复选框标签:
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
【注意】1、type:
当type="radio"
时,控件为单选框
当 type="checkbox"
时,控件为复选框
2、value:提交数据到服务器的值(后台程序PHP使用)
3、name:为控件命名,以备后台程序 ASP、PHP 使用
4、checked:当设置 checked="checked"
时,该选项被默认选中
5、同一组的单选按钮,name 取值一定要一致,这样同一组的单选按钮才可以起到单选的作用。
下拉列表框标签:
<label>选择:</label>
<select multiple="multiple">
<option value="选择1">选择1</option>
<option value="选择2" selected="selected">选择2</option>
<option value="选择3">选择3</option>
<option value="选择4">选择4</option>
</select>
【注意】设置selected="selected"
属性,则该选项就被默认选中。
设置multiple="multiple"
属性,则下拉列表也可以进行多选操作:
在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。
提交按钮:
<input type="submit" value="提交">
【注意】type:只有当type值设置为submit时,按钮才有提交作用
value:按钮上显示的文字
重置按钮:
<input type="reset" value="重置">
【注意】type:只有当type值设置为reset时,按钮才有重置作用
value:按钮上显示的文字
label标签:
<label for="控件id名称">...</label>
【注意】当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
内联式css样式:
<p style="color:red;font-size:12px">这里文字是红色。</p>
嵌入式css样式:
<style type="text/css">
span{ color:red; }
</style>
【注意】嵌入式css样式必须写在<style></style>
之间,并且一般情况下嵌入式css样式写在<head></head>
之间。
外部式css样式:
<link href="base.css" rel="stylesheet" type="text/css" />
【注意】1、css样式文件名称以有意义的英文字母命名,如 main.css。
2、rel="stylesheet" type="text/css"
是固定写法不可修改。
3、标签位置一般写在标签之内。
类选择器:
.类选器名称{css样式代码;}
第一步:使用合适的标签把要修饰的内容标记起来,如下:
<span>胆小如鼠</span>
第二步:使用class=”类选择器名称”为标签设置一个类,如下:
<span class="stress">胆小如鼠</span>
第三步:设置类选器css样式,如下:
.stress{color:red;}/*类前面要加入一个英文圆点*/
【注意】1、英文圆点开头
2、其中类选器名称可以任意起名(但不要起中文噢)
ID选择器:
#ID器名称{css样式代码;}
第一步:使用合适的标签把要修饰的内容标记起来,如下:
<span>胆小如鼠</span>
第二步:使用id=”id名称”为标签设置一个id,如下:
<span id="stress">胆小如鼠</span>
第三步:设置id选择器css样式,如下:
#stress{color:red;}/*前面要加入一个'#'*/
【注意】1、ID选择器只能在文档中使用一次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。
子选择器:
.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li加入红色实线边框。
包含(后代)选择器:
.first span{color:red;}
总结:’>’作用于元素的第一代后代,空格作用于元素的所有后代。
【注意】子选择器(child selector)仅是指它的直接后代,
而后代选择器是作用于所有子后代元素。
通用选择器:
* {color:red;}
【注意】”*”的作用是匹配html中所有标签元素
伪类选择符:
选择标签:hover{样式;}
【注意】它允许给html不存在的标签(标签的某种状态)设置样式,
比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
提高权重:
p{color:red!important;}
【注意】!important要写在分号的前面
文字排版
1、字体:
body{font-family:"Microsoft Yahei";}
2、字号、颜色
body{font-size:12px;color:#666}
3、粗体
p span{font-weight:bold;}
4、斜体
p a{font-style:italic;}
5、下划线
p a{text-decoration:underline;}
6、删除线
.oldPrice{text-decoration:line-through;}
7、缩进
p{text-indent:2em;}
【注意】2em的意思就是文字的2倍大小。
8、行间距
p{line-height:1.5em;}
9、文字间距
h1{letter-spacing:50px;}
10、对齐
h1{text-align:center;} <!-- center:居中 , right:右对齐 ,left:左对齐 -->
元素分类
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
块状元素:
a{display:block;}<!-- 转换为块状元素 -->
【注意】1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,和父元素的宽度一致,除非设定一个宽度。
内联元素:
div{display:inline;}<!-- 转换为内联元素 -->
【注意】1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变。
内联块状元素:
div{display:inline-block;}<!-- 转换为内联块状元素 -->
【注意】1、和其他元素都在一行上。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
盒模型-边框(一):
div{
<!-- 边框三个属性 -->
border-width:2px;
border-style:solid;
border-color:red;
}
或者缩写:
div{
border:2px solid red;
}
【注意】
1、border-style(边框样式)常见样式有:
dashed(虚线)| dotted(点线)| solid(实线)。
2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
border-color:#888;//前面的井号不要忘掉。
3、border-width(边框宽度)中的宽度也可以设置为:
thin | medium | thick(但不是很常用),最常还是用象素(px)。
盒模型–边框(二):
div{
border-top:1px solid red;<!-- 上边框 -->
border-right:1px solid red; <!-- 下边框 -->
border-left:1px solid red;<!-- 左边框 -->
border-bottom:1px solid red;<!-- 右边框 -->
}
盒模型–宽度和高度:
div{
width:200px;
height:30px;
padding:20px;
border:1px solid red;
margin:10px;
}
【注意】1、盒子的宽度=左/右边界(margin)+左/右边框(border)+左/右填充(padding)+内容宽度(width)。
2、css内定义的宽(width)和高(height),指的是填充以里的内容范围。
盒模型–填充(padding)/边界(margin)边框(border):
div{padding:20px 10px 15px 30px;} <!-- 上、右、下、左(顺时针) -->
或者:
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
或者:
div{padding:10px;} <!-- 上、右、下、左的填充都为10px -->
或者:
div{padding:10px 20px;} <!-- 上下填充一样为10px,左右一样为20px -->
【注意】padding、border的缩写方法和margin是一致的。
css布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
层模型有三种形式:
①绝对定位(position: absolute)
②相对定位(position: relative)
③固定定位(position: fixed)
浮动模型:
div{
float:left; <!-- float:right; -->
}
【注意】div、p、table、img 等元素都可以被定义为浮动。
层模型–绝对定位:
div{
position:absolute;
left:100px;
top:50px;
}
【注意】如果想为元素设置层模型中的绝对定位,需要设置position:absolute
(表示绝对定位),
这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接
近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,
即相对于浏览器窗口。
层模型–相对定位:
div{
position:relative;
left:100px;
top:50px;
}
【注意】如果想为元素设置层模型中的相对定位,
需要设置position:relative
(表示相对定位),它通过left、right、top、bottom属性
确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)
方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动
的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
层模型–固定定位:
div{
position:fixed;
left:100px;
top:50px;
}
【注意】fixed:表示固定定位,与absolute定位类型类似,
但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。
水平居中
1、分为两种情况:行内元素 还是 块状元素 ,
块状元素里面又分为定宽块状元素,以及不定宽块状元素。
2、如果被设置元素为文本、图片等行内元素时,
水平居中是通过给父元素设置 text-align:center 来实现的。
.txtCenter{
text-align:center;
}
3、如果被设置元素为 定宽块状元素 时,用width和margin实现。
div{
border:1px solid red;/* 为了显示居中效果明显为 div 设置了边框 */
width:200px;/* 定宽 */
margin:auto;/* margin-left 与 margin-right 设置为 auto */
/* width和margin缺一不可 */
}
4、如果被设置元素为 不定宽块状元素 时,有3种实现方法。
①加入 table 标签
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
②设置 display: inline
方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
.container{text-align:center;}
.container ul,li{display:inline;}
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
③通过给父元素设置 float,然后给父元素设置 position:relative
和 left:50%
,
子元素设置position:relative
和 left: -50%
来实现水平居中。
wrap{
background:#abc;
clear:both;
float:left;
position:relative;
left:50%
}
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
<div class="wrap">
<div class="wrap-center">我们来学习一下这种方法。</div>
</div>
垂直居中:
1、分两种情况:父元素高度确定的单行文本,以及父元素高度确定的多行文本。
2、父元素高度确定的单行文本的竖直居中的方法是通过设置
父元素的 height 和 line-height 高度一致来实现的。
.container{
height:100px;
line-height:100px;
background:#999;
}
<div class="container">
hi,imooc!
</div>
3、父元素高度确定的多行文本、图片等的竖直居中的方法有两种:
①方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle
。
table td{height:500px;background:#ccc}
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
【注意】因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
②在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell
(设置为表格单元显示),激活 vertical-align 属性
.container{
height:300px;
background:#ccc;
display:table-cell; /*IE8以上及Chrome、Firefox*/
vertical-align:middle; /*IE8以上及Chrome、Firefox*/
}
隐性改变display类型:
1、position : absolute
2、float : left
或 float:right
【注意】只要html代码中出现以上两句之一,元素的display显示类型就会自动变为
以display:inline-block
(块状元素)的方式显示,当然就可以设置元素
的 width 和 height 了,且默认宽度不占满父元素。