HTML学习笔记之样式（八）

文阿花

已于 2024-06-03 15:20:03 修改

阅读量424

点赞数

分类专栏： HTML 文章标签： html

于 2021-03-29 16:19:38 首次发布

本文链接：https://blog.csdn.net/wz_1992/article/details/115027546

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

8. 样式

8.1 使用添加到部分的样式信息对 HTML 进行格式化

注意 color的设置方式 1、冒号 2、red不加引号

<!--使用添加到 <head> 部分的样式信息对 HTML 进行格式化。 -->
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>标题</h1>
<p>注意 color的设置方式  1、冒号 2、red不加引号</p>

</body>
</html>

运行效果：
在这里插入图片描述

8.2 不加下划线的链接

text-decoration:none 隐藏下划线

<html>
<body>
<!--不加下划线的链接 -->
<h4>不加下划线的链接</h4>
<a href="https://www.baidu.com"  style="text-decoration:none"> 百度</a>
</body>
</html>

运行效果：
在这里插入图片描述

8.3 Head中使用 base 设置全局格式以及meta文档描述的使用

Head中使用 base 设置全局跳转方式
head中使用meta标签对文档进行描述


<html>
<!--本例显示如何使用 base 标签使页面中的所有标签在新窗口中打开。 -->
<head>
<!--meta 文档描述  HTML中meta不用关闭  XHTMl中meta标签一定要关闭-->
<meta name="uname"
 content="文阿花">
<meta name="time"
content="2021/3/19">
<!-- 文档关键字 -->
<meta name="keywords"
content="HTML，XML">
<base target="_blank"/>

</head>
<body>
<!--不加下划线的链接 -->
<h4>text-decoration:none设置不加下划线的链接</h4>
<a href="https://www.baidu.com"  style="text-decoration:none"> 百度</a>
</body>
</html>

运行效果：
在这里插入图片描述

8.4 重定向

http-equiv=“Content-Type” 意思是把 content 属性关联到 HTTP 头部。
content=“text/html; charset=gb2312” 定义文档编码，在此是gb2312
http-equiv=“Refresh” content=“5;url=https://www.baidu.com” 设置自动跳转功能

<!--重定向 -->
<!--http-equiv="Content-Type" 意思是把 content 属性关联到 HTTP 头部。
content="text/html; charset=gb2312" 定义文档编码，在此是gb2312 -->
<html>
<head>
<meta http-equiv="Content_Type" content="text/html;charset=gb2312"/>
<meta http-equiv="Refresh" content="5;url=https://www.baidu.com"/>

</head>
<body>
<p>对不起，我们已经搬家了，您将在5秒后跳转到新的网址：
<a href="https://www.baidu.com">https://www.baidu.com</a>
</p>
</body>
</html>

运行效果：可点击跳转，也可5秒后自动跳转
在这里插入图片描述

8.5 插入脚本？？？？？？？？不太理解具体用法

<!--插入脚本  最简单的例子，
你登陆时没写用户名，他提示你用户名不能为空，
就是脚本在起作用-->
<html>
<body>
<script type="text/javascript">
document.write("<h1>支持Js的浏览器将显示该标签内的内容</h1>")
</script>
<noscript>不支持js的浏览器将显示该该标签内的内容</noscript>
</body>
</html>

运行效果：
在这里插入图片描述

文阿花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记之样式（八）

8. 样式8.1 使用添加到部分的样式信息对 HTML 进行格式化注意 color的设置方式 1、冒号 2、red不加引号<html><head><style type="text/css">h1 {color:red}p {color:blue}</style></head><body><h
复制链接

扫一扫