HTML，HTML5，脚本，样式

嘻嘻嘿嘿哈哈

于 2021-06-21 18:04:43 发布

阅读量197

点赞数 1

分类专栏：学习笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_43924896/article/details/118091733

版权

学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

发展历史

1993年，IETF团队提出了一个草案，并不是成型的标准。可以认为是HTML1
1995年，HTML有了第二版，即HTML2.0，当时是作为RFC1866发布的
1997年1月，HTML 3.2 作为W3C推荐标准发布。这是首个完全由W3C开发并标准化的版本
1997年12月，HTML 4.0 作为W3C推荐标准发布
2000年5月，ISO/IEC 15445:2000作为ISO/IEC国际标准发布（“ISO HTML”，基于HTML
4.01严格版）
2014年10月28日，HTML 5 作为W3C推荐标准发布

写法

HTML

<html>

<head>
<title>我的第一个 HTML 页面</title>
</head>

<body>
<p>body 元素的内容会显示在浏览器中。</p>
<p>title 元素的内容会显示在浏览器的标题栏中。</p>
</body>

</html>

HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>

</html>

增加了：

HTML5 的新的文档类型声明 <!DOCTYPE html>
字符编码 <meta charset="UTF-8"> 在head标签中增加了字符编码标签，默认字符编码是 UTF-8[可省略]

其他标签

script - 脚本

<script>标签用于定义客户端脚本（JavaScript），JavaScript 代码必须位于 <script>标签中。

可以在 HTML 文档中放置任意数量的<script>标签。
<script> 标签既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
<script> 标签可被放置与 HTML 页面的<body> 或<head>中，或兼而有之。

`<script>` 标签放在`<body>` 和`<head>`中的区别

在<head>中的脚本,在页面加载前就运行；在body中，在加载后运行。

将JavaScript标识放置<head>中，会在其余部分代码之前预先装载，从而使代码的功能更强大，比如对*.js文件的提前调用。
也就是说把代码放在区，在页面载入的时候，就同时载入了代码，你在区调用时就不需要再载入代码了，速度就提高了。
这种区别在小程序上是看不出的，当运行很大很复杂的程序时，就可以看出了。

当然也可以将JavaScript标识放置在<body>中，以实现某些部分动态地创建文档。比如制作鼠标跟随事件，肯定是页面加载后再进行对鼠标坐标的计算。置于<body>中的时候，把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。

p.s. 脚本放在body中的话，不论放在任何位置，都是在页面加载后执行的，脚本调用页面元素都不会报错。

HTML中脚本的放置 [ script放在head、body，引用外部文件 ] 可以参考JavaScript使用，外部文件中脚本的表现与它被置于 <script> 标签中是一样的。

html中的脚本的存在形式

如上。
HTML中的JavaScript代码的存在形式有四种：

<head>的<script> 标签中
body的<script> 标签中
外部脚本文件中
标签自带的方法中

<html>
<head>
    <title>DY's first page</title>
    <script src="./firstTry.js"/> // 外部文件中
    <script>
      document.write("<p id=\"test\">head中的script中</p>") // head中的script中
    </script>
</head>
<body>
<button onclick="document.getElementById('test').innerText='onclick方法'">test1</button> //onclick方法中
<button onclick="test()">test1</button>
<script>
  document.getElementById("test").style.color='red'; // body中的script中
</script>
</body>
</html>

外部文件firstTry.js：

document.write("<p>hello world</p>")
function test() {
  document.getElementById('test').innerText='放在外部文件中的script脚本'
}

样式

样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。

html插入样式的方式有三种：
1. 内联样式
使用标签的style属性，即样式属性。
样式仅需要在一个元素上应用一次时。

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

2. 内部样式表
在文档头部使用 <style> 标签。
单个文档需要特殊的样式时。

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

style标签：

type 属性是必需的，唯一可能的值是 “text/css”
位于 head 中

3. 外部样式表
在文档头部使用 <link> 标签。
样式需要应用于很多页面时。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

外部样式表mystyle.css （文件不能包含任何的 html 标签，以 .css 扩展名保存）

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

link 标签：

最常见的用途是链接样式表
位于 head中，可出现任意次数
属性：
1. href 规定被链接文档的位置
2. rel 当前文档与被链接文档之间的关系 e.g. "stylesheet"
3. type 被链接文档的 MIME 类型 e.g. "text/css"

脚本和样式的执行顺序

我发现，对于脚本生成的dom结点，不论是放在放在head还是body中的脚本，对它定义的样式都会生效。

嘻嘻嘿嘿哈哈

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
HTML，HTML5，脚本，样式

发展历史1993年，IETF团队提出了一个草案，并不是成型的标准。可以认为是HTML11995年，HTML有了第二版，即HTML2.0，当时是作为RFC1866发布的1997年1月，HTML 3.2 作为W3C推荐标准发布。这是首个完全由W3C开发并标准化的版本1997年12月，HTML 4.0 作为W3C推荐标准发布2000年5月，ISO/IEC 15445:2000作为ISO/IEC国际标准发布（“ISO HTML”，基于HTML4.01严格版）2014年10月28日，HTML 5 作为
复制链接

扫一扫