文章目录
- 菜鸟教程
- 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="http://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 代码。
常见浏览器及其内核
浏览器 | 内核 |
---|---|
IE | trident |
Firefox | Gecko |
Google chrome | Webkit/blink |
Safari | Webkit |
Opera | presto |
- 文件扩展名
HTML 文件后缀可以是 .html (或 .htm)。
CSS 文件后缀是 .css 。
JavaScript 文件后缀是 .js 。
更多推荐
HTML+CSS+JAVASCRIPT入门学习教程
发布评论