HTML基础概念——head头部，及标签（文本、图像类型）

最新推荐文章于 2023-11-08 23:40:25 发布
最新推荐文章于 2023-11-08 23:40:25 发布
阅读量1.3k 收藏 7
点赞数 1
分类专栏： HTML/CSS 文章标签： html5 标签 head 图像
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29493173/article/details/117434611
版权

本文非新手向教程，不讲解具体标签，只记录部分重点内容……

文章目录

一、HTML示例代码

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>我的第一个网页</title>
</head>
<body>
<p>Hello，World！</p>
</body>
</html>

二、如何书写一个标准的HTML5.0 网页

1:创建文件,文件后缀一定是 .html #.htm旧版本网页

2.文件第一行加一句声明 <!DOCTYPE html>，文档类型声明，此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

3.中间基本结构

  <html>            #根标签,在文件中最外标签
    <head></head>   #网页头部标签:全局定义 编码
    <body></body>   #网页主体    :用户可见区域
  </html>

4.书写完成，用浏览器运行网页

三、HTML:HyperText Markup Language 超文本标记语言

1.作用:创建网页并且添加网页内容

2.HTML标准与历史
1995 HTML广泛使用 HTML1.0 2.0 3.0 4.0 XHTML1.0 HTML5.0

#HTM5与以前版本区别:严格
示例:
HTML4.0 <br> <BR> <Br> <br /> 松散
HTML5.0 <br>

四、Head头部

头部标签:定义全局标签功能

  1. <title></title> 标题:中间文字显示在浏览器标签左上角
    #通常:保存网站名称
  2. <meta charset="utf-8"> 指定网页显示编码
    #唯一 utf-8
  3. <meta name="description" content="">网站介绍(项目用)
description="学子商城是WEB前端教学性网站,功能完备...."
  1. <meta name="keywords" content=""> 网站关键字(项目用)
keywords="笔记本,PAD,手机"
  1. <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    #了解即可:只针对于IE浏览器识别使用
    #指定IE浏览器-请使用最新内核来渲染网页
    #IE6;IE7(IE6;IE7);IE8[6;7;8];IE11[6,7,8,9,10,11]

五、标签

HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
HTML 标签由开始标签和结束标签组成，某些 HTML 元素没有结束标签，比如

(1)单标记 <关键字>
示例:
<br>
<input type="text">

(2)双标记 ：必须成对出现 <关键字></关键字>
<form></form>
<div></div>

5.1 标签类型

块级标签行内标签行内块标签
<div> ,<h1>..<h6> ,<p><span>,<i>,<b>,<s>,<a><input>
单独成行,排列从上向下与其它的行内标签，共用一行，一行放不下换行与其它的行内标签共用一行，一行放不下换行
/指定:宽度高度无效可以指定宽度高度

5.2 布局标签

(1)<div></div> 块级元素:区域  作用：设计网页布局

(2)<span></span> 文本标签(一行)，内联元素，可用作文本的容器， 一行

(3)<p></p> 段落，多行文本。单独成行,上下方向有垂直间距

<p>特点

  1. 文本在一个段落中根据浏览器宽度自动换行
  2. 段落与段落之间有空隙
  3. 如果希望在文本中强制换行使用

六、文本类型标签 （h1重要文字）

#此类标签中间的内容是文本字符串

`<h1>标题..</h1><h2>标题..</h2>..<h6></h6> `

功能:

  1. 字体大小变化 ：h1最大 h6最小 ，文本加粗

  2. 单独成行 ，上下有垂直间距

  3. h1保存当前网页中最重要的文字 “网站名称”
    要求:一个网页只能使用一次 h1        #百度搜索引擎建议

七、 图像标签

在网页中<img>标签来定义网页中图像

7.1 标签属性:

属性说明
src必须添加属性,用于指定图像文件的路径和文件名
width图像宽度
height图像高度
title提示文本,当鼠标移动到图像上显示文本内容
alt替换文本,当图像不能正确显示时出现文本

