教你写一个简单的网页（html网页开发入门）

最新推荐文章于 2024-08-08 15:58:05 发布

赵不懂

最新推荐文章于 2024-08-08 15:58:05 发布

阅读量9.7w

点赞数 124

分类专栏： html

本文链接：https://blog.csdn.net/qq_33351410/article/details/51910266

版权

html 专栏收录该内容

3 篇文章 3 订阅

订阅专栏

网页的组成

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	设置元素的上外边距