HTML HTML- <head> (stage1-18)

最新推荐文章于 2021-06-27 06:01:46 发布
最新推荐文章于 2021-06-27 06:01:46 发布
阅读量280 收藏
点赞数
文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38628915/article/details/78972881
版权

基础篇：HTML- <head>

1.HTML <head> 元素

<head> 元素包含了所有的头部标签元素。
在 元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

2.HTML <title> 元素

<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。
<title> 元素:

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:
实例:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>

<body>
文档内容......
</body>

</html>
3.HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.baidu.com/" target="_blank">
</head>

<link> 标签定义了文档与外部资源之间的关系。
<link> 标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
5.HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.
在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
6.HTML <meta> 元素

meta标签描述了一些基本的元数据。
<meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
meta 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta> 一般放置于 <head> 区域

<meta> 标签- 使用实例
1)为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

2)为网页定义描述内容:

<meta name="description" content="免费 Web & 编程 教程">

3)定义网页作者:

<meta name="author" content="Macfang">

4)每30秒钟刷新当前页面:

<meta http-equiv="refresh" content="30">
7.HTML <script> 元素

<script>标签用于加载脚本文件，如： JavaScript。
<script> 元素在以后的文章中会详细描述。

8.HTML head 元素
标签描述
<head>定义了文档的信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件
9.实例

1）使用 <title> 标签定义HTML文档的标题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>我的 HTML 的第一页</title>
</head>
<body>
<p>浏览器中包含body元素的内容。</p>
<p>浏览器的标题包含title元素的内容</p>
</body>
</html>

运行结果：
这里写图片描述

2）使用 <base> 定义页面中所有链接默认的链接目标地址

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>案例2</title> 
<base href="http://www.runoob.com/images/" target="_blank">
</head>

<body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。能正常显示是因为我们在 head 部分设置了 base 标签，该标签指定了页面上所有链接的默认 URL，所以该图片的访问地址为 "http://www.runoob.com/images/logo.png"
<br/>
<a href="http://www.runoob.com">菜鸟教程</a> - 注意这个链接会在新窗口打开，即便它没有 target="_blank" 属性。因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>
</html>

3)使用 <meta> 元素来描述HTML文档的描述，关键词，作者，字符集等

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>案例3</title> 
<meta name="description" content="免费在线教程">
<meta name="keywords"content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Macfang">
<meta charset="UTF-8">
</head>

