- 首先说概念:
HTML是一种超文本标记语言
在HTML当中存在着大量的标签,我们用HTML提供的标签,将要显示在网页中的内容包含起,构成我们的网页
HTML控制网页上显示的内容,CSS控制网页上显示的效果
HTML+CSS=静态网页
HTML基本的框架标签:
<html>
<head> <!--头指针-->
<title></title>
<head>
<body>
</body>
</html>
2.HTML中常用的标签(要注意有始有终)
p标签:段落标签
 :空格
h#:标题标签
<!--要注释的内容-->:注释符
<img/>:图片标签,用来显示图片。
src:表示被显示的图片的路径
height:图片高度
width:图片宽度
alt:当图片由于某些原因显示失败的时候所显示的文本
title:当光标移动到图片的时候显示的文本
<hr/>:水平线
<br.>:拆行
(>):>号
(>):<号
&(&):&号
&(nbsp):空格
<font>:字体标签 size:1~7 color:颜色
<b>:定义粗体文本
<i>:定义意大利斜体
<tt>:定义打字机文本
<u>:定义下划线文本
<sup><sub>:定义上下标
<s>:定义加删除线的文本
<pre>:自定义格式标签
<a>:超链接标签 <a href="http"//www.baidu.com" target="_blank">百度</a>
_blank“:表示打开一个新窗口 _self表示在当前界面打开窗口
第二个作用:实现界面内部的跳转(回到顶端和回到底端)
<a name="顶端" href="#底端">回到底端</a>
<a name="底端 " href="#顶端">回到顶端</a>
3.body常用的属性
text属性:文本的颜色
link属性:(链接的颜色)(如果改成白色谁都看不到)
alink属性:点击时候的颜色
vlinl属性:点击之后的颜色
bgcolor属性:背景颜色
background属性:背景图片,平铺
4.无序列表和有序列表
<ul>无序列表
<ol>有序列表 使用方式基本一样
<ul>
<li> 星期一吃鲍鱼</li>
<li>星期二吃龙虾</li>
</ul>
运行效果如下
5.表格
<table>单元格
border:表格边框
cellspaciong属性:设置单元格与边框的距离
cellpadding属性:设置文本和单元格的距离
<tr>表示一行
<th>表示一个标题单元格(字体比普通的单元格更黑)
<td>表示一个普通单元格
<td colspan="2">:表示单元格占了两列
<td rowspan="2">:表示单元格占了两行
<td align="conter">:内容居中(也可以左右)
<td valign=" ">:内容上下调节
6.表单:表单在HTML当中使用应该算是非常多的了
<form action ="http://www.baidu.com" method="get">
用户名:<input type ="text" name="txtNameame"/><br/>
密 码:<input type ="password" name ="txtPwd"/><br/>
<input type = "submit" value="提交到百度"/>
<input type="reset" value ="清空"/><br/>
div标签:层级标签
noresize属性:禁止移动
运行结果:
HTML重要的东西暂且到这,接下来是一部分CSS的内容,以及一个简单的小设计。
CSS
1.CSS实现了网页内容和页面效果的彻底分离
2.css写入代码的的三种方式
内联样式表:在标签内设置元素的样式(比较灵活,但是多了很麻烦)
嵌入样式表:需要在head标签内写
3…样式规则的选择器(六种)
HTML Selector :可以选择标签去做
<style type ="text/css">
p{
background-color=red
}
tt {
background-color:green;
}
</style>
Class Selector(类选择器):选择一类是使用
<style type="text/css">
tt.tt1 {
background-color:black;
}
</style>
<tt class="tt1">床前明月光,疑是地上霜。举头望明月,低头思故乡</tt>
ID Selector(ID选择器): 尽量不要给标签赋值同一个ID,尽量单个使用
<style type ="text/css">
#p1 {
background-color:red;
}
#p2 {
background-color:green;
}
#p3 {
background-color:white;
}
</style>
<p id="p1">今天天气好晴朗,处处好风光</p> <!--内联样式表-->
<p id="p2">今天天气好晴朗,处处好风光</p>
<p id="p3">今天天气好晴朗,处处好风光</p>
<p id="p4">今天天气好晴朗,处处好风光</p>
关联选择器:
<style type="text/css">
p em {
background-color:red;
}
</style>
<p><em>今天天气好晴朗,处处好风光</em></p>
组合选择器:
<style type="text/css">
h1, h2, h3, h4, h5, h6, td {
background-color:red;
}
</style>
<h1>我是你爹</h1>
<h2>我是你爹</h2>
伪元素选择器:伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式
4.盒子模型
一个简单的小网页:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type ="text/css">
* {
margin:0px;
font-size:12px;
}
div.divIndex {
height:380px;
width:290px;
background-color:#F8F8F8;
margin:0px auto;
}
div.div1 {
height:35px;
width:290px;
background-color:blue;
color:white;
text-align:center;
}
div.div p {
font-size:18px;
padding:8px;
}
#table1 {
width:290px;
}
td.td1 {
font-weight:bolder;
}
td.td2 {
color:#246DB2;
padding:6px;
border-bottom:1px dashed #CCCCCC;
}
td.td3 {
color:red;
font-weight:bolder;
border-bottom:1px dashed #CCCCCC;
text-align:right;
}
td.td4 {
color:blue;
font-weight:bolder;
border-bottom:1px dashed #CCCCCC;
text-align:right;
}
div.divtable {
}
</style>
</head>
<body>
<div class="divIndex" >
<table id="table1">
<tr>
<td><div class ="div1"><p>.NET开班培训信息</p></div></td>
</tr>
<tr>
<td>
<div class="divtable">
<table width="290px">
<tr>
<td class="td1">.NET基础班 </td>
<td></td>
</tr>
<tr>
<td class ="td2">安国---2021年1月3号</td>
<td class="td3">预约报名中</td>
</tr>
<tr>
<td class ="td2">北京---3月6号</td>
<td class="td4">爆满已开班</td>
</tr>
<tr>
<td class ="td2">广州---5月20号</td>
<td class="td3">预约报名中</td>
</tr>
<tr>
<td class ="td2">广州---4月12号</td>
<td class="td4">爆满已开班</td>
</tr>
<tr>
<td class="td1">.NET就业班</td>
<td></td>
</tr>
<tr>
<td class ="td2">北京---2014年4月26号</td>
<td class="td3">预约报名中</td>
</tr>
<tr>
<td class ="td2">北京---2014年4月26号</td>
<td class="td4">爆满已开班</td>
</tr>
<tr>
<td class ="td2">北京---2014年4月26号</td>
<td class="td3">预约报名中</td>
</tr>
<tr>
<td class ="td2">北京---2014年4月26号</td>
<td class="td4">爆满已开班</td>
</tr>
<tr>
<td class="td1">.NET远程班</td>
<td></td>
</tr>
<tr>
<td class ="td2">北京---2014年4月26号</td>
<td class="td3">基础班预约报名中</td>
</tr>
<tr>
<td class ="td2">北京---2014年4月26号</td>
<td class="td3">基础班预约报名中</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
网页效果:
这是一种经常在网页上见到的效果,其实就是利用了div和table实现的效果
将该界面当作一个table,第一个以及基础班,就业班,远程班各占一行,其余的都是一行两个小的td元素。
其实个人觉得html相对于其他语言来说是比较简单的,不过要背的东西很多,各种属性各种控件想要熟练掌握免不了多练。
共勉。