HTML+CSS+JAVASCRIPT入门学习教程

最新推荐文章于 2023-07-12 16:03:07 发布

面壁者LOGIC

最新推荐文章于 2023-07-12 16:03:07 发布

阅读量1.2k

点赞数 3

分类专栏： HTML+CSS+JAVASCRIPT

本文链接：https://blog.csdn.net/bolted_snail/article/details/102562276

版权

HTML+CSS+JAVASCRIPT 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

菜鸟教程

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="http://www.runoob.com/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 代码。

常见浏览器及其内核

浏览器	内核
IE	trident
Firefox	Gecko
Google chrome	Webkit/blink
Safari	Webkit
Opera	presto

文件扩展名

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