前端學習筆記-html-列表標簽

列表標簽

容器里面裝載著文字或圖表的一種形式，叫列表。

列表最大的特點就是整齊、整潔、有序

無序列表 ul （重點）

無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下：

<ul>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ul>

注意：

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標簽中輸入其他標簽或者文字的做法是不被允許的。
 2. <li>與</li>之間相當于一個容器，可以容納所有元素。
 3. 無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

練習：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>四大名著</title>
	<base target="_blank">
</head>
<body>
	<h2>中國四大名著</h2>
	<ul>
		<li>
			<h4><img src="四大名著/shz.jpg" width="100" /><a href="https://baike.baidu.com/item/%E6%B0%B4%E6%B5%92%E4%BC%A0/348">《水滸傳》</a></h4>
			<p>
			《水滸傳》，中國四大名著之一，是一部以北宋末年宋江起義為主要故事背景、類型上屬于英雄傳奇的章回體長篇小說。作者或編者一般被認為是施耐庵，現存刊本署名大多有施耐庵、羅貫中兩人中的一人，或兩人皆有。
			全書通過描寫梁山好漢反抗欺壓、水泊梁山壯大和受宋朝招安，以及受招安后為宋朝征戰，最終消亡的宏大故事，藝術地反映了中國歷史上宋江起義從發生、發展直至失敗的全過程，深刻揭示了起義的社會根源，滿腔熱情地歌頌了起義英雄的反抗斗爭和他們的社會理想，也具體揭示了起義失敗的內在歷史原因。
			<br />
			《水滸傳》問世后，在社會上產生了巨大的影響，成了后世中國小說創作的典范。《水滸傳》是中國歷史上最早用白話文寫成的章回小說之一，流傳極廣，膾炙人口；同時也是漢語文學中具備史詩特征的作品之一，對中國乃至東亞的敘事文學都有極其深遠的影響。 </p>
		</li>
		<li>
			<h4><img src="四大名著/sgyy.jpg" width="100" /><a href="https://baike.baidu.com/item/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89/5782">《三國演義》</a></h4>
			<p>
			《三國演義》全名為《三國志通俗演義》（又稱《三國志演義》），是中國古典四大名著之一，也是中國第一部長篇章回體歷史演義小說，作者是元末明初的小說家羅貫中。《三國志通俗演義》成書后有嘉靖壬午本等多個版本傳于世，到了明末清初，毛宗崗對《三國演義》整頓回目、修正文辭、改換詩文。
			<br />
			《三國演義》描寫了從東漢末年到西晉初年之間近百年的歷史風云，以描寫戰爭為主，訴說了東漢末年的群雄割據混戰和魏、蜀、吳三國之間的政治和軍事斗爭，最終司馬炎一統三國，建立晉朝的故事。反映了三國時代各類社會斗爭與矛盾的轉化，并概括了這一時代的歷史巨變，塑造了一群叱咤風云的三國英雄人物。
			<br />
			全書可大致分為黃巾起義、董卓之亂、群雄逐鹿、三國鼎立、三國歸晉五大部分。在廣闊的歷史舞臺上，上演了一幕幕氣勢磅礴的戰爭場面。作者羅貫中將兵法三十六計融于字里行間，既有情節，也有兵法韜略。
			<br />
			《三國演義》是中國文學史上第一部章回小說，是歷史演義小說的開山之作，也是第一部文人長篇小說。</p>
		</li>
		<li>
			<h4><img src="四大名著/xyj.jpg" width="100" /><a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/6786341">《西游記》</a></h4>
			<p>
			《西游記》又稱央視86版《西游記》，改編自明代小說家吳承恩同名文學古典名著。是由中央電視臺、中國電視劇制作中心出品的一部25集古裝神話劇。由楊潔執導，戴英祿，楊潔，鄒憶青共同編劇，六小齡童、徐少華、遲重瑞、汪粵、馬德華、閆懷禮等主演，李世宏、李揚、張云明、里坡等擔任主要配音。 
			<br />
			該劇講述的是孫悟空、豬八戒、沙僧輔保大唐高僧玄奘去西天取經，師徒四人一路搶灘涉險，降妖伏怪，歷經八十一難，取回真經，終修正果的故事。</p>
		</li>
		<li>
			<h4><img src="四大名著/hlm.jpg" width="100" /><a href="https://baike.baidu.com/item/%E7%BA%A2%E6%A5%BC%E6%A2%A6/15311">《紅樓夢》</a></h4>
			<p>
			《紅樓夢》，中國古代章回體長篇小說，又名《石頭記》等，被列為中國古典四大名著之首，一般認為是清代作家曹雪芹所著。小說以賈、史、王、薛四大家族的興衰為背景，以富貴公子賈寶玉為視角，描繪了一批舉止見識出于須眉之上的閨閣佳人的人生百態，展現了真正的人性美和悲劇美，可以說是一部從各個角度展現女性美以及中國古代社會世態百相的史詩性著作。
			<br />
			《紅樓夢》版本可分為120回“程本”和80回“脂本”兩大系統。程本為程偉元排印的印刷本，脂本為脂硯齋在不同時期抄評的早期手抄本。脂本是程本的底本。
			<br />
			《紅樓夢》是一部具有世界影響力的人情小說，舉世公認的中國古典小說巔峰之作，中國封建社會的百科全書，傳統文化的集大成者。小說以“大旨談情，實錄其事”自勉，只按自己的事體情理，按跡循蹤，擺脫舊套，新鮮別致，取得了非凡的藝術成就。“真事隱去，假語村言”的特殊筆法更是令后世讀者腦洞大開，揣測之說久而遂多。二十世紀以來，學術界因《紅樓夢》異常出色的藝術成就和豐富深刻的思想底蘊而產生了以《紅樓夢》為研究對象的專門學問——紅學。</p>
		</li>
	</ul>
