网页与HTML学习笔记002 | HTML常用标签

@煩煩33

已于 2023-10-18 13:18:35 修改

阅读量237

点赞数 9

文章标签：学习笔记 html

于 2023-10-18 00:30:34 首次发布

本文链接：https://blog.csdn.net/M99922000/article/details/133895894

版权

一、标签语义

二、标题标签

三、段落和换行标签

（以上内容详情见上期文章）

（学习来源：B站黑马pink老师）

四、文本格式化标签

网页中的内容有时为了突出重要性会需要设置粗体、斜体、删除线或下划线的文本效果，这时就需要用到HTML的文本格式化标签。

语义	标签
加粗	<strong></strong>（推荐） or <b></b>
倾斜	<em></em>（推荐） or <i></i>
删除线	<del></del>（推荐） or <s></s>
下划线	<ins></ins>（推荐） or <u></u>

五、<div>和<span>标签

<div>和<span>没有语义，仅相当于一个用来装内容的盒子，用于布局网页。<div>相当于一个大盒子，独占一行；<span>相当于小盒子，一行中可有多个。

#语法格式如下：

<div> （内容1） </div>

<span> （内容2） </span>

六、图像标签和路径

HTML中，<img>标签用于定义HTML页面中的图像

#语法格式如下：

#单标签

<img src="图像URL" />

图像标签具有多个属性：

属性	属性值	说明
src	图片路径	必备属性
alt	文本	图片不能正常显示时显示的替代文字
title	文本	鼠标放到图片上时显示的提示文字
width	像素	设置图像宽度
height	像素	设置图像高度
border	像素	设置图像边框明细

1、一般width和height只设置一个，另一个则根据比例变化，不会使图像过于异形；

2、border属性只做了解，更详细内容在CSS中会学习到；

3、为了方便起见，图片一般与html文件放在同一文件夹中；

4、图像标签属性之间不分先后顺序，属性之间以空格分开；

5、属性采用键值对的格式，属性=“属性值”，如width="500";

七、超链接标签

链接分为外部链接、内部链接、下载链接、网页元素链接、锚点链接和空链接。

内部链接：网站内部页面之间的相互链接，此时直接链接内部页面名称即可；

下载链接：链接的是文件.exe或者是压缩包.zip的地址；

网页元素链接：在网页中的各种网页元素的链接（eg: 点击图片即可跳转到相关地址）；

锚点链接：点击链接后可以快速定位到页面中某个位置，需在href中设定属性值为 #名字 的形式，并找到目标位置标签，里面添加一个id属性，值为方才的名字；

空链接：用于没有确定连接目标时：<a href="#"> 内容 </a>。

#语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

超链接标签的属性
属性	作用
href	用于指定连接目标的ur地址，为必备属性
target	用于指定链接页面打开方式，其中_self为替代当前网页打开目标链接，_blank为在新窗口中打开链接

八、应用以上标签的网页效果

本代码基于上期文章进行改动，以下的标题和图片的html语句统一加上：style="text-align:center;"，即可居中显示。

<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title> 中医养生之八段锦和食疗 </title>
</head>
<body>
    <h2 style="text-align:center;">中医养生</h2>
    <div style="text-align:center;">
        <img src="zyys.jpg" alt="中医养生" title="中医养生你知多少？" width="800">
    </div>
    <h3 style="text-align: center;">【八段锦：练出好身体】</h3>
    <div style="text-align:center;">
        <img src="bdj.jpg" alt="八段锦" title="强身健体增气魄" width="500"><br />
        <a href="https://baike.baidu.com/item/%E5%85%AB%E6%AE%B5%E9%94%A6/62189" target="_blank"> 更多八段锦详情 </a>
    </div>
    <h4 style="text-align: center;">八段锦为传统医学中导引按跷中绚丽多彩之瑰宝</h4>
    <p><strong>八段锦功法</strong>是一套独立而完整的健身功法，起源于北宋，共八百多年的历史。古人把这套动作比喻为<strong>“锦”</strong>，意为五颜六色，美而华贵。体现其动作舒展优美，视其为“祛病健身，效果极好；编排精致；动作完美”。现代的八段锦在内容与名称上均有所改变，此功法分为八段，每段一个动作，故名为“八段锦”，练习无需器械，不受场地局限，简单易学，节省时间，作用极其显著；效果适合于男女老少，可使瘦者健壮，肥者减肥。</p>
    <p>八段锦一般有八节，锦者，誉其似锦之柔和优美。正如明朝高濂在其所著《遵生八笺》中“八段锦导引法”所讲：“子后午前做，造化合乾坤。循环次第转，八卦是良因。”“锦”字，是由“金”“帛”组成，以表示其精美华贵。除此之外，“锦”字还可理解为单个导引术式的汇集，如丝锦那样连绵不断，是一套完整的健身方法。</p>
    <h3 style="text-align: center;">【中医食疗：吃出好气色】</h3>
    <div style="text-align:center;">
        <img src="ysth.jpg" alt="中医饮食调护" title="合理搭配饮食" width="500"><br />
        <a href="https://zhuanlan.zhihu.com/p/566843051" target="_blank"> 更多中医食疗详情 </a>
    </div>
    <h4 style="text-align: center;">中医食疗源远流长，早在二千年前的医学著作《黄帝内经》中就有记载。即所谓"医食同源"、"寓医于食"</h4>
    <h4>概念</h4>
    <p><strong>中医食疗</strong>是在中医药理论的指导下，研究食物的性能、食物与健康的关系，并利用食物维护健康、防治疾病的科学。它是在食疗本草学基础上充实、发展起来的一门科学。它用以维护健康、防治疾病的方法是食物疗法，它与药物治疗有很大不同。它是以食物形式运用的，适应范围广泛，也作为药物或者其他治疗疾病措施的辅助手段，容易让人接受。</p>
    <h4>平衡膳食</h4>
    <p><strong>平衡膳食</strong>是指膳食的种类及其所含的水谷精微，种类齐全、数量充足、比例适当。使其膳食中所供给的营养与机体的需要保持平衡。前人所注五谷：粳米、小豆、大豆、麦、黄黍米；五果为桃、李、杏、栗、枣；五畜为牛、羊、猪、犬、鸡；五菜为葵、藿、薤、葱、韭等。<br />偏食有害 饮食要多样化，要五味得当，荤素协调，寒、热、温、凉适度。偏食会造成人体阴阳失去平衡、脏腑功能受损、或营养不足、营养过剩等不良后果。所以不能偏食。</p>
    <p>----摘自：百度百科、知乎<br />2023年10月17日</p>
</body>
</html>

浏览器运行结果部分截图：