• HTML基础:文本列表实例2(9)


    下面的例子是一个会议通知。

    为了实现这个格式,最主要是:

    (1)pre标签,保留原始文本的格式,需要不断调整文本输入。但是pre标签中包含的其他标签,也会影响输出效果。

    代码中去掉了li的结束标签,可能是由于在pre标签中,会导致行间距太大。

    在参会嘉宾中,第2行加上了br 换行标签,是由于如果不加标签,受pre影响,导致数据缩进太大,用br就是为了让文本上下之间对齐。

    (2)ul标签,无序列表实现会议的相关信息。ol标签列出了注意事项。

    代码如下:

    <!doctype html>
    <html>
     <head>
    	<meta http-equiv="content-type" content="utf8">
    	<title>Document</title>
     </head>
    
     <body>
    	<h1 align="center">中国互联网大会</h1>
        <p>各位从事互联网事业的小伙伴们:</p>
    	<p>定于2026年12月10日召开中国互联网大会。现将有关事宜通知如下:</p>
    
    	<pre>
    	  <ul><li>会议议题:<u>新形势下的互联网发展</u>
    		  <li>参会嘉宾:<u>国务院发展与改革委员会新经济研究所所长(张三)</u>
    		  <br>          <u>中国科学院互联网发展研究中心研究员(李四)</u>
    		  <br>          <u>北京大学人工智能研究所教授(王五)</u>
    		  <br>          <u>阿里巴巴网络技术有限公司网络技术中心总经理(陈六)</u>
    		  <li>会议时间:<u>从10日到12日结束</u>
    		  <li>会议地点:<u>广东省广州市阳泉酒家</u>
    		  <li>注意事项:
    		    <ol><li><u>门票价格,每张1000元</u>
    		        <li><u>交通工具自备</u>
    		        <li><u>住宿自理</u>
    		        <li><u>中午提供免费午餐</u>
    		    </ol>
    		  </li>
    		</ul>
    	</pre>
    
     </body>
    </html>


  • 相关阅读:
    ssh
    datetime
    网络-sdn(2)
    django-drf
    Vscode前段常用插件
    Vscode离线安装插件
    CSS 实现绘制各种三角形
    flex布局
    js实现全选和取消全选
    购物车用Ajax向后台传参
  • 原文地址:https://www.cnblogs.com/momogua/p/8304368.html
Copyright © 2020-2023  润新知