教你写⼀个简单的⽹页（html ⽹页开发⼊门）⽹页的组成
HTML
⽹页的具体内容和结构
CSS
⽹页的样式（美化⽹页最重要的⼀块）
JavaScript
⽹页的交互效果，⽐如对⽤户⿏标事件作出响应
HTML
什么是HTML
HTML 的全称是HyperTextMarkupLanguage ，超⽂本标记语⾔
其实它就是⽂本，由浏览器负责将它解析成具体的⽹页内容
⽐如，浏览器会将下⾯的HTML 代码转化为
知乎
⿊马
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.
<ul > <li >知乎</li > <li >CSDN </li > <li >博客园</li ></ul >
1
2
3
4
5
CSS
什么是CSS
CSS 的全称是Cascading Style Sheets，层叠样式表
它⽤来控制HTML 标签的样式，在美化⽹页中起到⾮常重要的作⽤
CSS 的编写格式是键值对形式的，⽐如
color : red
background-color : blue
font-size : 20px
冒号左边的是属性名，冒号右边的是属性值
CSS 三种书写⽅式
⾏内样式：（内联样式）直接在标签的style 属性中书写
<html > <!-- ⽹页的标题、图标... --> <head > <mate charset ="utf-8"> <title >第⼀个⽹页</title > </head > <!-- ⽹页的具体内容 --> <body > 这是⽹页的内容 <a href ="www.baidu" target ="_blank">百度</a > <h1>666666666</h1> <h2>666666666</h2> <h3>666666666</h3> <h4>666666666</h4> <h5>666666666</h5> <p >ppppppppppp </p > <div > <p >ppppppppppp </p > </div > <ul > <li >hahaha </li > <li >hahaha </li > <li >hahaha </li > </ul > <ol > <li >ahahah </li > <li >ahahah </li > <li >ahahah </li > </ol > <img src ="text.png"> </body ></html >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
外部样式：在单独的CSS ⽂件中书写，然后在⽹页中⽤link 标签引⽤ test.css test.html CSS 选择器
选择器的作⽤
选择对应的标签，为之添加样式
标签选择器 根据标签名到标签
类选择器 标签可以有多个类
id 选择器 id 是唯⼀的，不能⼀样
选择器组合 中间不留空格，粘在⼀起
后代选择器 中间⼀个空格，不管嵌套多少层
相邻兄弟选择器
属性选择器
<span >123</span ><style type ="text/css"> span { color:yellow ; background-color:blue }</style >
1
2
3
4
5
6
7span { color:yellow; background-color:blue }
1
2
3
4
<span >123</span ><link rel ="stylesheet" herf ="test.css">1
2<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{
网页设计html代码大全继承关系1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
伪类属性
描述:active
向被激活的元素添加样式:focus
向拥有键盘输⼊焦点的元素添加样式:hover
当⿏标悬浮在元素上⽅时，向元素添加样式:link
向未被访问的链接添加样式:visited
向已被访问的链接添加样式:first-child
向元素的第⼀个⼦元素添加样式:lang
向带有指定lang 属性的元素添加样式:first-letter
向⽂本的第⼀个字母添加特殊样式:first-line
向⽂本的⾸⾏添加特殊样式:before 在元素之前添加内容
} /*选择器组合*/ div .first { } /*后代选择器*/ div p { } /*⼦标签选择器*/ div > p { } /*相邻兄弟选择器*/ div ＋ p { } /*属性选择器*/ div [name]{ } div [name][age]{ } div [name="jack"]{ } </style ></head ><body > <div > <p >p1</p > <span > <p >p2</p > </span > </div > <div name ="jack">div1</div > <div age ="10">div2</div > <p >与div 相邻的p </p > <div class ="first">123</div > <div id ="first">123</div > <p class ="first second">123</p > <p id ="second">123</p > <h1>hhh </h1></body ></html >
24252627282930313233343536373839404142434445464748495051525354555657585960616263646566
after 在元素之后添加内容属性描述
选择器优先级
针对性越强，优先级越⾼
选择器的权值
通配选择符（*）:0
标签：1
类：10
属性：10
伪类：10
伪元素：1
id ：100
important ：1000
原则：选择器的权值加到⼀起，⼤的优先；如果权值相同，后定义的优先
important > 内联 > id > 类 > 标签｜伪类｜属性选择器 > 伪元素 > 通配符 > 继承CSS 标签的类型
HTML 有N 多标签，根据显⽰的类型，主要可以分为2⼤类块级标签，独占⼀⾏的标签
⾏内标签（内联标签），多个⾏内标签能同时显⽰在⼀⾏
修改标签的显⽰类型
CSS 中有个display 属性，能修改标签的显⽰类型
属性
说明none
隐藏标签block
块级类型，独占⼀⾏，能随时设置宽度和⾼度inline
⾏内类型（内联类型），多个⾏内标签可以显⽰在同⼀⾏，宽度和⾼度取决于内容尺⼨inline-block ⾏d 内-块级类型（内联－块级类型），多个⾏内标签可以显⽰在同⼀⾏，能随时设置宽度和⾼度<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 >12345678910111213141516171819202122232425
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论