HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解(上)

简介: HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解(上)

HTML标签:排版标签

排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍:

<h1>: 定义一级标题,通常用于标题栏或页面主要内容的标题。
<p>: 定义段落,用于将文字分段展示,段落之间会有空行。
<hr />: 创建水平线,通常用于分隔不同部分的内容。
<br />: 插入换行符,用于在文本中创建换行效果。
<div>: 定义文档中的一个区域,可用于分组相关元素,或用于控制元素的样式。
<span>: 定义文本的一小部分,常用于指定特定的样式,如颜色、字体等。
<center>: 对其所包含的内容进行居中对齐,适用于块级元素。
<pre>: 保留文本中的空白字符(包括空格和换行符),保持原始格式,适用于展示代码或预格式文本。
这些排版标签可以通过HTML语言嵌入到网页中,配合CSS样式表进行进一步的样式调整,实现网页的美化和布局。

标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。

<h1><h6><h1><h6>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>H1:千古壹号,永不止步</h1>
  <h2>H3:千古壹号,永不止步</h2>
  <h3>H3:千古壹号,永不止步</h3>
  <h4>H4:千古壹号,永不止步</h4>
  <h5>H5:千古壹号,永不止步</h5>
  <h6>H6:千古壹号,永不止步</h6>
</body>
</html>

将给定的HTML代码转换为Markdown格式的标题标签如下所示:

# H1:千古壹号,永不止步
## H3:千古壹号,永不止步
### H3:千古壹号,永不止步
#### H4:千古壹号,永不止步
##### H5:千古壹号,永不止步
###### H6:千古壹号,永不止步

效果演示:

H1:千古壹号,永不止步

H3:千古壹号,永不止步

H3:千古壹号,永不止步

H4:千古壹号,永不止步
H5:千古壹号,永不止步
H6:千古壹号,永不止步

HTML 注释

<!-- 我是 html 注释  -->

在HTML中,可以使用注释来向代码添加说明或注解。HTML注释不会在网页上显示,只是对代码进行注释和说明,方便开发人员理解和维护代码。

HTML注释以<!--开始,以-->结束。在注释内可以写入任何内容,包括文本、标签等。注释可以跨越多行,但不能嵌套注释。

以下是HTML注释的示例:

<!-- 这是一个HTML注释 -->
<!-- 注释可以用于添加说明或注解 -->
<!-- 注释可以跨越多行 -->
<!-- 
    这是一个多行注释的示例,
    可以在这里添加更多的注释内容。
-->

请注意,HTML注释仅对代码本身起作用,不会影响网页的显示效果。

段落标签< p>

在HTML(超文本标记语言)中,<p> 标签是一个段落标签。这个标签常常用来表示文档中的一个段落。一个段落是由一个或多个连续的文本行组成,而且通常会有一个空行(空白或者其它的元素)来隔离它与其它的段落。

例如:

<p>这是一个段落。</p>
<p>这是另一个段落。</p>

上面的HTML代码会生成两个段落。

<p> 标签是一个非常基础的HTML标签,它在网页设计中经常被使用。这个标签通常与其它的HTML标签(如标题标签 <h1><h6>,链接标签 <a>,列表标签 <ul>, <ol>, <li> 等)一起使用来构建一个结构化、有意义的网页内容。

除了基本的段落表示,<p> 标签还可以配合一些全局属性(global attributes)来改变段落的外观或行为。这些全局属性包括但不限于:

  • class:为元素指定一个或多个类名,以便通过CSS来样式化。
  • id:为元素指定唯一的标识符,可以通过JavaScript或者CSS来选择和操作这个元素。
  • style:直接在元素上应用CSS样式。
  • title:为元素提供一个描述性信息,通常作为鼠标悬停时的提示文本。

例如:

<p class="intro" style="color:blue;">这是一个蓝色的段落。</p>

上面的HTML代码创建了一个带有蓝色文本的段落,并且给它赋予了一个类名 “intro”。

此外,<p> 标签不能包含块级元素,如 <div>, <header>, <footer>, <p>, <section> 等。如果需要在一个段落中嵌入块级元素,可以考虑使用 <div> 标签代替。

HTML标签是分等级的,HTML将所有的标签分为两种:

