1 link标签
link 标签定义文档与外部资源的关系。
link 标签最常见的用途是链接样式表。
CSS 概述:
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
-
(1) 新建一个index.html文件:
link标签中href属性对应着外部链接表路径(这里style.css和index.html建立在同一个文件夹中,只写了文件名)。<!DOCTYPE html> <html> <head> <title>Index</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>HEllO WORLD!</h1> <p>HEllO WORLD!</p> </body> </html>
(2)在和index.html相同路径新建一个style.css文件:
body{ color: blue; background-color:pink; }
(3)浏览器中打开index.html。
发现 index.html 页面字体颜色变成了蓝色,背景颜色变成了粉红色。
和style.css表中定义的相同。
2 script标签
script标签定义和用法:
- script 标签用于定义客户端脚本,比如 JavaScript。
- script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
- 必需的 type 属性规定脚本的 MIME 类型。
- JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
-
JavaScript简介:
- JavaScript 是脚本语言
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
-
(1)在index.html同一文件夹新建script.js文件:
function myFunction() { document.write("Hello World!") }
(2) 在index.html文件夹中添加 script 标签和click标签。
script标签中src 属性表示外部js文件路径,这里script.js 和 index.html 同一文件夹,就只写了文件名。<!DOCTYPE html> <html> <head> <title>Index</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>HEllO WORLD!</h1> <button type="button" onclick="myFunction()">click here</button> <script type="text/javascript" src="script.js"></script> </body> </html>
(3)浏览器中打开index.html:
点击click here 按钮:
3 bottom标签
定义和用法
- button 标签定义一个按钮。
- 在 button 元素内部,您可以放置内容,比如文本或图像。
- button 标签中间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。
- 请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”,而其他浏览器中(包括 W3C 规范)的默认值是 “submit”。
-
上面就是bottom标签的例子。
4 ol,ul, li 标签
- li标签定义列表项目。
- li标签可用在有序列表 (ol) 和无序列表 (ul) 中。
markdown中li,ol,ul 也分别是列表项目、有序列表、无序列表。
不过,markdown中标签可以只写前面的,不用封闭标签,成对出现。
- li标签定义列表项目。
- li标签可用在有序列表 (ol) 和无序列表 (ul) 中。