网页HTML文件的基础_html 样式文件-优快云博客

本文链接：https://blog.youkuaiyun.com/2401_89847635/article/details/147881402

一、HTML网页的作用

HTML网页是被浏览器显示的基本文件，可以描述文字、图片，播放视频和音频信息。

HTML网页文件的后缀名：".html"。

HTML网页文件名字案例："index.html"。

创建HTML文件过程：

1、用记事本或者编辑器创建空文件。

2、输入标签的文本内容。

3、保存文件后，把后缀名".txt"重命名为".html"。

二、样式文件和脚本文件

1、样式文件

指的是一种单独描述标签样式的文件。

样式指的是标签的宽高、背景色、背景图片、文字颜色、内边距、外边距。

样式文件的后缀名：".css"

HTML中引入外部样式文件的方式：

<link rel="stylesheet" href="样式文件的路径" />

2、脚本文件

脚本文件指的是后缀名是".js"的文件。

脚本文件中包含函数、方法调用、变量声明等等代码。

三、HTML文件的格式

HTML文件的格式和XML文件类似，最重要的是标签结构。

1、标签的组成结构

<标签名>包含内容</标签名>

标签是成对出现的，"<标签名>"代表开始，"</标签名>"代表结束。

案例：

文章段落的标签：

<p>这是一个段落</p>

2、注释内容格式

注释信息不会显示在浏览器中。

3、标准的HTML文件组成格式

<!doctype html>

<html>

<head>

<title>标题</title>

<style>

样式信息

</style>

</head>

<body>

子标签集合

</body>

</html>

说明：

<html></html>说明是一个HTML文件的标签，这是根元素，所有内容都被包含在内部。

<head></head>这是头部标签，描述样式、标题栏等信息。

<body></body>这是身体标签，在内部描述HTML文件显示的内容。

四、编写样式的方式

(一)样式可以出现的位置

1、作为标签的属性

格式：

把样式写在style属性内部，每对样式用";"隔开；样式名和样式值是":"隔开。

<标签名 style="样式1:值1; 样式2: 值2; 样式3: 值3;" > 内容 </标签名>

案例：

<p style="color: red;">段落</p>

2、写在<style></style>内部

<style>

代号{

样式1: 值1;

样式2: 值2;

}

</style>

说明：

代号的候选值：

标签名，例如： p{}

字符"." + 类名，例如： .类名{}

字符"#" + ID主键名，例如： #主键{}

3、标签的类名和ID主键

类指的是写在class属性的标识码；如果有多个类，用空格隔开。

需要自定义设置类的名字，例如div_21。

<标签 class="类1 类2 类3"> </标签>

ID主键指定是写在id属性的标识码；是唯一的；不唯一会出现冲突；

需要自定义设置ID名字，例如p1, p2。

<标签 id="主键" >内容 </标签>

五、常用的标签

<p>我是段落</p>

<h1>一级标题</h1>

<h2>二级标题</h2>

<b>强调文本</b>

<del>我是删除文本</del>

<sup>上标文本</sup>

<sub>下标文本</sub>

<span>我是单独修饰的文本</span>

<a href="链接">我是超链接</a>

<label>我是标签</label>

<pre>原样输出</pre>

<input type="text" value="输入框" />

<textarea>我是多行文本域</textarea>

<div>我是容器</div>

<table>我是表格</table>



<img src="图片路径" />



<ol></ol>



<ul></ul>



<br />

说明：<div>和<table>两种标签内部可以容纳其他的标签，常用来布局界面。

六、常用的样式

1、宽高

width: 像素值px;

height: 像素值px;

案例：设置<div>标签宽度为5像素，高度为5像素。

<div style="width: 5px; height: 5px"> </div>

2、边框

/* 设置边框宽度 */

border-width: 像素值;

/* 设置边框颜色 */

border-color: 颜色代号;

/* 设置边框样式，有solid实心，dotted虚线等种类 */

border-style: 代号;

3、内边距

指的是内部文字和边框的距离；

padding: 像素值;

4、外边距

指的是边框和其他周围的元素的距离。

margin: 像素值;

5、文字样式

/* 设置文字尺寸 */

font-size: 像素值;

/* 设置文字风格；有normal正常，bold粗体，italic斜体 */

font-style: 代号;

/* 设置文字的字体，例如"宋体" */

font-family: 字体名;

七、脚本的常用知识点

JavaScript脚本的代码写在<script></script>内部；

1、出现在<head>标签内部。

2、出现在<body>标签内部的某个标签内部。

(一)基本内置对象

JavaScript内部有window、location、navigator、history、document等内置对象，可以直接使用它们的方法；

window对象有下列方法：

window.alert("弹出对话框");

var 变量 = window.confirm("确认框");

var 变量 = window.prompt("输入框");

其他方法：实现定时的setInterval()、setTimeout()。

(二)JavaScript的类

JavaScript有String、Number、Boolean、RegExp、Array、WebSocket、XMLHttpRequest等类可以使用。

创建对象的方式：

var 变量名 = new 类别(参数列表);

// 案例，定义数值对象

var k = new Number(223.7);

调用对象的属性和方法：

// 获取属性值：

变量名.属性名

// 调用方法：

变量名.方法名(参数值)

(三)document的write()输出方法

用内置对象document的write()方法输出内容。

<div>

<script>

document.write("这是输出的内容。");

</script>

</div>

(四)JavaScript的变量定义

变量是不需要定义类型，会自动根据变量值确定类型。

<script>

// 这是注释

// 用var来定义变量name

var name = "变量值";

// 重新赋值为整数

name = 85;

// 打印变量值：

document.write("name: " + name);

</script>

说明：变量名不能是数字开头；变量名是字母、数字、下划线'_'的自由组合；

(五)函数定义

1、函数定义使用function关键字。

函数名的要求和变量要求一致。

<script>

// 定义函数work；参数接收变量k

function work(k){

window.alert("k的值：" + k);

}

</script>

说明：

如果函数接受有多个值，用","隔开，例如："function work(k1, k2, k3){ }"。

如果函数有返回值，用"return 返回值"来返回，例如：

function work(a, b){

return a + b;

}

2、函数的调用

格式：

// 如果没有返回值，按照"函数名(参数值列表)"来调用：

work(25);

// 如果有返回值，可以用变量接收

var result = work(88, 55);

(六)事件监听

JavaScript可以监听鼠标、键盘、元素状态变化三种变化。

以监听点击事件为例：

<div onclick="test_01()"> </div>

<script>

function test_01(){

window.alert("有人点击我。");

}

</script>

说明：当鼠标点击<div>标签，就立马调用函数test_01()。

标签常用的其他事件监听属性：

ondbclick 监听双击事件；

onsubmit 监听表单提交；

onchange 监听元素值改变；

onmousemove 监听鼠标移动；

onkeyup 监听键盘按下；