教你写一个简单的网页(html网页开发入门)
网页的组成
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>
伪类
属性 | 描述 |
---|---|
: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>123</div><div>456</div>
</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 | 设置元素的上外边距 |
教你写一个简单的网页(html网页开发入门)相关推荐
- C语言能干什么?手把手教你写一个简单的聊天软件
一.服务端代码 因为端口号容易被占用的原因,所以IP地址和端口号采用参数传递的方法,即 int main(int argc,char **argv) 1.头文件 #include <stdio. ...
- 【教程】教你写一个简单的微信小黄鸡
本文仅供技术交流,如果侵犯到了任何组织或个人的权益,请在本文留言,主页君会妥善处理. 前段时间人人网上的小黄鸡着实火了一把,而最近微信收费风波又炒得沸沸扬扬.主页君凑热闹写一篇教程:如何在微信公众平台 ...
- Python爬虫不会?戳一下,小编一步步教你写一个简单的爬虫
写在前面 网络爬虫又称网络蜘蛛,是指按照某种规则在网络上爬取所需内容的脚本程序.众所周知,每个网页通常包含其他网页的入口,网络爬虫则通过一个网址依次进入其他网址获取所需内容. 优先申明:我们使用的py ...
- Bootstrap写一个简单的响应式网页
响应式网页 响应式网页设计采用css的媒体查询技术,将包括弹性布局,弹性图片.媒体和媒体查询整合在一起,为响应式网页设计. 页面会随着窗口的尺寸变化做出相应的改变. 视口是浏览器显示的内容区域,不包括 ...
- samp服务器信息获取,手把手教你写一个简单的服务器
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 //第八步,玩家杀人得分得金钱,死亡扣分扣金钱 public OnPlayerDeath(playerid, killerid, reason)//玩家被 ...
- 手把手教你写一个生成对抗网络
成对抗网络代码全解析, 详细代码解析(TensorFlow, numpy, matplotlib, scipy) 那么,什么是 GANs? 用 Ian Goodfellow 自己的话来说: " ...
- python k线合成_手把手教你写一个Python版的K线合成函数
手把手教你写一个Python版的K线合成函数 在编写.使用策略时,经常会使用一些不常用的K线周期数据.然而交易所.数据源又没有提供这些周期的数据.只能通过使用已有周期的数据进行合成.合成算法已经有一个 ...
- cmd管道无法接收特定程序返回值_渗透不会反弹shell?来教你写一个cmd的shell
渗透不会反弹shell?来教你写一个cmd的shell 包含的库: #include #include #include #include #include #pragma comment(lib, ...
- 用python写一个简单的web服务器
人生苦短,我用python 简洁高效,这才是理想的语言啊 分享一点python的学习经验-----如何用python写一个简单的web服务器 首先,我们需要简单地了解一下网络通信协议,这里用白话介绍一 ...
最新文章
- Python---常见问题
- 解决 QT 发送 HTTP 请求时遇到 qt.network.ssl: QSslSocket::connectToHostEncrypted: TLS initialization failed 问题
- matlab仿真模拟随机过程,基于MATLAB的随机过程仿真.pdf
- Debian 26 岁生日快乐!Happy DebianDay!
- 2019最新 Java商城秒杀系统的设计与实战视频教程(SpringBoot版)_1-4系统的整体演示...
- Java补缺补漏—基本数据类型与引用数据类型
- MFC的运行过程,TheApp对象
- 京东助手+淘宝试用助手+苏宁试用助手三合一v22102032021
- 从fototool谈景深与超焦距
- 洛谷刷题笔记——P3953 [NOIP2017 提高组] 逛公园
- 办公室计算机打印机共享,办公室共享连接打印机全攻略,办公人必会操作技能...
- linux查询电脑mac地址,查看MAC地址的几种方法汇总
- 对 Go2 错误处理提案的批判
- php laravel vonder
- 单片机作业1_为OLED制作汉字字库_第3部分
- android系统优化方向,Android开发的优化方向
- gitlab-runner 三种runner创建和和使用
- 除了迅雷,目前还有什么下载软件好用?以下这3款你听过吗?
- 手机计算机应用会横屏,北京市大学生计算机应用大赛——3g智能手机创意设计作品提交书模板(游戏类).pdf...
- 对话“1024程序员节”嘉宾 ——RT-Thread 创始人熊谱翔