列表、图片、超链接标签

九阈

已于 2022-03-26 23:12:03 修改

阅读量287

点赞数

分类专栏： # html 文章标签： html5

于 2022-03-23 20:53:51 首次发布

本文链接：https://blog.csdn.net/weixin_46048542/article/details/123673567

版权

html 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

请添加图片描述
有序列表

<ol type="a" start="2">
    <li>青春1</li>
    <li>青春2</li>
</ol>

请添加图片描述
无序列表
（1） u1里面只能放1i, li里面可以放其他标签
（2）默认的是黑色的实心圆
（3）type,可以取 disc circle square none(用的多)

摁enter键

第二种

摁enter键

    <!-- 无序列表 -->
    <ul type="circle">
        <li>第一</li>
        <li>第二</li>
    </ul>
    <ul>
        <li><a href="#"><strong>脱贫</strong></a></li>
        
        <li><a href="#">晏青篁</a></li>
    </ul>

请添加图片描述
自定义列表
快速键方法
（1）

（2）

（3）

    <!-- 定义列表 -->
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>css</dt>
        <dd>层叠样式表</dd>
        <dt>JavaScript</dt>
        <dd>网页脚本语言</dd>
    </dl>

请添加图片描述
上面代码综合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<ul<>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 无序列表 -->
    <ul type="circle">
        <li>第一</li>
        <li>第二</li>
    </ul>
    <ul>
        <li><a href="#"><strong>脱贫</strong></a></li>
        
        <li><a href="#">晏青篁</a></li>
    </ul>
    <!--   有序列表 用到的比较少-->
<ol type="a" start="2">
    <li>青春1</li>
    <li>青春2</li>
</ol>
    <!-- 定义列表 -->
    <dl>
        <dt>HTML</dt>
        <dd>超文本标记语言</dd>
        <dt>css</dt>
        <dd>层叠样式表</dd>
        <dt>JavaScript</dt>
        <dd>网页脚本语言</dd>
    </dl>
   <!--  嵌套列表 -->
   <ul>
       <li>
           辽宁省
       </li>
       <ul>
           <li>沈阳</li>
           <li>大连</li>
       </ul>
   </ul>
  <!--  表格标签 -->
  <table>
      <caption>天气预报</caption>
      <tr>
          <th>日期</th>
          <th>天气情况</th>
          <th>出行情况</th>
      </tr>
      <tr>
          <td>2021.2.22</td>
          <td>meiyou</td>
          <td>多云</td>
      </tr>
  </table>
</body>
</html>

请添加图片描述
CSS列表属性

图片标签的路径
https://www.runoob.com/tags/tag-img.html

<!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>
    <h1>李沁 </h1>
    <p>1990年9月27日出生于江苏省苏州市昆山市巴城镇,中国大陆女演员，毕业于上海戏剧学院附属戏曲学校。</p>
    <h2>早年经历</h2>
    <p>2001年,11岁的她加入江苏省昆山市巴城镇石牌中心小学开办的戏曲兴趣班接收戏曲基本功培训。[1]

        2002年,正值李沁12岁,为了能够继续留在学校学习戏曲，她向妈妈保证不会耽误自己的学业。[2]
        
        2003年,参加“苏外之夜”戏曲专场晚会的演出，在锡剧《沙家浜》中李沁饰演阿庆嫂、越剧《梁祝·十八相送》李沁饰演祝英台、昆剧《牡丹亭·游园》李沁饰演杜丽娘。并凭借昆曲《牡丹亭·游园》，获得第七届中国少儿戏曲小梅花荟萃活动金花奖。[3]
        
        2004年李沁考入了上海戏校,学习昆曲</p>
        <h2>演艺经历</h2>
        <p>2019年2月,参加中央电视台元宵晚会,与罗云熙、张彬彬、魏允熙合作表演歌曲《团圆年》,3月,主演古装权谋剧《南歌》;9月12日,主演根据萧鼎同名小说改编并由程小东执导的青春仙侠电影《诛仙》上映,在片中李沁饰演刚柔并济的陆雪琪;9月30日,主演的剧情片《中国机长》在全国上映。[38]<strong>10月,主演的电影《温暖的抱抱》开机</strong>。[39]2019年10月29日,获第32届东京国际电影节中国电影周“金鹤奖”最佳女配角奖。[40]11月26日,由李沁出演的电视剧《庆余年》在腾讯视频和爱奇艺开播。</p>
        <img src="https://p1.ssl.qhimg.com/dr/220__/t0144558e98f68335f4.jpg" alt="李沁 " title="女神">

</body>
</html>

请添加图片描述
超链接标签
能够实现不同页面的跳转
<a href=“ 路径”title=’ 鼠标悬停上去之后的提示信息”target='规定在何处打开文档">内容
Target属性:规定在何处打开文档。
A. target=“ _self"默认值
B. target=“ _blank“新窗口打开

<!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>
    <base target="_blank">
</head>
<body>
    <a href="http://www.baidu.com" >访问百度</a><br>
    <a href="http://www.baidu.com"  target="_blank">访问百度</a><br>
    <a href="http://www.baidu.com" title="百度查询"><br>
        <img src="https://p1.ssl.qhimg.com/dr/220__/t0144558e98f68335f4.jpg" alt="李沁" width="100px">
    </a><br>
    <a href="#html">HTML</a>
    <a href="#css">css</a>
    <a href="#javascript">javascript</a>
</body>
</html>