<body>
<p>所有 meta 标签显示在 head 部分</p>
</body>
</html>
Mac-fang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
post打开html静态,ztree 异步加载 点击展开出现post请求静态资源index.html
weixin_42389478的博客
06-19 1171
//树的设置var tree = {zTree:'',pNode:'',setting : {showLine : true, //是否显示节点间的连线check: {enable: true,autoCheckTrigger: true},async:{enable: true, //采用异步加载dataFilter: ajaxFilter},root:{isR...
HTML HTML 链接 (stage1-17)
MAC--芳
01-04 882
基础篇-HTML 链接 1.HTML 链接 HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。 实例: html> head> meta charset="utf-8"> title>案例1title> head> body> p> a href="https://www.baidu.c
HTML HTML 基础 (stage1-10)
MAC--芳
12-28 295
基础篇-HTML 基础 1.HTML 标题 HTML 标题（Heading）是通过 - 标签来定义的. 实例： h1>这是一个标题h1> h2>这是一个标题h2> h3>这是一个标题h3> 2.HTML 段落 HTML 段落是通过标签 来定义的. 实例: p>这是一个段落。p> p>这是另外一个段落。p> 3.HTML 链接 HTML 链接是通过标签
HTML HTML 列表 (stage1-22)
MAC--芳
01-09 226
基础篇-HTML 列表 HTML 支持有序、无序和定义列表: 1.HTML无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 无序列表使用 标签。 ul> li>Coffeeli> li>Milkli> ul> 浏览器显示如下： 2.HTML 有序列表 同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 标签。
index.html c,index.html
weixin_39572288的博客
06-27 288
CyylogCyylog有些人是山川是河流，唯独不是可停泊的港口HomeArchives2020-09-20DevOpsgitlab-ci 入门gitlab-ci入门示范：12345678docker run -d --name gitlab-runner \ -v /data/cyy/gitlab-runner:/etc/gitlab-runner \ -v /var/run/dock...
stage1-bg17-
03-12
每个HTML元素都有其特定的作用，比如`<head>`用于包含元信息，`<body>`则包含了网页的可见内容。在"stage1-bg17--main"这个文件名中，“main”可能是指主要的HTML文件，通常命名为“index.html”，它是网站的入口点...
stage1-ag21
03-16
DOCTYPE html>`声明，接着是`<html>`根元素，它包含`<head>`和`<body>`两个子元素。`<head>`用来定义元数据，如字符集、标题和样式表引用，而`<body>`则是页面实际内容的容器。 2. **文本内容**：`<h1>`到`<h6>`...
stage1-ag3
03-18
HTML标签通常是成对出现的，比如`<html>`、`<head>`、`<body>`等，它们告诉浏览器如何呈现内容。例如，`<html>`标签是整个文档的根元素，`<head>`包含文档元数据，如标题和样式表链接，而`<body>`则包含实际的页面...
stage1-ag6
03-18
HTML的基础结构包括一系列的标签，这些标签定义了网页的各个部分，如`<html>`、`<head>`和`<body>`。`<head>`部分通常包含元信息，如页面标题、字符集设置等，而`<body>`则包含实际的可见内容。HTML还允许插入图像...
stage1-bg1
03-19
例如，`<html>`是文档的根元素，`<head>`包含元数据如标题，而`<body>`则容纳了网页的可见内容。在创建网页背景时，我们可能会用到`<div>`元素作为容器，通过CSS（Cascading Style Sheets）来设定背景图像、颜色或...
[git] 针对index/stage 的操作
natual177的博客
01-03 694
1.查看index/stage的文件 git ls-files 2.删除某个index/stage的文件 git rm --cached xxx（file名字） 切换分支，index/stage共享文件， 可以多次checkout，checkout默认是从index/stage checkout。 3.git stash 即使是git add了的文件，gitstash之后，也会恢复...
教学管理系统
baidu_32542573的博客
04-30 728
==================================Subject===========================一.forms.pyfrom django import formsclass EditForm(forms.Form):    name=forms.CharField(required=True)    amount=forms.IntegerField(re...
HTML5 HTML5表单与PHP的交互 (stage1-3)
MAC--芳
12-27 3726
今天来学习HTML5表单与PHP的交互： 1）打开IDEA，新建一个HTML 文件： 我将它命名为index01 我们修改表单的标题： 2）接下来，创建一个表单： 首先是显示用户名和密码，分别为其指定name（后面会用到） 在这里，我们在创建表单时，指定了两个属性： action:表示表单提交的服务器地址； method:表示提交的方式，有两种,分别为get和post（
项目访问index.html，默认跳转到login.jsp页面，隐藏地址栏每次显示请求路径和参数，定个在域名不变
bellus
11-14 2万+
知识点 1.两种方法页面进行加载跳转到主页 2.地址栏保持域名不变的实现
git 学习笔记（一）
mika85489的专栏
06-02 529
摘要：git 基础
什么是index.html？ 如何创建和使用index.html？
热门推荐
cunjiu9486的博客
10-12 8万+
Websites provide a lot of web pages with different URLs but there are some defacto pages that exist most of the web sites. index.html is one of them. index.html is used as the main or entrance page fo...
【Django框架】项目框架、视图层（view.py）、URL映射（urls.py ）和APP的模板层（index.html）
Strive_0902的博客
03-22 1668
运行Django项目： 通过命令行的方式： python manage.py runserver 。在本地浏览器http://127.0.0.1:8000/ 来访问自己写的网站啦。如果想要修改端口号，在运行的时候可以指定端口号， python manage.py runserver 9000 这样就可以通过 9000 端口来访问啦。另外，这样运行的项目只能在本机上能访问，如果想要在其他电脑上...
HTML HTML 表单和输入 (stage1-25)
MAC--芳
01-09 332
基础篇-HTML 表单和输入 1.HTML 表单 HTML 表单用于搜集不同类型的用户输入. 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 来设置: form> . input 元素 . form> 2.HTML
【原】Spark中Stage的提交源码解读
weixin_30645617的博客
04-05 107
版权声明：本文为原创文章，未经允许不得转载。 复习内容： Spark中Job如何划分为Stage http://www.cnblogs.com/yourarebest/p/5342424.html 1.Spark中Stage的提交 1.在复习内容中，将Job划分为Stage这一过程的调用起始于方法handleJobSubmitted，同样Stage的提交也包含在该方法中，如下所示： priva...
将下面的代码改成createjs的方法 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> </head> <body> <canvas id="canvas" width="600" height="300""></canvas><br> <button style="width:80px;background-color:yellow;" onclick='linecolor = "yellow";'>YELLOW</button> <button style="width:80px;background-color:red;" onclick='linecolor = "red";'>RED</button> <button style="width:80px;background-color:blue;" onclick='linecolor = "blue";'>BLUE</button> <button style="width:80px;background-color:green;" onclick='linecolor = "green";'>GREEN</button> <button style="width:80px;background-color:white;" onclick='linecolor = "white";'>WHITE</button> <button style="width:80px;background-color:black;color:white;" onclick='linecolor = "black";'>BLACK</button> <br> <button style="width:80px;background-color:white;" onclick="linw = 4;">4px</button> <button style="width:80px;background-color:white;" onclick="linw = 8;">8px</button> <button style="width:80px;background-color:white;" onclick="linw = 16;">16px</button> <br> <button style="width:80px;background-color:pink;" onclick="copyimage();">EXPORT</button> <br> <img src="" id="image_png" width="600" height="300"> <script type="text/javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //画一个黑色矩形 ctx.fillStyle="black"; ctx.fillRect(0,0,600,300); //按下标记 var onoff = false; var oldx = -10; var oldy = -10; //设置颜色 var linecolor = "white"; //设置线宽 var linw = 4; //添加鼠标移动事件 canvas.addEventListener("mousemove",draw,true); //添加鼠标按下事件 canvas.addEventListener("mousedown",down,false); //添加鼠标弹起事件 canvas.addEventListener("mouseup",up,false); function down(event){ onoff = true; oldx = event.pageX-10; oldy = event.pageY-10; } function up(){ onoff = false; } function draw(event){ if(onoff == true){ var newx = event.pageX-10; var newy = event.pageY-10; ctx.beginPath(); ctx.moveTo(oldx,oldy); ctx.lineTo(newx,newy); ctx.strokeStyle=linecolor; ctx.lineWidth=linw; ctx.lineCap="round"; ctx.stroke(); oldx = newx; oldy = newy; }; }; function copyimage(event){ var img_png_src = canvas.toDataURL("image/png"); document.getElementById("image_png").src = img_png_src; } </script> </body> </html>
最新发布
05-05
<head> <meta charset="utf-8" /> <script src="https://code.createjs.com/1.0.0/createjs.min.js"></script> </head> <body> <canvas id="canvas" width="600" height="300"></canvas><br> <button style=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值