文本级标签:p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。(a标签里不能放a和input)

容器级标签:d iv、h系列、li、dt、dd。容器级标签里可以放置任何东西。

从学习p的第一天开始,就要牢牢记住:p标签是一个文本级标签,p里面只能放文字、图片、表单元素。其他的一律不能放。

错误写法:(尝试把 h 放到 p 里)

<p>
  我是一个小段落
  <h1>我是一级标题</h1>
</p>

上图显示,浏览器不允许你这么做,我们使用Chrome的F12审查元素发现,浏览器自己把p封闭掉了,不让你去包裹h1。

PS:Chrome浏览器是HTML5支持度最好的浏览器。提供了非常好的开发工具,非常适合我们开发人员使用。审查元素功能的快捷键是F12。

水平线标签< hr />

水平线标签 <hr /> 是在HTML中用于插入水平分隔线的标签。它是一个自闭合标签,不需要闭合标签。

使用 <hr /> 标签可以在文档中创建水平线,用于视觉上将内容分隔开来或表示不同部分之间的分隔。水平线通常在段落、标题或其他内容之间使用,以增加页面的可读性和组织性。

以下是一个使用 <hr /> 标签创建水平线的示例:

<p>这是第一个段落。</p>
<hr />
<p>这是第二个段落。</p>

在浏览器中显示的效果将是这样的:

这是第一个段落。
-------------------------------------------
这是第二个段落。

你还可以使用CSS样式来自定义水平线的外观,例如指定颜色、宽度、样式等。

<hr /> 标签用于在HTML中插入水平分隔线,用于在内容之间进行分隔和组织。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>自古情深留不住</p>
  <hr />
  <p>总是套路得人心</p>
</body>
</html>

属性介绍:

align=“属性值”:设定线条置放位置。属性值可选择:left right center。

size=“2”:设定线条粗细。以像素为单位,内定为2。

width=“500"或:设定线条长度。可以是绝对值(单位是像素)或相对值。如果设置为相对值的话,内定为100%。width=“70%”

color=”#0000FF":设置线条颜色。

noshade:不要阴影,即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。

当使用 <hr /> 标签插入水平线时,你可以通过CSS样式来自定义水平线的外观。下面是一些常用的CSS属性和值,用于自定义水平线:

  1. color: 指定水平线的颜色。可以使用预定义的颜色名称或十六进制颜色值。例如:color: red;color: #000000;
  2. width: 指定水平线的宽度。可以使用像素值(如 px)或百分比(如 %)。例如:width: 2px;width: 50%;
  3. height: 指定水平线的高度。可以使用像素值或百分比。默认情况下,水平线的高度是由浏览器决定的。
  4. border-style: 指定水平线的边框样式。常用的值包括 solid(实线)、dashed(虚线)、dotted(点线)等。例如:border-style: dashed;
  5. margin: 指定水平线的外边距。可以使用像素值或百分比。默认情况下,水平线的外边距是由浏览器决定的。
  6. padding: 指定水平线的内边距。可以使用像素值或百分比。默认情况下,水平线没有内边距。

示例:

<hr style="color: blue; width: 50%; border-style: dashed; margin-top: 20px; margin-bottom: 20px;">

在上面的示例中,水平线的颜色被设置为蓝色,宽度为50%,边框样式为虚线,上下外边距为20像素。

需要注意的是,使用CSS样式来自定义水平线时,最好将样式定义在外部的CSS文件或内部样式表中,以提高代码的可维护性和可重用性。

总结来说,通过使用 <hr /> 标签以及CSS样式,你可以轻松地自定义水平线的外观,使其与页面的设计风格相匹配。

换行标签< br />

换行标签 <br /> 是在HTML中用于插入换行的标签。它是一个自闭合标签,不需要闭合标签。

使用 <br /> 标签可以在文本中创建强制换行的效果。当浏览器解析到 <br /> 标签时,会在此处插入一个换行符,使文本从下一行开始。

以下是一些使用 <br /> 标签创建换行的示例:

<p>这是第一行。<br />这是第二行。</p>
<p>这是单独一行。<br /><br />这是另外一行。</p>

在浏览器中显示的效果将是这样的:

这是第一行。
这是第二行。
这是单独一行。
这是另外一行。

