HTML+CSS+JavaScript简述

最新推荐文章于 2024-06-16 15:31:20 发布

krismile__qh

最新推荐文章于 2024-06-16 15:31:20 发布

阅读量1.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/krismile__qh/article/details/89406547

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、理解HTML

1.什么是HTML?

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

2.HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

3.HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容！！！

4.HTML编辑器

使用 Notepad 或 TextEdit 来编写 HTML

也可以使用专业的 HTML 编辑器来编辑 HTML：

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor

二、HTML基本概念

1.HTML元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。（元素可以嵌套元素）

HTML 元素语法：

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素(没有内容的 HTML 元素被称为空元素)在开始标签中进行关闭（以开始标签的结束而结束）//<br/>标签就是没有关闭标签的空元素
大多数 HTML 元素可拥有属性

比较重要的元素：

<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。自动换行！

<span> 元素是内联元素，可用作文本的容器。

2.HTML属性（属性为HTML元素提供附加信息）

属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
始终为属性值加引号（属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么你必须使用单引号，例如：name='Bill "HelloWorld" Gates'）
适用于大多数 HTML 元素的属性：class\id\style\title

3.HTML+CSS(如何使用样式style)

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

1.外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。

<head>
<!--link定义资源引用-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2.内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表。

<head>

<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>

</head>

3.内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

4.HTML+JavaScript(HTML的script 元素)

JavaScript 使 HTML 页面具有更强的动态和交互性(

在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

1.脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

<head>
    <script type="text/javascript">//type可以不写，一般是默认的
            function myFunction(）{
                document.getElementById("demo").innerHTML="My First JavaScript Function";
            }
    </script>
</head>
<body>
    <h1>My Web Page</h1>
    <p id="demo">A Paragraph</p>

    <script>
            function myFunction(）{
                document.getElementById("demo").innerHTML="My First JavaScript Function";
            }//把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本
    </script>
</body>

2.也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
    <body>
        <script src="myScript.js"></script>
    </body>
</html>
//在 <head> 或 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致。

使用<noscript>标签应对不支持脚本或禁用脚本的浏览器

<noscript>Sorry, your browser does not support JavaScript!</noscript>

三、CSS概述

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

1.定义样式表格式（二-3）

2.基本语法

提示：

1.注意不要将html的注释写在CSS中，会出现错误！

2.style修饰的样式，元素遵循就近原则！

3.继承：根据 CSS，子元素从父元素继承属性。（摆脱继承：创建一个针对 p 的特殊规则，这样它就会摆脱父元素的规则）

4.各种选择器

//共三个选择器
//在<body></body>内的所有元素都是它的子元素
//这是一个选择器(元素选择器)
body  {
     font-family: Verdana, sans-serif;//这是一条声明，每一条声明之间用分号隔开
     background-color: white;//这是一条声明
     }

//这是一个分组的选择器，用逗号分开
td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

//这是一个选择器，摆脱父元素body的规则
p  {
     font-family: Times, "Times New Roman", serif;
     }

//这是派生选择器，根据元素在其位置的上下文关系来定义样式
li strong {
    font-style: italic;
    font-weight: normal;
  }

//id选择器,以 "#" 来定义
//id 属性只能在每个 HTML 文档中出现一次
#sidebar {//可以在#sidebar之前加上包含这个id的元素
	border: 1px dotted #000;
	padding: 10px;
	}
//id选择器常常用于建立派生选择器,下面的样式只会应用于出现在 id 是 sidebar 的元素内的段落
#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
}

//类选择器，以一个点号显示
//class 属性可以在一个 HTML 文档中出现多次
//可以规定元素的一个或多个类名（引用样式表中的类）
//和 id 一样，class 也可被用作派生选择器
.fancy td {//可以在.fancy之前加上包含这个id的元素,例如div.fancy
	color: #f60;
	background: #666;
}

***//子元素选择器：选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。
h1 > strong {color:red;}
例如：这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

5.伪类和伪元素

//伪类选择器：CSS 伪类用于向某些选择器添加特殊的效果。
例如：
div.className:link {color: #FF0000}	/* 未访问的链接 */
div:visited {color: #00FF00}	        /* 已访问的链接 */
.alssName:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
#idName:active {color: #0000FF}	        /* 选定的链接 */

6.定位

相对定位是这个元素“相对于”它的起点进行移动；
#box_relative {
  position: relative;
  left: 30px;//+是向右移动 -是向左移动
  top: 20px;
}
绝对定位的元素的位置是相对于最近的已定位祖先元素；
#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

三、JavaScript

提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

1.JavaScript的数据类型

(JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。)

字符串String、数字Number、布尔Boolean、数组Array、对象Onject、Null、Undefined

var person;//返回undefined
var person = null;//返回null

//声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

//实际赋值
var num = 3.14;
var str = "haha"
var boo = true;
1.var cars=new Array();cars[0]="Audi";cars[1]="BMW";cars[2]="Volvo";
2.var cars=new Array("Audi","BMW","Volvo");
3.var cars=["Audi","BMW","Volvo"];
var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

//注意：如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
carname="Volvo";//将声明一个全局变量 carname，即使它在函数内执行。

2.JavaScript对象

JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，函数等等。

在 JavaScript 中，对象是拥有属性和方法的数据。

objectName.propertyName//调用一个对象的属性
objectName.methodName()//调用一个对象的方法

3.HTML DOM(Document Object Model文档对象模型）

1.HTML DOM树

2.JS HTML DOM 改变HTML&CSS，以及DOM事件、DOM节点：

提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");//查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素

document.getElementById(id).innerHTML=new HTML//修改HTML内容的最简单的方法是使用innerHTML属性

document.getElementById(id).attribute=new value//改变 HTML 属性
有时候attribute不等于该元素的属性名，例如改变class属性
就是element.className="class"

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
onchange 事件常结合对输入字段的验证来使用。
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

.createTextNode(str);//创建文本节点
.appendChild(node);//追加孩子
parent.removeChild(child);//父亲删除孩子
.parentNode;//得到父节点

详见：http://www.w3school.com.cn/h.asp

krismile__qh

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JavaScript简述

一、理解HTML1.什么是HTML?HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页2.HTML标签HTML 标记标签通常被称为 HT...
复制链接

扫一扫