杭州今日头条最新消息_短视频制作软件app_长沙seo推广公司_网站维护主要做什么

文章目录

前言
一、HTML简介
- 1.HTML文件结构
- 2.各标签意义
二、HTML标签介绍
- 1.标题标签
- 2.段落标签
- 3. 换行标签
- 4.hr标签
- 5. span标签
- 6.div标签
- 7.img标签
- 8.超链接标签
- 9.注释标签
- 10.空格
- 11.格式化标签
- 12.sup上标和sub下标
- 13. pre预格式化标签
- 14.table 表格标签
- - table 标签基础内容
  - 合并单元格
- 15.列表标签
三、行内元素、行内块元素和块级元素
- 1. display 属性
- - 块级元素转行内元素示例
  - 行内元素转块级元素示例
- 2.什么是行内元素、块级元素和行内块元素？
- - 行内元素（inline element）
  - 行内块元素
  - 块元素（block element）

前言

在学习 HTM L之前，首先了解什么是 HTML：

HTML：超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。它不是一种编程语言，而是一种标记语言，使用标签来描述网页。HTML文档也叫做web页面。

HTML代码是由标签构成的，标签名放到“< >”中。
大部分标签都是成对出现，例如：以<body>为开始标签，以</body>为结束标签。少数标签只有开始标签的被称为“单标签”。

一、HTML简介

1.HTML文件结构

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>

2.各标签意义

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容

二、HTML标签介绍

1.标题标签

标题标签的默认样式是 自动加粗 的，字体一级标题最大，六级标题最小，每个标题标签独占一行；
标题标签是 块元素

<h1>一级标题</h1>
<h2>二级标题</h2> 
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title></head><body><h1>一级标题</h1><h2>二级标题</h2> <h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6></body>
</html>

页面效果：
在这里插入图片描述

2.段落标签

段落标签p,里面的内容是以段落的形式体现的，如果一个段落的文字太多，那么它会自适应浏览器窗口，一行显示不下，则会换行；
它代表着一个自然段；
段落标签是 块元素。

<p></p>

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><p>注意：doctype声明是不区分大小写的，用来告知web浏览器页面使用了那种HTML版本。对于中文网页需要使用 charset="utf-8" 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 charset="gbk" 。目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候需要在头部将字符声明为 UTF-8。</p><p>这是一个注意事项。</p><p>这是一个注意事项。</p>
</body></html>

页面展示：
在这里插入图片描述

3. 换行标签

换行标签br的作用是，强制换行。br 是 单标签。

<br/>

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body>第一行<br/>第二行<br/>第三行<br/>
</body></html>

页面展示：
在这里插入图片描述

4.hr标签

hr标签：给页面添加一个分割线
hr标签，可以添加样式

<hr>

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head>
<style>div>hr {height: 20px;background-color: red;}
</style><body>第一行<br /><hr><div>第二行<br /><hr></div>第三行
</body></html>

页面展示：

在这里插入图片描述

5. span标签

<span></span>

span 用于对文档中的行内元素进行组合；
span 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 span 应用样式，那么span 元素中的文本与其他文本不会任何视觉上的差异；
span 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式；
span 标签不同于p 标签是一个行内元素（不独占一行）

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><span>1234</span><span>5678</span>
</body></html>

页面效果：
在这里插入图片描述

6.div标签

<div></div>

div 标签可以看出是一个盒子容器，这里面可以放别的标签
div 标签是一个块元素

页面效果：

在这里插入图片描述

如上图控制台所示（打开控制台的方式：F12）：div 标签里面可以包含 p 标签， p 标签，里面不可以放div 标签

7.img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">src的路径分为：网上的图片路径和本地的图片路径

8.超链接标签

<a></a>

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><a href="http://www.baidu.com" target="_blank">百度</a>
</body></html>

作用：点击文字跳到链接的地方
a是行内元素
href：规定链接的目标URL
target：（链接窗口的打开方式）
_blank：新窗口打开。
_parent：在父窗口中打开链接。
_self：默认，当前页面跳转。
_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。

9.注释标签

<!-- 这是一行注释 -->

10.空格

html中默认是不显示空格的，也就是说通过空格键加了空格也没有多个空格的效果，加多少个都是显示一个空格效果，需要特殊字符才能显示出空格效果。

html 的几种空格形式：

&nbsp;        它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了&nbsp;，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。&ensp;         它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其 占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。&emsp;        它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其 占据的宽度正好是1个中文宽度，而且基本上不受字体影响。&thinsp;         它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。&zwnj; 它叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为： &#8204;&zwj;它叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: &#8205; &zwj;）。

11.格式化标签

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><strong>加粗</strong><b>加粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><ins>下划线</ins><u>下划线</u>
</body></html>

页面展示：

在这里插入图片描述

<strong> 和 <b> 都是加粗文本，但是<strong>的语义更加强列

12.sup上标和sub下标

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><p>x<sup>2</sup></p><p>log<sub>2</sub>10</p></body></html>

页面展示：

在这里插入图片描述

13. pre预格式化标签

代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><pre>我是一个 有样式的文字</pre>
</body></html>

页面展示：
在这里插入图片描述

可以看出上面的代码和运行结果显示<pre>标签保留了文本中的空格和换行<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

