HTML5 第五章 - 技术栈

标签及属性学习

学习视频：B站小甲鱼《零基础入门学习web开发》

16. 列表元素

1.无序列表ul元素

①定义：<ul> 标签用于定义无序列表。列表内容用

标签包裹。列表元素左前方默认是黑色圆点。

2.有序列表ol元素

①定义：<ol> 标签用于定义有序列表。列表内容用<li>标签包裹。列表元素默认用阿拉伯数字排序。

②属性：

3.li元素

①定义：<li> 标签用于定义列表中的项目。

列表实例

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <title>HTML学习</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,intinal-scale=1.0">
    </head>
    <body>
       <h1>列表元素学习</h1>
       
       <p>无序列表</p>
       <ul>
         <li>香蕉</li>
         <li>苹果</li>
         <li>草莓</li>
         <li>西瓜</li>
       </ul>
      
       <p>有序列表</p>
       <ol>
         <li>亚洲</li>
         <li>欧洲</li>
         <li>非洲</li>
         <li>北美洲</li>
       </ol>
    </body>
</html>

列表实例效果图

4.list-style-type 属性

list-style-type 属性改变无序列表的标志，如方块、圆点、圆圈或者是隐藏。

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <title>HTML学习</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,intinal-scale=1.0">
		
		<style>
		   ul.a{list-style-type:square}
		   ul.b{list-style-type:disc}  
		   ul.c{list-style-type:circle}
		   ul.d{list-style-type:none}
		</style>
    </head>
    <body>
       <h1>列表css设置</h1>
       
       <p>无序列表</p>
       <ul class="a"> <!--方形-->
         <li>香蕉</li>
         <li>苹果</li>
       </ul>
	   
	   <ul class="b"> <!--圆点-->
         <li>草莓</li>
         <li>西瓜</li>
       </ul>
	   
	   <ul class="c">  <!--圆圈-->
         <li>葡萄</li>
         <li>菠萝</li>
       </ul>
	   
	   <ul class="d">  <!--隐藏-->
         <li>荔枝</li>
         <li>柚子</li>
		 <li>火龙果</li>
       </ul>
    </body>
</html>

效果图

list-style-type 属性可以设置有序列表的标志有：

5.list-style-image属性

list-style-image属性自定义列表的标志.

实例中应用的图片是16*16px的。

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <title>HTML学习</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,intinal-scale=1.0">
		
		<style>
		   ul{list-style-image:url(D:/Web_Study/image/orange.jpg)}
		</style>
    </head>
    <body>
	   
	   <ul> 
         <li>橙子</li>
         <li>橙子</li>
		 <li>橙子</li>
         <li>橙子</li>
       </ul>
	   
    </body>
</html>

效果图

6.列表嵌套

可ol中嵌套ul，也可以ul中嵌套ol

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <title>HTML学习</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,intinal-scale=1.0">	
    </head>
    <body>
	   <p>水果按季节分类</p>
	   <ol> 
         <li>春季水果
		     <ul>
			    <li>荔枝</li>
				<li>菠萝</li>
				<li>枇杷</li>
				<li>青枣</li>
				<li>草莓</li>
			    <li>橙子</li>
			 </ul>
		 </li>
		 
         <li>夏季水果
		     <ul>
			    <li>榴莲</li>
				<li>山竹</li>
				<li>西瓜</li>
				<li>香瓜 </li>
				<li>樱桃</li>
			    <li>百香果</li>
			 </ul>
		 </li>
		  
       </ol>
	   
    </body>
</html>

效果图

7.定义列表

<dl> 标签定义了一个包含术语定义以及描述的列表。
<dt> 标签用于定义列表中的项目（即术语部分）。
<dd> 标签用于定义列表中项目的描述部分。

html 复制代码

<!DOCTYPE html>
<html>
    <head>
        <title>HTML学习</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,intinal-scale=1.0">	
    </head>
    <body>
	   <p>定义列表</p>
	   <dl>
	     <dt>HTML</dt>
		 <dd>超文本标记语言，是一种用于创建网页的标准标记语言。</dd>
		 <dt>CSS</dt>
		 <dd>层叠样式，是一种用来表现HTML或者XML文件样式的语言。</dd>
		 <dt>JavaScript</dt>
		 <dd>简称js，是一种脚本编程语言。</dd>
	   </dl>
	   
	   
    </body>
</html>

效果图：

17表格

1.table元素

①定义：<table> 标签用于定义 HTML 表格。

②注意：简单的 HTML 表格由 table 元素以及一个或多个 <tr>、<th> 或 <td> 标签组成。

tr 元素定义表格中的行，th 元素定义表格中的表头，td 元素定义表格中的单元格。

更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。