为防止图片变形，只设置width改变大小即可

常见错误
在这里插入图片描述
原因1:图像名称拼写错误，但是图像存在
原因2:图象名称正确，但图像不存在

7.2 图像类型

  • jpg/jpeg    色彩丰富/不支持动画，             透明 照片
  • png           色彩比较丰富/透明                    图标，按钮
  • gif              色彩差/支持动画                       小动态图
  • webp         谷歌2015，有以上优点，小50% 兼容性差

7.3 图像路径

（1）相对路径

  • 兄弟路径
    在这里插入图片描述
    #直接图片名称                   src = “1.jpg”

  • 子目录路径
    在这里插入图片描述
    #文件夹/图片名称               src = “img/1.jpg”

  • 父目录路径
    在这里插入图片描述
    #先返回上一级目录“./”         src = “./1.jpg”

（2）绝对路径

  • 网络：以http https开头
    src = “https://www.baidu.com/img/PC_bdfdce6f6e5f722db0aabdf32d01a03a.gif”
你脸上有BUG
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
HTML头部标识代码的标签和属性
no15870678621的博客
08-03 1355
标签一般格式为：<标签名></标签名>（自结束标签除外）,标签也称为元素。 标签的作用：标识出网页不同的内容。 <!doctype html> <!--文档声明，用来告诉浏览器语法规范和当前网页的版本为html5标准--> <html lang="en"> <!--html根标签，一个网页中有且只有一个根标签，所有网页内容包含在根标签内部，声明文档语言类型为英文--> &l...
HTML基础：head头部标签包含的8种形式详解
最新发布
u013179804的博客
03-17 1213
虽然<head>标签不直接影响页面的展示，但它在网页开发中扮演着至关重要的角色。<head>标签包含了页面的元信息和引用外部资源的声明，这些信息决定了页面的结构、样式和行为，直接影响着用户的浏览体验和搜索引擎的优化。因此，在编写 HTML 文档时，务必要充分理解并正确使用<head>标签，以确保页面能够正常加载、呈现，并达到预期的效果。好了，以上，本节完。排版：云桃桃 | 图片设计：云桃桃作者介绍：云桃桃，在写作的程序媛。终身学习者，陪你一起编程，一起写作❤️。
常用HTML 头部代码
d295968572的博客
09-28 2258
常用HTML 头部代码
前端html小课堂—head篇
yunduanaoligei的博客
01-21 462
今天分享下”前端html小课堂—head篇“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。下面介绍一下常用的head头部结构，以及每个标签、元素的意义和使用场景的逐一介绍（本文基于一个伟大的神的文章，扩展和总结）。 padding.me的head头结构 复制代码 代码如下: <!DOCTYPE HTML> <html lang="zh-cmn-Hans"> <head> &l
Head 头部标签
ssss39的博客
11-20 1945
设置文档自动刷新的时间间隔，content只包含一个正整数，则为重新载入页面的时间间隔（秒），content包含一个正整数和【url=XXX】格式的字符串时，该正整数则是重定向到指定链接的时间间隔（秒）标签用于定义文档的头部，它是所有头部元素的容器。用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标。提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。属性通常一起使用，以键值对的方式给文档提供元数据，其中。是空元素，仅包含属性，只能存在于。的属性值作为元数据的名称，
购物网站制作——头部header（index.html)
哈哈
09-24 2826
给a标签一个title，鼠标经过图片时有文字提示 最后要把给的背景颜色都删除 1.2 search搜索框 1.3 热搜词 1.3 购物车
网页制作基础语言-HTML(1).ppt
11-20
HTML，全称HyperText Markup ...总之，HTML作为网页制作的基础语言，通过结构化的标签和属性，构建了网页的骨架和内容。掌握HTML是成为网页开发者的第一步，随着技术的演进，HTML将持续进化以适应互联网的新需求。
从入门到精通HTML5——PDF——网盘链接
02-27
　1.3.3 文件头部标签<head> 7 　1.3.4 文件标题标签<title> 7 　1.3.5 文件主体标签<body> 7 　1.3.6 编写文件的注意事项 8 　1.4 编写第一个HTML文件 8 　1.4.1 HTML文件的编写方法 8 　1.4.2 ...
HTML——NBA全明星
10-08
HTML网页的基本结构通常包括头部（`<head>`）、主体（`<body>`）两大部分。在头部，开发者可能会包含元信息（如字符集设置`<meta charset="UTF-8">`）、标题（`<title>`）、链接外部样式表（`...
html操作——适合初学者
03-16
5. 图像处理：`<img>`标签插入图像，`src`属性指定图像源，`alt`属性提供替代文本。例如：`示例图像">`。在本例中的3.12letter部分，可能涉及如何使用网络上的图片链接，这要求确保URL的正确性和兼容性。 6. HTML...
网页头部代码
11-20
网页头部代码
HTML网页头部代码实例详解
09-28
HTML中我们一般把部分称为网页的头部。头部部分的内容虽然不会在页面中显示，但它能影响到搜索引擎对网页的收录和排序，以及网页的各种全局设置，可以说是至关重要
mydemo小案例——————
08-19
超链接（`<a>`）用于跳转到其他页面或资源，`<img>`标签用于插入图像，其`src`属性指向图像的URL。 8. **CSS样式**： 虽然标签描述了页面的内容，但CSS（Cascading Style Sheets）用于定义其外观。可以使用`...
重学前端 详解头部（title base link style meta script/noscript）（第三天）
PBitW的博客
07-19 990
head title base link style meta script
html标签总结
m0_68672731的博客
06-01 883
html标签
Web前端—CSEO、Favicon、小兔鲜儿电商网站顶部设计
放下华子我只抽RuiKe5的博客
11-08 937
本文主要介绍了Web前端中的CSEO、Favicon以及小兔鲜儿电商网站顶部设计。CSEO是指搜索引擎优化，通过优化网站的结构和内容，提高网站在搜索引擎中的排名。Favicon是网站图标，可以显示在浏览器标签页上，增加用户对网站的辨识度。小兔鲜儿电商网站顶部设计采用了简洁明了的风格，包括了网站Logo、搜索框、购物车和登录入口等元素，方便用户进行浏览和操作。这些技术的应用可以提高网站的用户体验和流量转化率，对于电商企业来说尤为重要。
HTML中img标签
qq_37805832的博客
06-05 1162
第一种img方式： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <img src="./1.jpg" /> </body> </html> 第二种img方式： <!DOCTYPE html> <
【HTML+CSS+JavaScript】网页实战开发笔记之一——HTML的头部信息里你不知道的事...
yzd
03-16 357
HTML中我们一般把head部分称为网页的头部。头部部分的内容虽然不会在页面中显示，但它能影响到搜索引擎对网页的收录和排序，以及网页的各种全局设置，可以说是至关重要。 ▲知识点一——头部信息里设置网页的基底网址 基底网址的实质是统一设置超级链接的属性，基底网址标签是&lt;/base&gt;，它有两个属性，href和_target。href用于设置基底网址的路径，_...
html description字数限制,description标签如何正确使用？
weixin_36337561的博客
06-03 2186
description是什么意思？description，是HTML中元描述meta的属性之一，用来总结网页的内容。在搜索引擎结果页面(SERP)上，description元描述显示在页面标题下，是页面SEO的关键组成部分。1. description是什么意思？description，是HTML中元描述meta的属性之一，用来总结网页的内容。在搜索引擎结果页面(SERP)上，descriptio...
网页设计制作的讲解PPT
03-10
在学习和实践中，掌握HTML的基本标签，如`<head>`、`<body>`、`<h1>`至`<h6>`的标题标签、`<p>`段落标签、`<a>`链接标签、`<img>`图像标签等是至关重要的。对于CSS，理解选择器的概念，如类选择器、ID选择器和标签...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你脸上有BUG

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值