• HTML学习笔记Day2-新闻文本案例


    一、div样式布局

    • 在标签中通过

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
        
      
      
      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
    • 代码

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>样式演示title>
        <style>
          div{
            /*显示边框*/
            border: 1px solid red;
    
            /*宽度 占屏幕的60%*/
            width:60%;
            height:500px;
            margin:auto;
          }
        style>
    head>
    <body>
      <div>第一个标签div>
    
    body>
    html>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    二、文本标签

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UbFJxLAM-1663062588650)(…/…/images/d07dff52061048f97eede5095d7f217e5da3a5298291694d908d490720fd6f46.png)]

    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本标签title>
    head>
    <body>
    
    
    <p>了解清楚字节为什么跳动到底存在于哪条赛道,是解决一切问题的痛点。带着这些问题,我们来聚焦一下——字节为什么跳动,互联网研发人员间流传着这样一句话,在细分领域找到抓手,形成方法论,才能对外输出,反哺生态。也许这句话就是最好的答案。p>
    <p>字节为什么跳动,到底到底该如何落地?我们认为,找到抓手,形成方法论,字节为什么跳动则会迎刃而解。互联网运营人员间流传着这样一句话,做精细化运营,向目标发力,才能获得影响力。这让我明白了问题的抓手,互联网从业者间流传着这样一句话,只有适度倾斜资源,才能赋能整体业务p>
    
    
    <h1>一级标题h1>
    <h2>二级标题h2>
    <h3>三级标题h3>
    
    
    <hr size = "4" color = "red"/>
    
    
    <ul type = "square">
      <li>javaEEli>
      <li>HTMLli>
    ul>
    
    <ol type = "I" start = 1>
      <li>计算机科学与技术li>
      <li>软件工程li>
    ol>
    
    
    <i>倾斜i>
    <em>倾斜em>
    
    
    <strong>加粗标签strong>
    <b>加粗文本b>
    <br/>
    
    
    <font size = "5" color = "yellow">这是一段文字font>
    
    body>
    html>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    三、案例实现-文本页面

    • 创建一个html文件
    • 使用四个div标签划分区域(标题、作者、副标题、正文)
    • 使用style标签设置div样式:宽度60% 外边距自动
    • 使用h1标签加入标题
    • 使用font标签加入作者信息,颜色设置为灰色,字体大小为2
    • 使用hr标签加入水平线
    • 使用h3标签加入副标题
    • 使用p标签加入正文段落
    • 使用ol标签,加入有序列表
    • 使用b标签,加入部分文字加粗
    DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>文本案例title>
        <style>
          div{
              width:60%;
              margin:auto;
          }
        style>
    
    head>
    <body>
    
    <div>
      <h1>荷塘月色h1>
    div>
    
    
    <div>
        
      <i><font size = "2" color = "gray">作者:朱自清 2088-08-08font>i>
    
        
        <hr/>
    div>
    
    
    <div>
    <h3>经典散文-荷塘月色h3>
    div>
    
    
    <div>
        <p>这几天心里颇不宁静。今晚在院子里坐着乘凉,忽然想起日日走过的荷塘,在这满月的光里,总该另有一番样子吧。月亮渐渐地升高了,墙外马路上孩子们的欢笑,已经听不见了;妻在屋里拍着闰儿⑴,迷迷糊糊地哼着眠歌。我悄悄地披了大衫,带上门出去。p>
        <p>沿着荷塘,是一条曲折的小煤屑路。这是一条幽僻的路;白天也少人走,夜晚更加寂寞。荷塘四面,长着许多树,蓊蓊郁郁⑵的。路的一旁,是些杨柳,和一些不知道名字的树。没有月光的晚上,这路上阴森森的,有些怕人。今晚却很好,虽然月光也还是淡淡的p>
            
            <ol>
                <li>
                    <b>采莲南塘秋b>
                li>
                <li><b>莲花过人头b>li>
                <li><b>低头弄莲子b>li>
                <li><b>莲子清如水b>li>
    
            ol>
    
        <p>路上只我一个人,背着手踱⑶着。这一片天地好像是我的;我也像超出了平常的自己,到了另一个世界里。我爱热闹,也爱冷静;爱群居,也爱独处。像今晚上,一个人在这苍茫的月下,什么都可以想,什么都可以不想,便觉是个自由的人。白天里一定要做的事,一定要说的话,现在都可不理。这是独处的妙处,我且受用这无边的荷香月色好了。p>
    
    
    div>
    
    body>
    html>
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
  • 相关阅读:
    Mybatis缓存及高级映射
    论文学习:Graph Data Augmentation for Graph Machine Learning: A Survey
    备战数学建模34-BP神经网络预测2
    MobLink Android端快速集成文档
    hadoop3.3.2版本分布式集群搭建1主1从(含虚拟机安装教程)
    数字电路中的基础电路结构
    学习笔记12--路径-速度分解法之局部路径搜索
    GPT出现Too many requests in 1 hour. Try again later.
    Flutter系列文章-Flutter进阶
    聊聊单点登录(SSO)中的CAS认证
  • 原文地址:https://blog.csdn.net/qq_44653420/article/details/126838403