前端学习笔记一一html的常用标签

最新推荐文章于 2024-05-07 18:30:56 发布

专注Python二十年

最新推荐文章于 2024-05-07 18:30:56 发布

阅读量1.2k

点赞数 3

文章标签：前端 html html5 web 大前端

本文链接：https://blog.csdn.net/pig_html/article/details/110524795

版权

html简介

1.1 html概述

html全称：Hyper Text Markup Language(超文本标记语言)
超级文本标记语言是标准通用标记语言（SGML）下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
网页文件本身是一种文本文件，通过在文本文件中添加标记符。
可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

1.2 html特点
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件嵌入，这也是万维网盛行的原因之一，其主要特点如下：
1 简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
2 可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
3 平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网盛行的另一个原因。
4 通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

1.3 html语法规则

<!DOCTYPE html>
<html>
  <head>
    <!--设置页面的字符集编码 -->
    <meta charset="utf-8" />
    <!--设置页面的标题 -->
    <title></title>
  </head>
  <body>
    <!--需要展示的信息-->
  </body>
</html>

1.html结构：包括head body
2.html标签是以尖括号包围的关键字
3.html标签通常是成对出现的，有开始就有结束，包含成对标签、独立标签
4.html通常都有属性，格式:属性名＝“属性值”(多个属性之间空格隔开)
5.html标签不区分大小写,建议小写

html基本标签

2.1 结构标签

<html><html>:根标签
<head></head>：头标签
<title></title>:页面的标题
<body></body>：主体标签：网页内容

属性：
color:文本的颜色 <font color="red">内容</font>

bgcolor:背景色 <body bgcolor="bisque"> </body>

background:背景图片
颜色的表示方式：
第一种方式：使用颜色名称: red green blue
第二种方式：RGB模式( #000000 #ffffff #325687 #377405)

2.2 排版标签
1.注释标签：
2.换行标签：<br/>
3.段落标签：<p>文本文字</p>
特点：段与段之间有行高
属性：align对齐方式 (left：左对齐 center：居中 right：右对齐)
4.水平线标签:<hr/>
属性:
width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示)

size: 水平线的粗细 (像素表示，例如：10px)
color:水平线的颜色
align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)

2.3 容器标签

<div></div>:块级标签，独占一行，换行

<span></span>:行级标签，所有内容都在同一行

作用:

<div></div>:主要是结合css页面分块布局

<span></span>:进行友好提示信息

2.4 文字标签

2.4.1 基本文字标签

<font></font>

属性： size:设置字体大小
color:设置字体颜色
face:设置字体

2.4.2 标题标签

<h1></h1>—-<h6></h6>
随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行；

2.5 列表标签

2.5.1 无序列表

无序列表标签：<ul></ul>

属性：type :三个值，分别为
circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：<li></li>

示例如下：

<ul type="square">无序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>

2.5.2 有序列表

有序列表标签：

属性：type：1、A、a、I、i（数字、字母、罗马数字）
列表项： <li></li>
示例如下：

<ol type="I">有序列表
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>

2.5.3 定义列表

定义列表 <dl>
<dt>苹果</dt>
<dd>苹果是一种水果，富含维生素C，美容养颜，吃了长寿....</dd>
</dl>

2.5.4 列表嵌套

<ul>
    <li>咖啡</li>
        <li>茶
            <ul>
                <li>红茶</li>
                <li>绿茶
                    <ul>
                        <li>中国茶</li>
                        <li>非洲茶</li>
                    </ul>
                </li>
            </ul>
        </li>
    <li>牛奶</li>
</ul>

2.6 图片标签

最低0.47元/天解锁文章

专注Python二十年

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
前端学习笔记一一html的常用标签

html简介1.1 html概述html全称：Hyper Text Markup Language(超文本标记语言) 超级文本标记语言是标准通用标记语言（SGML）下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符。可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其
复制链接

扫一扫