需要注意的是, <br /> 标签只能在文本中使用,不能用于插入空行或分隔其他HTML元素。

总结来说,通过使用 <br /> 标签,你可以在HTML文本中插入换行,以改变文本的布局和格式。

HTML 字符实体是一种特殊的编码序列,用来在 HTML 中表示一些特殊字符或符号。这些特殊字符可能会与 HTML 的基本语法产生冲突,因此需要使用字符实体来进行转义。

常用的字符实体包括:

  • &lt;:小于号 <
  • &gt;:大于号 >
  • &amp;:& 符号
  • &quot;:双引号 "
  • &apos;:单引号 '

例如,如果你想在 HTML 中显示一个标题,但标题中包含了小于号和大于号,那么你就需要对这些字符进行转义:

<h1>5 &lt; 10 &gt; 2</h1>

在浏览器中显示的效果将是:

5 < 10 > 2

需要注意的是,在 HTML 中还有一些其他的字符实体,你可以使用它们来表示一些特殊字符或符号。如果你不确定某个字符是否需要进行转义,可以查看相关文档或使用搜索引擎进行查询。

总结来说,使用 HTML 字符实体可以在 HTML 中安全地表示一些特殊字符或符号,避免与 HTML 的基本语法产生冲突,从而确保 HTML 文档的正确解析和显示。

< div>和标签< span>

<div><span> 都是 HTML 页面中常用的容器标签,它们主要的作用是对页面的布局和样式进行处理。

<div> 标签通常用于表示文档中的一个区域或一个块级元素。你可以在 <div> 中嵌套其他的 HTML 元素,例如文本、图片、链接等。通过添加 classid 属性来为 <div> 元素应用样式,从而控制其外观和位置。

下面是一个使用 <div> 标签创建区块的示例:

<div class="container">
  <h1>这是一个标题</h1>
  <p>这是一个段落。</p>
  <img src="example.jpg" alt="示例图片">
</div>

在上面的示例中,我们使用了 <div> 标签来创建一个容器区块,并在其中嵌套了一个标题、一个段落和一张图片。通过添加 class="container" 属性,我们可以为这个 <div> 元素定义一个样式类,例如:.container { border: 1px solid black; },使得这个容器区块具有边框样式。

相比之下,<span> 标签是一个内联元素,它通常用于包裹一小段文本或一组行内元素。你可以通过为 <span> 元素添加 classid 属性,来为文本内容应用样式,例如:.highlight { color: red; }

目录
相关文章
|
20小时前
|
关系型数据库 MySQL
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
web简易开发(二){html5+php实现文件上传及通过关键字搜索已上传图片)}
|
1天前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
|
1天前
|
JavaScript 前端开发
【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?
【5月更文挑战第1天】【Web 前端】网页上有 5 个div元素,如何使用JQ来选择它们?
|
1天前
|
JavaScript 前端开发
【Web 前端】jQuery 库中的 $() 是什么?
【5月更文挑战第1天】【Web 前端】jQuery 库中的 $() 是什么?
|
1天前
|
前端开发 JavaScript UED
【Web 前端】异步函数
【5月更文挑战第1天】【Web 前端】异步函数
|
1天前
|
前端开发 JavaScript 安全
【Web 前端】怎么实现Module模块化?
【5月更文挑战第1天】【Web 前端】怎么实现Module模块化?
|
1天前
|
JavaScript 前端开发 开发者
【Web 前端】什么是JS变量提升?
【5月更文挑战第1天】【Web 前端】什么是JS变量提升?
【Web 前端】什么是JS变量提升?
|
1天前
|
前端开发 JavaScript
【Web 前端】什么是扩展运算符,用于什么场景?
【5月更文挑战第1天】【Web 前端】什么是扩展运算符,用于什么场景?
【Web 前端】什么是扩展运算符,用于什么场景?
|
1天前
|
自然语言处理 前端开发
【Web 前端】es6 中的箭头函数?
【5月更文挑战第1天】【Web 前端】es6 中的箭头函数?
|
1天前
|
存储 前端开发 索引
【Web 前端】ES6中,Set和Map的区别 ?
【5月更文挑战第1天】【Web 前端】ES6中,Set和Map的区别 ?