学习前端第二天

最新推荐文章于 2024-10-16 11:23:07 发布

小歌的学习日常

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量172

点赞数

文章标签：前端学习 html

本文链接：https://blog.csdn.net/m0_59060850/article/details/128844849

版权

这篇博客详细介绍了HTML中的图像标签、超链接、表格和列表的使用，包括路径设置、图像属性、内部与外部链接、表格结构以及无序、有序和自定义列表的创建。通过实例练习，帮助读者掌握前端开发的基础知识。

摘要由CSDN通过智能技术生成

接上篇→

新闻案例

利用第一天所学知识完成新闻稿的排版如图所示：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新闻</title>
</head>
<body>
    <h1>农村地区如何“保健康、防重症”？为何要搞好村内环境卫生？</h1>
    <h4>1.问：农村地区如何做到“保健康、防重症”？</h4>

　　<p>答：我国农村地域广、人口多、人均医疗资源相对不足。为了最大程度降低新冠病毒感染带来的影响，
    更好保障农村居民健康，各地围绕“保健康、防重症”的目标，突出重点人群管理，做到医疗救治“关口前移”，
    其核心就是“早发现、早识别、早干预、早转诊”。</p>
    
    <h4>2.问：一直在农村生活的人，会不会感染新冠病毒？</h4>

　　<p>答：人群对新冠病毒普遍易感。奥密克戎变异株传播力强、传播速度快。过年、过节期间及前后，人员流动加大，
    返乡人员增多，也会有很多旅游者来往，加上节庆娱乐、聚餐聚会、走亲访友等人际交流活动，这些都加大了农村居民
    感染新冠病毒的风险。</p>
    <h4>3.问：赶集、去农贸市场或超市有哪些注意事项？</h4>

　　<p>答：赶集或前往农贸市场、超市时，应全程佩戴口罩，咳嗽、打喷嚏时应避开他人且不应摘掉口罩，不随地吐痰。
    挑选商品或排队结账时，与他人保持1米以上社交距离。注意手卫生，尽量少接触公共设施和物品。及时洗手或使
    用手部消毒剂，不要用不干净的手触摸口、眼、鼻。倡导线上、线下结合的方式进行采购，鼓励线上采购、上门配送、
    无接触交易等便利服务。</p>

    <p>编辑：程祥 责任编辑：刘亮<br />
    来源：新华网 | 2023年02月02日 06:03:52</p>
</body>
</html>

4.4文本格式化标签

在网页中，需要显示文字设置粗体、斜线、下划线等效果，这时就需要HTML中的文本格式化标签，使文字以特殊的方式显示。

标签语义：突出重要性，比普通文字更重要。

语义	标签	说明
加粗	<strong></strong>或<b></b>	推荐<strong></strong>，语义更强烈
倾斜	<em></em>或<i></i>	推荐<em></em>，语义更强烈
删除线	<del></del>或<s></s>	推荐<del></del>，语义更强烈
下划线	<ins></ins>或<u></u>	推荐<ins></ins>，语义强烈

练习：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本格式化标签</title>
</head>
<body>
    <strong>姓名</strong>需要进行加粗
    <b>姓名</b>需要进行加粗
    <br /><em>这里</em>需要倾斜
    <i>这里</i>需要倾斜
    <br /><del>错误</del>需要删除
    <s>错误</s>需要删除
    <br /><ins>重点</ins>需要下划线
    <u>重点</u>需要下划线
</body>
</html>

4.5 <div>和<span>标签

<div>和<span>是没有语义的，他们就是一个盒子，用来装内容的。

<div>这是头部</div>
<span>今日价格</span>

特点：

1.<div>标签用来布局，但是现在一行只能放一个<div>。大盒子

2.<span>标签用来布局，一行上可以多个<span>。小盒子

4.6 图像标签和路径（重点）

1.图像标签

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

<img src="图像URL" />

src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>测试显示如下logo:</h2>
    <img src="西安科技大学logo.png" />
</body>
</html>

图像标签的其他属性：

属性	属性值	说明
scr	图片路径	必须属性
alt	文本	替换文本。图片不能显示的文字
title	文本	提示文本。鼠标放到图像上，显示的文字
width	像素	设置图像的宽度
height	像素	设置图像宽度
border	像素	设置图像的边框粗细

练习：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>测试显示如下logo:</h4>
    <img src="西安科技大学logo.png" />
    
    <h4>替换文本 测试显示如下logo:</h4>
    <img src="西安科技大学logo1.png" alt="西安科技大学logo" />

    <h4>提示文本 测试显示如下logo:</h4>
    <img src="西安科技大学logo.png" alt="西安科技大学logo" title="西安科技大学logo" />

    <h4>width height 测试显示如下logo:</h4>
    <img src="西安科技大学logo.png" alt="西安科技大学logo" title="西安科技大学logo" width="50" height="20" />
      <br />宽度和高度改一个即可，自动等比例缩放
      <h4>提示文本 测试显示如下logo:</h4>
      <img src="西安科技大学logo.png" alt="西安科技大学logo" title="西安科技大学logo" border="15" />
</body>
</html>

图像标签使用的注意点：

1.图像标签可以拥有多个属性，但必须在标签名的后面。

2.属性间不分前后顺序，标签名各个属性间均有空格隔开。

3.属性="属性值"(键值对格式）