美文网首页
CSS和JS简介-HTML5极速入门

CSS和JS简介-HTML5极速入门

作者: 潘高PG | 来源:发表于2020-05-24 23:15 被阅读0次

CSS

CSS,又称层叠样式表,用于渲染HTML元素标签的样式。

我们在创建HTML文档时,如果不使用样式美化页面,就是这个样子的:

CSS和JS简介-HTML5极速入门-1.png

使用样式文件排版美化后,就是这样子的:

CSS和JS简介-HTML5极速入门-2.png

CSS可以通过以下方式添加到HTML中:

  • 内联样式 - 在HTML元素中使用 style 属性
  • 内部样式表 - 在HTML文档头部 <head> 区域使用 <style> 元素来包含CSS
  • 外部引用 - 使用外部 CSS 文件

内联样式

在标签中使用样式属性,如下改变段落的字体颜色:

<p style="color:blue;">潘高陪你学编程</p>

内部样式表

对单个文件定义样式,就可以使用内部样式表。在<head> 部分通过 <style> 标签定义内部样式表:

<html>
    <head>
        <style type="text/css">
            body {background-color:yellow;}
            p {color:blue;}
        </style>
    </head>
    <body>
        <p>潘高陪你学编程</p>
    </body>
</html>

外部引用

当同一样式会被多个HTML文档引用时,就应该使用外部样式表。这样,修改一个CSS文件,就可以改变整个网站的外观。

<head>
    <link rel="stylesheet" type="text/css" href="/css/mystyle.css">
</head>

当同时使用以上三种方式时,内部样式表的样式会覆盖 内联样式外部引用 的样式会覆盖内部样式表的样式。

很显然在建站时,更推荐使用外部引用。将样式文件独立出来,不仅便于统一修改,还减少了冗余代码量。不过,在极个别情况下,选择使用 内部样式表 修改单个HTML文档样式,或使用 内部样式表 修改单个标签的样式,也是很方便的。

JS

JS,即JavaScript ,可以使 HTML 页面具有更强的动态和交互性。

<script> 标签

<script> 标签既可包含脚本语句,也可通过 src 属性指向外部脚本文件。

<script>
    document.write("潘高陪你学编程");
</script>

<script src="/js/myjs.js"></script>

<noscript> 标签

只有在浏览器不支持脚本或者禁用脚本时,才会显示 <noscript> 元素中的内容。

<noscript>抱歉,你的浏览器不支持 JavaScript!</noscript>

相关文章

  • CSS和JS简介-HTML5极速入门

    CSS CSS,又称层叠样式表,用于渲染HTML元素标签的样式。 我们在创建HTML文档时,如果不使用样式美化页面...

  • 【视频教程】前端小白无基础入门HTML5+CSS3

    简介:前端基础入门HTML5+CSS3----站在一门入门标签语言的角度,重点讲解了常见的HTML5标签,CSS3...

  • HTML5简介 - HTML5极速入门

    什么是 HTML? HTML是一种超文本标记语言(英语:HyperText Markup Language) HT...

  • wow.js的使用方法

    wow.js简介 功能: 滚动页面, 显示css动画 和animate.css配合使用 wow.js基本使用 基本...

  • 5 Aria 基础

    简介 1 .在html5之前的时候,最常见的就是一系列嵌套的div,带有class 使用css来制定样式,js控制...

  • 【Animate.css】CSS动画库

    本节目录 Animate.css简介 Animate.css基础用法 Animate.css配合JS的用法和讲解 ...

  • 前端面试会遇到的问题

    前端考察内容比较广泛,大概分为四类: 1.初级:html,css,js基础。 考察基本的布局,html5和 css...

  • html5

    html5: html4.1网页开发:结构: html4.0样式:css css2行为:js HTML5:是HTM...

  • web前端开发学习路径

    HTML5 + CSS3 + JavaScriptHTML是负责网页结构CSS负责网页样式JS负责逻辑交互 jQu...

  • 2018-10-03

    HTML和CSS与JS的区别 HTML5的7种内容模型 Formatting content 内容格式化 ...

网友评论

      本文标题:CSS和JS简介-HTML5极速入门

      本文链接:https://www.haomeiwen.com/subject/zugsahtx.html