前端学习-第一阶段-day01

最新推荐文章于 2023-05-03 15:59:42 发布

澜痕

最新推荐文章于 2023-05-03 15:59:42 发布

阅读量729

点赞数

分类专栏：前端学习日记

本文链接：https://blog.csdn.net/qq_34723035/article/details/109731773

版权

前端学习日记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

这篇博客介绍了HTML中基本的文本标记，包括标题、段落、图片、文字修饰和布局标签的使用，并展示了在实际项目中如何解决文字颜色与下划线颜色相同以及元素间间距问题的例子。内容涵盖了从基础的文本样式到布局的实践应用。

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

前端学习-第一阶段-day01

学习内容

一、文本相关的标记

1.例如标题h1到h6
<h1></h1>

2.段落
<p></p>

3.图片标记
<img src=" " alt=" " title=""  width="" height="">

绝对路径和相对路径

alt: 当图片加载失败的文本提示
title:鼠标悬停时的文本提示
width:宽度  等比例缩放  3:2  
height:高度

二、了解了一下修饰文字相关的标记

1.加粗

<b>adsaudf</b> bold 非语义标签
<strong>safsf</strong> 语义化标签  装重要的 强调的文字  希望被爬虫抓取

2.斜体

<i>斜体文字</i> italic 斜体
<em>斜体文字</em>  语义化标签

3.下划线

<u>aefresf</u>
<ins>ftrewtet</ins>语义化标签

4.中划线

<s>99.00</s>
<del>99.00</del>语义化标签

5.换行

<br> break

6.水平线

<hr color="red" align=""  width="300px">

align 水平对齐方式 left 左对齐  right  center居中

7.字符实体

&yen;  人民币符号
&copy;版权符 
&gt; 大于号
&lt;小于号

8.布局标签

<div></div> 可以装div,img  p hi....
<span></span> 可以装几个字 小图标 非常小的图片

练习项目过程中出现的问题及解决办法

练习项目
在这里插入图片描述
遇到的问题：
1.“晓”字的颜色与其下划线的颜色总是相同的。
2.“晓”字放到的盒子里时,总是与其左侧的盒子有一个空格的距离。
解决的方法：

1.利用制作下边框并设置下边框的颜色，来使要显示的字与下划线颜色不同
<span style="border-bottom:1px solid blue">晓</span>
2.把两组<span></span>盒子写到同一行代码中，否则两个盒子中会有大约一个空格的间距。

全部代码

<!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>
<!-- 第一区域 -->

    <span style = "font-size: 20px;color:rgba(0, 0, 0, 0.5)"> 【作者】</span>
    <span style = "font-size: 20px;color:blue" > 孟浩然</span>
    <span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>
    <span style = "font-size: 20px;color:rgba(0, 0, 0, 0.5)"> 【朝代】</span>
    <span style = "font-size: 20px;" > 唐</span>
    <hr coler=rgba(100,100,100,0.5 >
 

 <!-- 第二区域 -->
 
     <span style = "font-size: 20px">春眠不觉</span><span style="font-size: 20px;border-bottom:1px solid blue">晓</span>
    
     <span style = "font-size: 20px">&nbsp,&nbsp处处</span><span style="font-size: 20px;border-bottom:1px solid blue">闻啼鸟</span><span style = "font-size: 20px">。</span>

     <p style = "font-size: 20px">夜来风雨声，<span style = "font-size: 20px">花落</span><span style="font-size: 20px;border-bottom:1px solid blue">知多少</span><span style = "font-size: 20px">。</span></p>
        <br>
 

 <!-- 第三区域 -->
 
    <span style = "font-size: 18px;color:rgba(0, 0, 0, 0.5)"> 标签:&nbsp&nbsp</span>
    <span style = "font-size: 18px;color:blue;background-color: rgba(135, 206, 250, 0.384)" > 小学古诗</span>&nbsp&nbsp&nbsp
    <span style = "font-size: 18px;color:blue;background-color: rgba(135, 206, 250, 0.384)" > 情感</span>&nbsp&nbsp&nbsp
    <span style = "font-size: 18px;color:blue;background-color: rgba(135, 206, 250, 0.384)" > 写景</span>&nbsp&nbsp&nbsp
    <span style = "font-size: 18px;color:blue;background-color: rgba(135, 206, 250, 0.384)" > 唐诗三百首</span>&nbsp&nbsp&nbsp
    <span style = "font-size: 18px;color:blue;background-color: rgba(135, 206, 250, 0.384)" > 惜春</span>&nbsp&nbsp&nbsp
    <span style = "font-size: 18px;color:blue;background-color: rgba(135, 206, 250, 0.384)" > 景色</span>&nbsp&nbsp&nbsp
    <br>
    
 
<!-- 第四区域 -->

    <br>
    </span><span style="font-size: 20px;border-bottom:2px solid blue;padding-bottom: 5px;">&nbsp&nbsp译文&nbsp </span><span style = "font-size: 20px">
    </span>
    &nbsp
    <span style="font-size: 20px;border-bottom:2px solid rgba(0, 0, 0, 0.5);padding-bottom: 5px;">&nbsp&nbsp注释&nbsp&nbsp </span><span style = "font-size: 20px">
    <br>
        

<!-- 第五区域 -->
       <p style = "font-size: 20px">春日里贪睡不知不觉天已破晓，搅乱我酣眠的是那啁啾的小鸟。昨天夜里风声雨声一直不断，那娇美的春花不知被吹落了多少？</p>
       
    


<!-- 第六区域 -->
    </span><span style="font-size: 20px;border-bottom:2px solid blue;padding-bottom: 5px;">&nbsp&nbsp赏析&nbsp&nbsp </span><span style = "font-size: 20px">
    </span>
    <br>
 

<!-- 第七区域 -->
        <p style = "font-size: 20px">《春晓》这首小诗，初读似觉平淡无奇，反复读之，便觉诗中别有天地。它的艺术魅力不在于华丽的辞藻，不在于奇绝的艺术手法，而在于它的韵味。整首诗的风格就像行云流水一样平易自然，然而悠远深厚，独臻妙境。千百年来，人们传诵它，探讨它，仿佛在这短短的四行诗里，蕴涵着开掘不完的艺术宝藏。<br>
        自然而无韵致，则流于浅薄；若无起伏，便失之平直。《春晓》既有悠美的韵致，行文又起伏跌宕，所以诗味醇永。诗人要表现他喜爱春天的感情，却又不说尽，不说透，“迎风户半开”，让读者去捉摸、去猜想，处处表现得隐秀曲折。“情在词外曰隐，状溢目前曰秀。”（...<a href="#">古诗文网>></a></p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
</body>
</html>