HTML中的<head>和</head>:理解与应用

需积分: 50 0 下载量 12 浏览量 更新于2024-07-12 收藏 2.34MB PPT 举报
本资源主要介绍了网页制作中的<head>和</head>标签的用途和重要性,以及在<head>区域中常见的元素和元数据的设置,包括公司版权注释、网页字符集设定、网页制作者信息、网站简介和搜索关键字等。 <head>和</head>标签是HTML文档的重要组成部分,它们定义了文档的头部区域。这个区域不直接显示在网页内容中,但包含了对浏览器和搜索引擎至关重要的信息。例如: 1. 公司版权注释:在<head>内使用HTML注释<!-- -->可以添加公司或设计师的版权信息,例如"<!--- The site is designed by webjx.com 06/2006 --->"。 2. 网页显示字符集:通过<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=编码类型">来指定网页的字符集,确保不同语言的文本正确显示。如简体中文使用"gb2312",繁体中文使用"BIG5",英文使用"iso-8859-1"。 3. 网页制作者信息:通过<META name="author" content="作者信息">来提供网页的作者信息,方便他人了解网页的来源。 4. 网站简介:利用<META NAME="DESCRIPTION" CONTENT="描述内容">定义网页的描述,这有助于搜索引擎理解网页的主要内容,也是用户在搜索结果中看到的简短介绍。 5. 搜索关键字:通过<META NAME="keywords" CONTENT="关键词列表">设置网页的关键字,这些关键字是搜索引擎用于索引和分类网页内容的重要依据。 此外,<head>区域还常常包含<TITLE></TITLE>标签,用于定义网页的标题,显示在浏览器的标题栏和搜索结果中。同时,CSS样式表(<link rel="stylesheet" type="text/css" href="样式表路径">)和JavaScript文件引用(<script src="脚本路径"></script>)也会放在<head>中,以控制网页的样式和交互效果。 在网页设计和开发过程中,理解和正确使用<head>标签内的元数据对于提升用户体验和搜索引擎优化(SEO)至关重要。同时,掌握HTML文本处理的基本技巧,如设置标题、段落、文本格式等,也是创建高质量网页的基础。Dreamweaver CS5等工具可以帮助非专业开发者更便捷地完成这些任务,但理解HTML的原理和结构仍然是必要的。

我如何将/ckb/main.do?action=getMain#这个链接通过JS实现在点击链接时以火狐打开<html> <head> <meta charset="utf-8"> <title>B网页</title> </head> <body> 我需要用火狐打开这个链接 <script> // 获取链接元素 var link = document.querySelector('a[href="/ckb/main.do?action=getMain#"]'); // 为链接元素添加点击事件处理函数 link.onclick = function() { // 使用浏览器内置的方法打开链接 window.open(link.href, "firefox.exe"); return false; }; </script> </body> </html>

2023-05-27 上传

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鉴本</title> <style> table { border-collapse: collapse; width: 100%; } th, td { padding: 8px; text-align: left; border: 1px solid #ddd; } th { background-color: #f2f2f2; } table img { max-width: 150px; height: auto; } .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; } .popup img { max-width: 100%; max-height: 100%; cursor: zoom-out; } .sticky-header { position: sticky; top: 0; background-color: #f5f5f5; /* 可根据需要设置背景色 */ } </style> </head> <body>
<button onclick="addRow()">新增一行</button> <button onclick="addColumn()">添加一列</button> <button onclick="deleteRow()">删除行</button> <button onclick="deleteColumn()">删除列</button>
这样调整后列宽仍然没有变化
2023-07-16 上传

<!DOCTYPE html> <html> <head> <title>我的网页</title> <meta charset="UTF-8"> <style> /* CSS 样式表 */ body { margin: 0; background-color: #f2f2f2; font-family: Arial, sans-serif; } header { background-color: #333; color: white; padding: 20px; text-align: center; font-size: 24px; } nav { background-color: #f1f1f1; text-align: center; padding: 10px; margin-bottom: 20px; } nav a { display: inline-block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 18px; font-weight: bold; } nav a:hover { background-color: #ddd; color: black; } section { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 20px; } section img { max-width: 100%; height: auto; margin: 10px; box-shadow: 0 0 5px #ccc; } section p { font-size: 18px; line-height: 1.5; text-align: center; margin: 10px; } /* JavaScript */ section img:hover { transform: scale(1.1); box-shadow: 0 0 10px #ccc; } /* jQuery */ $(document).ready(function(){ $("nav a").click(function(){ $(this).addClass("active").siblings().removeClass("active"); }); }); </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> /* JavaScript */ function showMsg() { alert("欢迎来到我的网页!"); } </script> </head> <body>

欢迎来到我的网页

图片1

这是一张美丽的图片

图片2

这是另一张美丽的图片

图片3

这是第三张美丽的图片

2021我的网页

<script> /* JavaScript */ showMsg(); </script> </body> </html>

2023-06-10 上传

网页源代码模板如下: <html> <meta http-equiv="Content=-Type" content="text/html; charset=utf-8"/> <head> <link href="http://192.167.1.101/hint.css" rel="stylesheet"></link> </head> <body>[talkid:137031381]2014年4月20日 03:55:45 , 2323234 在群 20011 中发言 我们已经是dffwerwer天吧!

()

[talkid:137031382]2014年4月22日 04:45:45 , 2323234 在群 20011 中发言 音频 :[
音频

()

[talkid:137031383]2014年4月23日 04:55:45 , 2323234 在群 20011 中发言 图片 :[图片

()

[talkid:137031384]2014年4月24日 05:55:45 , 2323234 在群 20011 中发言 我们已方式方法方式

()

[talkid:137031385]2014年4月25日 06:55:45 , 2323234 在群 20011 中发言 我而对方是否的天吧!

()

</body> </html> 利用python爬虫,提取源代码字符串,并从每行body中爬取[<a href=后的文件名称,如果没有则将该行文件名设置为NONE

2023-07-17 上传
列1 列2 列3