教你写一个简单的网页（html网页开发入门）
网页的组成
HTML
网页的具体内容和结构
CSS
网页的样式（美化网页最重要的一块）
JavaScript
网页的交互效果，比如对用户鼠标事件作出响应
HTML
什么是HTML
HTML的全称是HyperTextMarkupLanguage，超文本标记语言
其实它就是文本，由浏览器负责将它解析成具体的网页内容
比如，浏览器会将下面的HTML代码
<ul>
<li>知乎li>
<li>CSDNli>
<li>博客园li>
ul>转化为
知乎
黑马
CSDN
的网页内容
HTML的组成
跟XML类似，HTML由N个标签（节点、元素、标记）组成
HTML语法非常松散
常见的HTML标签
- 标题：h1,h2,h3,h4,h5…
- 段落：p
- 换行：br
- 容器：div,span（用来容纳其他标签）
- 表格：table,tr,td
- 列表：ul,ol,li
- 图片：img
- 表单：input
- 链接：a
推荐开发工具（网络三剑客）dreamweawer、flash、fireworks；WebStorm.
<html>
<head>
<mate charset="utf-8">
<title>第一个网页title>
head>
<body>
这是网页的内容
<a href="http://www.baidu.com" target="_blank">百度a>
<h1>666666666h1>
<h2>666666666h2>
<h3>666666666h3>
<h4>666666666h4>
<h5>666666666h5>
<p>pppppppppppp>
<div>
<p>pppppppppppp>
div>
<ul>
<li>hahahali>
<li>hahahali>
<li>hahahali>
ul>
<ol>
<li>ahahahli>
<li>ahahahli>
<li>ahahahli>
ol>
<img src="text.png">
body>
html>CSS
什么是CSS
CSS的全称是Cascading Style Sheets,层叠样式表
它用来控制HTML标签的样式，在美化网页中起到非常重要的作用
CSS的编写格式是键值对形式的，比如
color : red
background-color : blue
font-size : 20px
冒号左边的是属性名，冒号右边的是属性值
CSS三种书写方式
- 行内样式：（内联样式）直接在标签的style属性中书写
<span style="color:red;background-color:red;">123span>- 内页样式：在本网页的style标签中书写
<span>123span>
<style type="text/css">
span {
color:yellow;
background-color:blue
}
style>外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
test.css
span {
color:yellow;
background-color:blue
}test.html
<span>123span>
<link rel="stylesheet" herf="test.css">CSS选择器
选择器的作用
选择对应的标签，为之添加样式
标签选择器 根据标签名找到标签
类选择器 标签可以有多个类
id选择器 id是唯一的，不能一样
选择器组合 中间不留空格，粘在一起
后代选择器 中间一个空格，不管嵌套多少层
相邻兄弟选择器
属性选择器
<html>
<head lang="en">
<meta charset="utf-8">
<title>title>
<style type="text/css">
/*标签选择器*/
p{
color:red;
}
/*类选择器*/
.first{
color:red;
}
.second{
color:blue;
}
/*id选择器*/
#first{
color:yollew;
}
#second{
color:green;
}
/*群组选择器*/
.first, #second, h1{
}
/*选择器组合*/
div.first{
}
/*后代选择器*/
div p{
}
/*子标签选择器*/
div > p{
}
/*相邻兄弟选择器*/
div ＋ p{
}
/*属性选择器*/
div[name]{
}
div[name][age]{
}
div[name="jack"]{
}
style>
head>
<body>
<div>
<p>p1p>
<span>
<p>p2p>
span>
div>
<div name="jack">div1div>
<div age="10">div2div>
<p>与div相邻的pp>
<div class="first">123div>
<div id="first">123div>
<p class="first second">123p>
<p id="second">123p>
<h1>hhhh1>
body>
html>伪类
| 属性 | 描述 |
|---|---|
| :active | 向被激活的元素添加样式 |
| :focus | 向拥有键盘输入焦点的元素添加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :link | 向未被访问的链接添加样式 |
| :visited | 向已被访问的链接添加样式 |
| :first-child | 向元素的第一个子元素添加样式 |
| :lang | 向带有指定lang属性的元素添加样式 |
| :first-letter | 向文本的第一个字母添加特殊样式 |
| :first-line | 向文本的首行添加特殊样式 |
| :before | 在元素之前添加内容 |
| after | 在元素之后添加内容 |
<html>
<head lang="en">
<meta charset="utf-8">
<title>title>
<style type="text/css">
div {
width:100px;
height:100px;
background-color:red;
}
div:hover{
background-color:blue;
}
div:before{
content:"666";
}
style>
head>
<body>
<div>
div>
body>
html>选择器优先级
针对性越强，优先级越高
选择器的权值
通配选择符（*）:0
标签：1
类：10
属性：10
伪类：10
伪元素：1
id：100
important：1000
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
important > 内联 > id > 类 > 标签｜伪类｜属性选择器 > 伪元素 > 通配符 > 继承
CSS标签的类型
HTML有N多标签，根据显示的类型，主要可以分为2大类
块级标签，独占一行的标签
行内标签（内联标签），多个行内标签能同时显示在一行
修改标签的显示类型
CSS中有个display属性，能修改标签的显示类型
| 属性 | 说明 |
|---|---|
| none | 隐藏标签 |
| block | 块级类型，独占一行,能随时设置宽度和高度 |
| inline | 行内类型（内联类型），多个行内标签可以显示在同一行，宽度和高度取决于内容尺寸 |
| inline-block | 行d内-块级类型（内联－块级类型），多个行内标签可以显示在同一行，能随时设置宽度和高度 |
CSS属性
CSS有N多属性，根据继承性，主要可以分为2大类
可继承属性
- 父标签的属性值会传递给子标签
- 一般是文字控制属性
不可继承属性
- 父标签的属性值不能传递给子标签
- 一般是区块控制属性
CSS属性－可继承属性
所有标签可继承
visibility、cursor
内联标签可继承
letter-spacing、word-spacing、shite-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
块级标签可继承
text-indent、text-align
列表标签
list-style、list-style-type、list-style-position、list-style-image
CSS属性－不可继承属性
display、margin、border、padding、background
height、min-height、max-height、width、min-width、max-width
over-flow、position、left、right、top、bottom、z-index
float、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
盒子模型
网页上每一个标签都是一个盒子
每个盒子都有四个属性
| 属性 | 说明 |
|---|---|
| 内容（content） | 盒子里装的东西，网页中通常是指文字和图片 |
| 填充（padding，内边距） | 怕盒子里装的（贵重的）东西损坏，而添加的泡沫或者其它抗震的辅料 |
| 边框（border） | 盒子本身 |
| 边界（margin，外边距） | 盒子摆放的时候不能全部堆在一起，盒子之间要留一定空隙保持通风，同时也为了方便取出 |
<html>
<head lang="en">
<meta charset="utf-8">
<title>title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: blue;
margin-top: 20px;
padding-top: 20px;
border: 20px solid red;
border: 5px dashed red;/*虚线*/
}
style>
head>
<body>
<div>123div>
<div>456div>
body>
html>内容（content）属性
| 属性 | 描述 |
|---|---|
| height | 设置元素高度 |
| max-height | 设置元素的最大高度 |
| max-width | 设置元素的最大宽度 |
| min-height | 设置元素的最小高度 |
| min-width | 设置元素的最小宽度 |
| width | 设置元素的宽度 |
填充（padding，内边距）属性
| 属性 | 描述 |
|---|---|
| padding | 在一个声明中设置所有内边距属性 |
| padding-bottom | 设置元素的下内边距 |
| padding-left | 设置元素的做内边距 |
| padding-right | 设置元素的有内边距 |
| padding-top | 设置元素的上内边距 |
边框border属性
| 属性 | 描述 |
|---|---|
| border-width | 宽度 |
| border-style | 样式 |
| border-color | 颜色 |
| border-radius | 圆角 |
边界margin属性
| 属性 | 描述 |
|---|---|
| margin | 在一个声明中设置所有外边距属性 |
| margin-bottom | 设置元素的下外边距 |
| margin-left | 设置元素的左外边距 |
| margin-right | 设置元素的右外边距 |
| margin-top | 设置元素的上外边距 |