admin管理员组

文章数量:1794759

HTML+CSS+JAVASCRIPT入门学习教程

HTML+CSS+JAVASCRIPT入门学习教程

文章目录
      • 菜鸟HTML style="color:#2aa0ea" target=_blank class=infotextkey>教程
      • HTML初始
        • header标签
        • body标签
        • 标签分类及常见的标签
      • CSS
      • JAVASCRIPT
      • 常见浏览器及其内核

菜鸟教程
  • HTML 教程
  • HTML 参考手册
  • HTML5 教程
  • CSS 教程
  • JavaScript 教程
  • XML 教程
  • 网站主机教程
HTML初始
  • 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
  • 格式如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <h1>我的第一个HTML页面</h1> <p>我的第一个段落。</p> </body> </html> <!DOCTYPE html> 声明为 HTML5 文档 <html> 元素是 HTML 页面的根元素 <head> 元素包含了文档的元（meta）数据，做一些声明,包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>. <title> 元素描述了文档的标题, <base> - 定义了所有链接的URL;使用 <base> 定义页面中所有链接默认的链接目标地址。 <meta> - 提供了HTML文档的meta标记,使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等。<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。搜索引擎（关键词），或其他Web服务。 <link> 标签定义了文档与外部资源之间的关系。通常用于链接到样式表. <style> 标签定义了HTML文档的样式文件引用地址.在<style> 元素中你也可以直接添加样式来渲染 <body> 元素包含了可见的页面内容 <h1> 元素定义一个大标题 <p> 元素定义一个段落
header标签
  • header中常使用的标签
标签(元素)描述
<head>定义了文档的信
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件
<head> <!-- 声明字符集为utf-8utf-8 --> <meta charset="utf-8"> <!-- 为搜索引擎定义关键词: --> <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> <!-- 为网页定义描述内容: --> <meta name="description" content="免费 Web & 编程 教程"> <!-- 定义网页作者: --> <meta name="author" content="HJ"> <!-- 每30秒钟刷新当前页面: --> <meta http-equiv="refresh" content="3"> <title>文档标题</title> <!-- 引入整个页面的基础连接 --> <base href="www.runoob/images/" target="_blank"> <!-- 引入外部样式表 --> <link rel="stylesheet" type="text/css" href="mystyle.css"> <!-- 设置整个显示区域背景颜色为黄色,p标签为红色 --> <style type="text/css"> body {background-color:yellow} p {color:red} </style> </head>
  • DOCTYPE 声明是不区分大小写的.
  • html标签一般是闭合标签,开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）,如:;HTML 元素以开始标签起始,以结束标签终止.
  • HTML 属性:HTML 元素可以设置属性,属性可以在元素中添加附加信,属性一般描述于开始标签,属性总是以名称/值对的形式出现，比如：name="value"。
  • 下面列出了适用于大多数 HTML 元素的属性：
class为html元素定义一个或多个类名（classname）(类名从样式文件引入),是多对多的关系
id定义元素的唯一id,是一对一的关系
style规定元素的行内样式（inline style）
title描述了元素的额外信 (作为工具条使用)
body标签
  • body就是网页的展示部分,我们可以在该标签里面添加各种要展示的标签
标签分类及常见的标签

  • html标签一般分为三大类:行内标签/内联标签(inline),块级别标签(block),内联块级标签(inline-block);

    标签分类定义解释常见的标签
    行级元素/内联元素(inline)内容决定元素所占位置,不可以通过css改变宽高span,strong,em,a,del
    块级元素(block)独占一行,可以通过css改变宽高div,p,h1-h6,ul,li,form,address,table,ol
    行级块元素(inline-block)内容决定大小,但可以通过css改变宽高img

  • 大部分标签都有自己的含义,但是有两个标签没有明确的含义,但在开发中却应用的很多,div和span;div仅仅只是表明是一个块级标签,常常作为容器使用;span表示是一个内联标签;

  • 行级元素,块级元素,行级块元素本质是有css中的display属性决定的,我们可以根据自己的需要自己设置;

    span { display: inline; } div { display: block; } img { display: inline-block; }

  • 具体的一些标签介绍请参考:HTML 参考手册

CSS
  • CSS (Cascading Style Sheets),指层叠样式表;用于渲染HTML元素标签的样式.CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.
  • CSS声明总是以分号; 结束，声明总以大括号{}括起来(内联样式不需要大括号)
  • CSS 可以通过以下方式添加到HTML中: 内联样式: 在HTML元素中使用"style" 属性 内部样式表 :在HTML文档头部 <head> 区域使用<style> 元素来包含CSS 外部引用 :使用外部 CSS 文件, 最好的方式是通过外部引用CSS文件.(因为结构,样式,行为相分离).
    • 内联样式((Inline style))
    <body style="background-color:yellow;"> <h2 style="background-color:red;">这是一个标题</h2> <p style="background-color:green;">这是一个段落。</p> </body>
    • 内部样式((Internal style sheet))
    <!-- 设置整个显示区域背景颜色为黄色,p标签为红色 --> <style type="text/css"> body { background-color:yellow; } p { color:red; background-color:green; } </style>
    • 外部样式((External style sheet))
    <!-- 引入外部样式表 --> <link rel="stylesheet" type="text/css" href="mystyle.css"> href属性是.css文件的路径(url,相对路径,绝对路径都可以).
Javascript
  • Javascript用来处理事件行为;
  • 一般的设计方案是结构(html),样式(css),行为(js)相分离.
  • HTML 中的脚本必须位于 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中,也可以放在.js文件中(外部js)。
  • 通常的内部的js做法是把函数放入 部分中，或者放在页面(body)底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。而外部的 JavaScript,也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部 JavaScript 文件的文件扩展名是 .js。如需使用外部文件，请在
<!DOCTYPE html> <html> <head> <title>三种js</title> <meta charset="utf-8"> <!-- 头部的js --> <script type="text/javascript"> function headjs() { alert("调用的head中的js方法") } </script> <!-- 引入外部js --> <script type="text/javascript" src="jsStudy.js"></script> </head> <body> <button type="button" onclick="headjs()" id="head" style="background-color: red">点击调用head中的js</button> <button type="button" onclick="bodyjs()" id="body" style="background-color: green">点击调用body中的js</button> <button type="button" onclick="externaljs()" id="body" style="background-color: blue">点击调用外部.js文件中的js</button> <!-- body中的js --> <script type="text/javascript"> function bodyjs() { alert("调用了body中的js方法") } </script> </body> </html>

外部的jsStudy.js文件

function externaljs (){ alert("调用外部的.js文件中的js方法!") }

外部 javascript 文件不使用 <script> 标签，直接写 javascript 代码。

常见浏览器及其内核 浏览器内核
IEtrident
FirefoxGecko
Google chromeWebkit/blink
SafariWebkit
Operapresto
  • 文件扩展名

    HTML 文件后缀可以是 .html (或 .htm)。 CSS 文件后缀是 .css 。 JavaScript 文件后缀是 .js 。

本文标签： 入门教程htmlcssJavaScript

版权声明：本文标题：HTML+CSS+JAVASCRIPT入门学习教程 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686971273a123906.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。