教你写一个简单的网页(html网页开发入门)
来源:互联网 发布:melanmeka淘宝网 编辑:程序博客网 时间:2024/05/22 12:19
网页的组成
HTML
网页的具体内容和结构
CSS
网页的样式(美化网页最重要的一块)
JavaScript
网页的交互效果,比如对用户鼠标事件作出响应
HTML
什么是HTML
HTML的全称是HyperTextMarkupLanguage,超文本标记语言
其实它就是文本,由浏览器负责将它解析成具体的网页内容
比如,浏览器会将下面的HTML代码
<ul> <li>知乎</li> <li>CSDN</li> <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>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>
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;">123</span>
- 内页样式:在本网页的style标签中书写
<span>123</span><style type="text/css"> span { color:yellow; background-color:blue }</style>
外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用
test.css
span { color:yellow; background-color:blue }
test.html
<span>123</span><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>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>
伪类
<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属性,能修改标签的显示类型
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
盒子模型
网页上每一个标签都是一个盒子
每个盒子都有四个属性
<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>123</div> <div>456</div></body></html>
内容(content)属性
填充(padding,内边距)属性
边框border属性
边界margin属性
- 教你写一个简单的网页(html网页开发入门)
- 教你写一个简单的网页(html网页开发入门)
- 如何用Html+css3写一个简单的网页
- html写简单网页
- html网页写一个时钟
- 晚上看了会html写了一个简单的不能再简单的网页…
- 一个简单的网页布局HTML+CSS
- HTML入门----简单网页制作
- 从HTML原型到jsp页面完美转型攻略(教你即使不会写代码也能弄出漂亮的网页)
- 从HTML原型到jsp页面完美转型攻略(教你即使不会写代码也能弄出漂亮的网页)
- 三种简单的html网页自动跳转方法,可以让你在打开一个html网页时自动跳转到其它的页面。
- 用java写了一个非常简单的网页爬虫
- 简单的HTML网页框架
- PHP动态网页转换HTML的一个简单办法
- PHP动态网页转换HTML的一个简单办法
- 2015-07-31:一个最简单的HTML网页
- curl入门知识之简单的抓取一个远程网页
- 一段简单的 HTML 弹出一个对话框,灰掉原来的页面(网页)
- POJ - 3070 - Fibonacci (矩阵快速幂)
- HashMap、HashTable和ConcurrentHashMap一知半解
- C语言中自带的头文件(.h)所包含的函数
- mysql主从设置
- [转]SVN中的Branches分支以及Tags标签详解与应用举例
- 教你写一个简单的网页(html网页开发入门)
- Android热修复
- linux命令login
- Java Thread Stop方法以及替换实现
- 深入分析C++引用
- jQuery事件绑定on()、bind()与delegate() 方法详解
- hdu 1088 Write a simple HTML Browser
- HDU 3605 网络流
- 在引入layout文件的时候出现resourse not found的解决问题