(1)link外部样式表标签:链接一个外部样式表
<head>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
(2)script脚本标签:用于定义客户端脚本,比如 JavaScript
在 HTML 页面中插入一段 JavaScript
<script>
window.onload=function(){
document.write("<h1>h1,javascript!</h1>")
}
</script>
script标签既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
<script src="./jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script>
$(function(){
document.write('<h1>hello,jquery!</h1>')
})
</script>
(3)address 地址标签
定义文档或文章的作者/拥有者的联系信息
注意:这个标签里放置的文本内容,预览显示 是默认倾斜显示的。
<!-- address 地址标签 -->
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
预览:
(4)data标签用于添加给定内容的机器可读翻译。该元素既为数据处理器提供了机器可读的值,又为浏览器中的渲染提供了人类可读的值。
<h1>data 元素</h1>
<p>下例显示产品名称,但还将每个名称与产品编号相关联:</p>
<ul>
<li><data value="圣女果">圣女果</data></li>
<li><data value="牛肉番茄">牛肉番茄</data></li>
<li><data value="零食番茄">零食番茄</data></li>
</ul>
(5)bdo 元素可覆盖默认的文本方向。
dir属性定义文字的方向,2个取值,ltl 文本方向从左向右; rtl文本方向从右向左
<bdo dir="ltr">小马过河</bdo>
<br>
<bdo dir="rtl">小马过河</bdo>
预览:
(6)template标签:用作 容纳页面加载时 对“用户隐藏”的 HTML 内容的容器。
template 中的内容可以稍后使用 JavaScript 呈现。
如果您有一些需要重复使用的 HTML 代码,则可以使用 template标记。如果在没有 template标记的情况下执行此操作,必须使用 JavaScript 创建 HTML 代码,以防止浏览器呈现这些代码。
<h1>template 元素</h1>
<p>单击下面的按钮,显示 template 元素中的隐藏内容。</p>
<button onclick="showContent()">显示隐藏的内容</button>
<template>
<h2>flowers</h2>
<img src="./img/flower.gif" alt="">
</template>
<script>
function showContent(){
var temp=document.getElementsByTagName('template')[0]
// console.log(temp);
//获取标签内容
console.log(temp.content);
// 克隆
var clon=temp.content.cloneNode(true)
console.log(clon);
//添加节点
document.body.appendChild(clon)
}
</script>
预览:
html颜色
网页中颜色由红色、绿色、蓝色混合而成。颜色值颜色由一个十六进制符号来定义(十六进制:#000),这个符号由红色、绿色和蓝色的值组成(RGB)。每种颜色的最小值是 0(十六进制:#00)。最大值是 255(十六进制:#FF)。
在网页中表示颜色:英文单词、rgb()、rgba()、十六进制#000
这个表格给出了由三种颜色混合而成的具体效果:
颜色名大多数的浏览器都支持颜色名集合。
提示:仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是:aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
如果需要使用其它的颜色,需要使用十六进制的颜色值。
<style>
.t1{
background-color: red;
}
.t2{
background-color: rgb(255,0,0);
}
.t3{
background-color: rgba(255,0,0,.1);
}
.t4{background-color: red;
}
</style>
<h1 class="t1">小余上午好</h1>
<h1 class="t2">小余上午好</h1>
<h1 class="t3">小余上午好</h1>
<h1 class="t4">小余上午好</h1>
预览: