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

文章目录

一、HTML示例代码
二、如何书写一个标准的HTML5.0 网页
三、HTML:HyperText Markup Language 超文本标记语言
四、Head头部
五、标签
- 5.1 标签类型
- 5.2 布局标签
六、文本类型标签（h1重要文字）
七、图像标签
- 7.1 标签属性:
- 7.2 图像类型
- 7.3 图像路径

一、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头部

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

<title></title> 标题:中间文字显示在浏览器标签左上角
#通常:保存网站名称
<meta charset="utf-8"> 指定网页显示编码
#唯一 utf-8
<meta name="description" content="">网站介绍(项目用)

description="学子商城是WEB前端教学性网站,功能完备...."

<meta name="keywords" content=""> 网站关键字(项目用)

keywords="笔记本,PAD,手机"

<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>特点

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

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

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

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

功能:

字体大小变化：h1最大 h6最小，文本加粗
单独成行，上下有垂直间距
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”

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

k8s基础概念：pause容器和pod控制器类型
pause容器的作用 pause容器:只要是有容器启动,pause就会启动. pod内的其他容器会共用pause容器的网络栈和存储卷. 容器是没有自己的IP地址的,都共用pause容器的. 要保证po ...
html中头部相关标签(＜head＞)基本概念
头部相关标签基本概念 1 头部相关标签 1.1 title标签 1.2 meta标签 1.3 link标签 1.4 style标签 2 相关选择题及参考答案 2.1 选择题 2.2 参考答案 1 头部 ...
欧巴，再不懂你就OUT啦（MySQL的基础概念）
目录如何理解数据库的相关概念 1. 数据库与数据库管理系统 2.数据库的分类基础概念 1.表 2.行.列 3.主键记: 如何理解数据库的相关概念 1. 数据库与数据库管理系统数据库(DataB ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
EMNLP 2021 | 多标签文本分类中长尾分布的平衡策略
点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达作者 | 黄毅作者简介:黄毅,本文一作,目前为罗氏集团的数据科学家 ...
【多标签文本分类】SGM: Sequence Generation Model for Multi-Label Classification
·阅读摘要: 本文提出基于SGM模型,在Seq2Seq的基础上提出SGM模型应用于多标签文本分类.论文还提出了很多提升模型表现的细节,这是在Seq2Seq中没有的. ·参考文献: [1] SG ...
WCF与AJAX编程开发实践(1):AJAX基础概念和纯AJAX示例
[0]开篇序言: 在<WCF分布式安全开发实践>系列文章之后,很想重新开启一个系列文章,来完善WCF的学习知识.思考很久,决定写一下WCF和AJAX学习的文章,取名为<WCF ...
面试：JavaScript基础概念
文章目录 1. JS基础概念 JavaScript 常见知识总结重点 1.js的基本数据类型都有哪些 2.判断基本数据类型的方法 typeof instanceof Object.prototype ...
fastai 文本分类_使用Fastai v2和多标签文本分类器检查有毒评论
fastai 文本分类 The internet has become a basic necessity in recent times and a lot of things which happ ...

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

文章目录

一、HTML示例代码

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

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

四、Head头部

五、标签

5.1 标签类型

5.2 布局标签

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

七、图像标签

7.1 标签属性:

7.2 图像类型

7.3 图像路径

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

最新文章

热门文章

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

文章目录

一、HTML示例代码

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

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

四、Head头部

五、标签

5.1 标签类型

5.2 布局标签

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

七、 图像标签

7.1 标签属性:

7.2 图像类型

7.3 图像路径

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

最新文章

热门文章

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

七、图像标签