html元素分类和事件、页面布局、css语法和引入方式_html-js-css

概述HTML元素分为：块级元素和内联元素块级元素：标签元素会以新行开始或结束。【<h1><p><table>当前元素标签要独占一行】内联元素：显示数据不会以新行开始。【<a><img><td>会堆积在一起】页面布局时需要考虑整体美观可欣赏性，从而进行详尽的设计。优秀的页面布局可以很好的吸引人的目光，带来更多的流量。所以好的页面布局很有需要，合理而切实的页面设置很重要

HTML元素分为：块级元素和内联元素

块级元素：标签元素会以新行开始或结束。【<h1><p><table>当前元素标签要独占一行】

内联元素：显示数据不会以新行开始。【<a><img><td>会堆积在一起】

页面布局时需要考虑整体美观可欣赏性，从而进行详尽的设计。优秀的页面布局可以很好的吸引人的目光，带来更多的流量。所以好的页面布局很有需要，合理而切实的页面设置很重要

HTML事件：

需要触发某些动作的发生，需要事件的支持

HTML中事件类型很多，HTML4增加了在浏览器中触发的能力，HTML5中又新增了很多事件。

比如windows事件属性

form事件

事件对于网页实现功能来说十分重要，详尽的事件类型和属性可以在W3C上查看

https://www.w3school.com.cn/Tags/HTML_ref_eventattributes.asp

CSS（层叠式样式表），决定了页面怎么显示元素

CSS有三种引入方式：

1、行内模式

在当前元素中直接进行编写，例如

该模式具有最高优先级

2、内嵌式

在<head>中写样式，使用@import在<head></head>之间应用，例如：

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <style type="text/CSS"   >
        @import url(second.CSS);
    </style>
</head>
<body>
<div ID="p">this is first Title</div>
</body>
</HTML>

CSS文件如下：

表现为：

3、外链式

可以写在<head>里，也可以写在<body>里

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <link rel="stylesheet" type="text/CSS" href="first.CSS">
</head>
<body>
<div ID="Hacker">this is first Title</div>
<p >this is second Title</p>
</body>
</HTML>

CSS文件如下

CSS语法：

选择器{属性一：value1；属性2：value2；}

选择器

第一种情况：标签名影响其他同类型标签

第二种情况：ID

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <style type="text/CSS">行内模式
    #Hacker{
        color:green;
        text-align: center;
    }
        #china{
            color: red;
            text-align: center;
        }
    </style>

</head>
<body>
<div ID="Hacker">i am Hacker</div>
<div ID="china">i am chinese</div>
</body>
</HTML>

第三种情况：class，可以在不同元素中使用

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <style type="text/CSS">
    .test{
        color: red;
        text-align: center;
    }
    </style>

</head>
<body>
<h1 >this is first Title</h1>
<p >this is second Title</p>
</body>
</HTML>

盒子模式：

<!DOCTYPE HTML>
<HTML lang="en">
<head>
    <Meta charset="UTF-8">
    <Title>Title</Title>
    <style type="text/CSS" >
        #p{
            background-color: gray;
            wIDth: 300px;
            border: 25px solID pink;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body>
<div ID="p">this is first Title</div>
</body>
</HTML>
表现为：

总结

以上是内存溢出为你收集整理的html元素分类和事件、页面布局、css语法和引入方式全部内容，希望文章能够帮你解决html元素分类和事件、页面布局、css语法和引入方式所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1033428.html

html元素分类和事件、页面布局、css语法和引入方式

发表评论

评论列表（0条）