</body>
</html>

效果：

有序列表 ol （了解）

有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：

<ol>
  <li>列表項1</li>
  <li>列表項2</li>
  <li>列表項3</li>
  ......
</ol>

所有特性基本與ul 一致。

練習：

 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>有序列表</title>
 </head>
 <body>
 	<h3>有序列表</h3>
 	<hr />
 	<p>有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義</p>
 	<ol>
 		<li>淘寶</li>
 		<li>京東</li>
 		<li>百度</li>
 		<li>網易</li>
 		<li>哈哈</li>
 	</ol>
 </body>
 </html>

效果：

自定義列表（理解）

定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：

<dl>
  <dt>名詞1</dt>
  <dd>名詞1解釋1</dd>
  <dd>名詞1解釋2</dd>
  ...
  <dt>名詞2</dt>
  <dd>名詞2解釋1</dd>
  <dd>名詞2解釋2</dd>
  ...
</dl>

練習：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定義列表</title>
</head>
<body>
	<h3>自定義列表</h3>
	<hr />
	<p>自定義列表常用對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號，多用于網站結尾</p>
	<dl>
		<dt>湖南</dt>
		<dd>長沙</dd>
		<dd>郴州</dd>
		<dd>株洲</dd>
		<dd>岳陽</dd>
	</dl>
	<dl>
		<dt>廣東</dt>
		<dd>深圳</dd>
		<dd>廣州</dd>
		<dd>潮汕</dd>
		<dd>惠州</dd>
	</dl>
</body>
</html>

效果：

本文鏈接：https://blog.csdn.net/qq_36434637/article/details/97004545

智能推薦

互斥鎖互斥鎖也是屬于線程之間處理同步互斥方式，有上鎖/解鎖兩種狀態。互斥鎖函數接口 1）初始化互斥鎖 pthread_mutex_init() man 3 pthread_mutex_init (找不到的情況下首先 sudo apt-get install glibc-doc sudo apt-get install manpages-posix-dev) 動態初始化 int pthread_...

統計學習方法 - 樸素貝葉斯

引入問題：一機器在良好狀態生產合格產品幾率是 90%，在故障狀態生產合格產品幾率是 30%，機器良好的概率是 75%。若一日第一件產品是合格品，那么此日機器良好的概率是多少。貝葉斯模型生成模型與判別模型判別模型，即要判斷這個東西到底是哪一類，也就是要求y，那就用給定的x去預測。生成模型，是要生成一個模型，那就是誰根據什么生成了模型，誰就是類別y，根據的內容就是x 以上述例子，判斷一個生產出...

styled-components —— React 中的 CSS 最佳實踐

https://zhuanlan.zhihu.com/p/29344146 Styled-components 是目前 React 樣式方案中最受關注的一種，它既具備了 css-in-js 的模塊化與參數化優點，又完全使用CSS的書寫習慣，不會引起額外的學習成本。本文是 styled-components 作者之一 Max Stoiber 所寫，首先總結了前端組件化樣式中的最佳實踐原則，然后在此基...

基于TCP/IP的網絡聊天室用Java來實現

基于TCP/IP的網絡聊天室實現開發工具:eclipse 開發環境:jdk1.8 發送端接收端工具類運行截圖...