14.table 表格标签

table 标签基础内容

table标签包含 tr, tr 标签包含 td 和 th：

table：表示整个表格
tr：表示表格的一行
td：表示一个单元格
th：表示表头单元格，会居中加粗
thead：表格的头部区域, 范围是比 th 大
tbody：表格得到主体区域

表格标签的属性可以用于设置边框大小等，但需要放到 table 标签中：

align：是表格相对于周围元素的对齐方式，align=“center” (不是内部元素的对齐方式)
border：表示边框，1表示有边框(数字越大, 边框越粗)，“” 表示没边框
cellpadding：内容距离边框的距离，默认 1 像素
cellspacing：单元格之间的距离，默认为 2 像素
width / height：设置尺寸

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><tr><td>姓名</td><td>性别</td></tr><tr><td>张三</td><td>男</td></tr></table>
</body></html>

页面展示：

在这里插入图片描述

合并单元格

先确定跨行还是跨列，找好目标单元格(跨列合并，左侧是目标单元格；跨行合并，上方是目标单元格)，删除的多余的单元格。
跨行合并: rowspan=“n”
跨列合并: colspan=“n”

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><table width="100%" align="center" border="1"><tr align="center"><th colspan="6">财务周期表</th></tr><tr><th colspan="3" align="left" style="border-right-style: hidden;">商品类型：JJJ</th><th colspan="3" align="left" style="border-left-style: hidden;">商品编号：AAAA</th></tr><tr align="center"><th width="17%">成本</th><th width="17%">损耗</th><th width="17%">保全价值</th><th width="17%">成本</th><th width="17%">损耗</th><th width="17%">保全价值</th></tr><tr align="center"><td width="17%">100</td><td width="17%">233</td><td width="17%">345</td><td width="17%">467</td><td width="17%">523</td><td width="17%">64</td></tr></table>
</body></html>

页面展示：

在这里插入图片描述

15.列表标签

无序列表：ul，li有序列表：ol，li自定义列表：dl（总标签），dt（小标题），dd

注：元素之间是并列关系：

ul/ol中只能放li不能放其他标签
dl中只能放dt和dd
li中可以放其他标签

代码示例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><h2>无序列表</h2><ul><li>111</li><li>222</li><li>333</li></ul><h2>有序列表</h2><ol><li>111</li><li>222</li><li>333</li></ol><h2>自定义列表</h2><dl><dt>111</dt><dd>222</dd><dd>333</dd><dd>444</dd></dl>
</body></html>

页面展示：

在这里插入图片描述

三、行内元素、行内块元素和块级元素

HTML 可以将元素分类方式分为 行内元素、块级元素和行内块元素。

1. display 属性

使用 display 属性能够将三者任意转换：

display:inline;// 转换为行内元素
display:block;// 转换为块级元素
display:inline-block// 转换为行内块元素

块级元素转行内元素示例

p 标签是块级元素：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><p>第一段</p><p>第二段</p>
</body></html>

上面代码的页面展示如图：
在这里插入图片描述
通过 display:inline; 将其转化为行内元素：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 HTML</title>
</head><body><p style="display:inline">第一段</p><p style="display:inline">第二段</p>
</body></html>

页面展示如图：
在这里插入图片描述

行内元素转块级元素示例

<span style="text-align: center;">这是行内元素</span>

此时的页面展示如下，因为 text-align 修饰的是块级元素：
在这里插入图片描述
当通过 display:block; 转化为块级元素时：

<span style="text-align: center;display: block;">这是行内元素</span>

页面展示如下：
在这里插入图片描述

text-indent/text-align 都是修饰块级元素

2.什么是行内元素、块级元素和行内块元素？

行内元素（inline element）

特点：1.不会独占一行，它是自左向右排列，一行排满再换行2.行内元素的宽和高，默认是被内容撑开的3.对 margin 仅设置左右方向有效，上下无效，padding 设置上下左右都有效4.不会自动进行换行常用行内元素：span em strong a i ......

行内块元素

特点：1.兼具块元素和行内元素特点2.不会独占一行，可自定义宽高3.默认排序方式为从左到右

块元素（block element）

特点：1.能够识别宽高2.margin 和 padding 的上下左右均对其有效3.独占一行4.多个块级元素标签写在一起，默认排序方式为从上至下常用块元素：div h1-h6 p header footer nav......

拓展内容：

HTML5基础知识

杭州今日头条最新消息_短视频制作软件app_长沙seo推广公司_网站维护主要做什么

文章目录

前言

一、HTML简介

1.HTML文件结构

2.各标签意义

二、HTML标签介绍

1.标题标签

2.段落标签

3. 换行标签

4.hr标签

5. span标签

6.div标签

7.img标签

8.超链接标签

9.注释标签

10.空格

11.格式化标签

12.sup上标和sub下标

13. pre预格式化标签

14.table 表格标签

table 标签基础内容

合并单元格

15.列表标签

三、行内元素、行内块元素和块级元素

1. display 属性

块级元素转行内元素示例

行内元素转块级元素示例

2.什么是行内元素、块级元素和行内块元素？

行内元素（inline element）

行内块元素

块元素（block element）

最新新闻

热搜词