Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
序列表
經過之前關于表格、表單的學習后,再來學習列表,就顯得非常的簡單和容易理解了。
學習是構建知識體系的過程,沒有形成體系的知識學習再多也是碎片,是很難形成技能或深刻理解的,因此,如果您是零基礎的初學者,第一次看我的教程,如果時間允許的話,請務必從目錄中找尋第一篇,循序漸進的學習。
列表分為有序列表、無序列表和定義列表,同時列表之中還能嵌套列表,和表格非常相似。
首先介紹有序列表
要用<ol></ol>標簽告訴瀏覽器這里是列表。
然后在里面添加<li></li>標簽,在這個標簽中添加內容即可。
示例代碼如下
<p>我喜歡的水果</p>
<ol>
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>
大家可以把它放到一個新的html框架中看看效果。
完整代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>列表</title>
</head>
<body>
<h>有序列表</h>
<p>我喜歡的水果</p>
<ol>
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>
</body>
</html>
頁面效果如下:
通過修改<ol>標簽中的type屬性我們可以改變序號顯示的樣式,默認的是數字,大家看一下不同的type值的不同效果吧!示例代碼如下:
<ol type="A">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>
<ol type="a">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
、</ol><ol type="I"> <li>葡萄</li> <li>西瓜</li> <li>蘋果</li> <li>桃子</li></ol>
頁面效果如下:
下面給大家介紹一下搜狗輸入法中如何輸入羅馬數字。
step1.點擊"輸入方式"
step2.點擊"特殊符號"后選擇數字序號,找到羅馬數字即可
除此之外我們還可以使用CSS的方法為有序列表的序號提供更多樣式。在<ol>標簽中修改style屬性可以直接調用這些css中的屬性。寫法是style="list-style-type:屬性值;"
示例代碼如下:(使用日語中的片假名表示序號)
<ol style="list-style-type:hiragana;">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ol>
頁面效果如圖所示:
是不是很有趣,這里的測試就不一一做了。為大家奉上list-style-type的值的列表與說明,大家自己課下去嘗試,這個列表中既有有序列表的值也有無序列表的值。
如圖:
資料來自w3school
無序列表
無序列表與有序列表的區別在于最外層的標簽,它的寫法是這樣的:<ul></ul>。
有一個記憶的小技巧,有序的英文是order,故有序列表為order list(列表),縮寫為ol。
無序為unorder,無序列表為unorder list,縮寫為ul。
無序列表<ul>標簽的type屬性用來控制列表前的標記顯示演示。
示例代碼如下:
<h>無序列表</h>
<p>我喜歡的水果</p>
<ul>
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ul>
<ul type="disc">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ul>
<ul type="circle">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ul>
<ul type="square">
<li>葡萄</li>
<li>西瓜</li>
<li>蘋果</li>
<li>桃子</li>
</ul>
頁面效果如下:
通過圖片我們可知,無序列表默認的列表標識就是type="disc"。
style屬性的話大家自己試試吧,這里就不啰嗦了。
定義列表
這個列表比較特殊,也比較不常見,主要就是顯示名詞定義的。
首先要寫入<dl></dl>標簽。這是告訴瀏覽器這里是個定義列表,和<ol>或<ul>一樣。
定義的英文是definition,定義列表就是definition list,縮寫是dl。
下面在<dl></dl>標簽中間寫入定義的名稱<dt></dt>,即definition title(標題)。
與定義名稱標簽并列的是定義描述<dd></dd>,即definition describe(描述)。
示例代碼如下:
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
頁面效果如下:
今天的內容結束了!
列表嵌套列表的測試大家自己試試吧,學到現在,相信你們都可以完成了!
如果您喜歡我的教程請關注我,點贊也能讓我充滿動力!
如果您有任何疑問請給我留言,如有問題或錯誤請予以斧正!
HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作
HTML是什么?——零基礎自學網頁制作
第一個HTML頁面如何寫?——零基礎自學網頁制作
HTML頁面中head標簽有啥用?——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作
使用HTML添加表格1(基本元素)——零基礎自學網頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作
使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作
HTML表單4(form的action、method屬性)——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
<!DOCTYPE HTML>
<html>
<head>
<title>文內鏈接</title>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head>
<body >
<div style="width:50%;margin:auto;"><!--使頁面居中顯示,并展視窗50%寬度-->
<div style="position:fixed; top:0px;"><!--使導航菜單懸停在頂端-->
<a style="margin: 0px 30px 0px 10px;" href="#chapter1">試飛進程</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter2">研制情況</a>
<a style="margin: 0px 30px 0px 0px;" href="#chapter3">服役動態</a>
<a style="margin: 0px 30px 0px 0px;"href="#chapter4">總體評價</a>
</div><!--使導航菜單懸停在頂端(結尾)-->
<div style="margin:30px 0px 0px 0px;width:600px;overflow:hidden;"><!--小div套大div隱藏滾動條-->
<div style="margin:0px 0px 0px 8px;width:610px; height:530px; overflow-y:scroll;overflow-x:hidden;" >
<p><!--小div-->
<h2><a id="chapter1" >試飛進程</a></h2>
殲-20隱形戰斗機首架技術驗證機于2011年1月11日中午12時50分左右進行首次升空飛行測試,13時08分成功著陸,歷時18分鐘。<br>
整個首飛過程在殲-10S戰斗教練機陪伴下完成 。
2016年10月28日,首次發布“空軍試飛員將駕殲-20飛機亮相中國航展”后,還陸續發布了“殲-20戰機列裝空軍作戰部隊”“空軍殲-20戰機首次開展海上方向實戰化訓練”等。
<h2><a id="chapter2">研制情況</a></h2>
在2016年11月1日,第十一屆珠海航展,殲-20首次進行空中飛行展示。兩架殲-20做了公開飛行,不僅在現場引起轟動,也立刻被西方媒體大量報道。殲-20是中國現代空中力量的代表作,也進入了世界最先進的第五代戰斗機行列,它是中國國防能力高速發展的一個象征。<br>
2018年11月11日,第十二屆中國航展在珠海迎來“高光時刻”:殲-20戰機在公開飛行展示中掛彈開倉,震撼獻禮人民空軍成立69周年紀念日。 <br>
2019年10月13日,慶祝人民空軍成立70周年航空開放活動新聞發布上,空軍新聞發言人申進科大校介紹殲-20戰機列陣人民空軍“王牌部隊”
<h2><a id="chapter3" >服役動態</a></h2>
2017年3月9日,中央電視臺報道殲-20戰斗機正式進入空軍序列。<br>
2017年3月13日,《中國日報》發布消息稱,中國自主研制的殲-20近期將裝配國產發動機。<br>
2017年7月30日,殲-20三機編隊參加在朱日和舉行的慶祝中國人民解放軍成立90周年閱兵。殲擊機梯隊飛來,3架殲-20隱形戰斗機以楔形編隊的形式在天空中飛過。<br>
2017年9月28日,在中國國防部行記者會上,國防部新聞發言人吳謙大校介紹殲-20飛機已經列裝部隊。<br>
2017年11月10日上午,中國空軍發言人申進科大校表示,殲-20 列裝部隊后,已經開展編隊訓練。<br>
2018年2月9日,中國空軍新聞發言人申進科大校發布消息,殲-20開始列裝空軍作戰部隊。<br>
2018年10月30日,中國空軍4架殲-20隱形戰斗機現身珠海金灣機場上空。<br>
2019年10月1日,殲-20現身慶祝中華人民共和國成立70周年閱兵式;閱兵中,殲-20與殲-16、殲-10C三型飛機分別以5機楔隊組成戰斗隊形接受檢閱;該三款殲擊機被譽為中國空軍殲擊機家族的“三劍客”,是未來聯合作戰的骨干力量
<h2><a id="chapter4" >總體評價</a></h2>
殲-20是眼下亞洲區域最先進的戰機,這讓中國空軍在面對日本、韓國與印度等國家的空軍時占有顯著優勢。外媒將殲-20與其他國家戰機進行了對比。俄羅斯蘇霍伊蘇-57戰斗機由于研制進度幾度推遲,尚未正式交付入役;美國F-35戰斗機也多次出現飛機供氧不足的問題,大面積停飛,出口受阻;韓國KF-X隱形戰機先是被爆出因掌握不了關鍵技術而被迫降成四代半戰機的情況,后又傳出了合作方印尼打算撤資并已告知韓國的消息。因此,中國殲-20戰機成為亞太區域領跑的優勢戰機。<br>
中國空軍正向全疆域作戰的現代化戰略性軍種邁進,成為有效塑造態勢、管控危機、遏制戰爭、打贏戰爭的重要力量。殲-20戰機列裝空軍作戰部隊,將進一步提升空軍綜合作戰能力,有助于空軍更好的肩負起維護國家主權、安全和領土完整的神圣使命。<br>
殲20是我國自主研制的第五代戰斗機,它的研制實現了既定的四大目標——打造跨代新機、引領技術發展、創新研發體系、建設卓越團隊。打造跨代新機,是按照性能、技術和進度要求,研制開發我國自己的新一代隱身戰斗機。引領技術發展,指通過自主創新實現強軍興軍的目標。殲20在態勢感知、信息對抗、協同作戰等多方面取得了突破,這是中國航空工業從跟跑到并跑,再到領跑的必由之路。創新研發體系,是指建設最先進的飛機研制條件和研制流程。通過一大批大國重器的研制,我們建立了具有我國特色的數字化研發體系。建設卓越團隊,是指通過型號研制,錘煉一支愛黨愛國的研制隊伍,這些擁有報國情懷、創新精神的優秀青年是航空事業未來發展的生力軍。未來,我們將在戰斗機的機械化、信息化、智能化發展征程上不斷前行。
</p>
<img border="0" src="img/image1.jpg" usemap="#map" / >
<map name="map" id="map">
<area shape="poly" coords="142,62,186,175,246,236,243,298,263,323,396,338,478,313,516,246,496,224,320,158,348,142,336,129,232,108" href="https://www.zhihu.com/question/284642168" / title="殲20氣動外形分析"><!--必須保證畫面尺寸與頁面顯示尺寸一致!-->
</map>
</div><!--小div(結尾)-->
</div><!--小div套大div隱藏滾動條(結尾)-->
</div><!--使頁面居中顯示,并展視窗50%寬度(結尾)-->
</body>
</html>
1.頁面內容居中顯示方法
2.導航欄懸停頂端方法
3.鼠標滑過導航標題或鏈接時改變背景色提示
3.隱藏滾動條方法
4.圖片區域鏈接
大家結合代碼和技術解析,先自行分析一下每段代碼的作用,以及它們之間的前后關系。這一步練習對培養代碼閱讀能力很有好處,希望大家可以先自行閱讀分析。
下一次,我會逐步演示“頁面制作技術解析”中的五個步驟以及一些注意事項。
使用碎片時間,學習完整知識!關注大魚師兄,一起精研技藝。
HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作
HTML是什么?——零基礎自學網頁制作
第一個HTML頁面如何寫?——零基礎自學網頁制作
HTML頁面中head標簽有啥用?——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作
使用HTML添加表格1(基本元素)——零基礎自學網頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作
使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作
HTML表單4(form的action、method屬性)——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
HTML中的圖片區域鏈接方法詳解——零基礎自學網頁制作
HTML圖片區域鏈接注意事項與Gimp基本用法——零基礎自學網頁制作
用HTML制作一個簡單頁面(詳解)——零基礎自學網頁制作(完結篇)
HTML(HyperTextMark-upLanguage)即超文本標記語言或超文本鏈接標示語言,是WWW的描述語言。
HTML文檔的結構
2.頁面背景色或背景圖像
Hello World!
</body>
(網頁背景圖像)
Hello World!
</body>
(網頁背景色彩)
3.文本相關標簽
標題標簽<h1>-<h6>,<font>標簽。
段落標簽<p>,換行標簽<br>。
<h#> ... </h#>,#=1, 2, 3, 4, 5, 6 (說明:<h1>到<h6>字體大小依次遞減)
<sub>下標文字,<sup>上標文字,<del>刪除線。
段落標簽<p>,換行標簽<br>。
<HR> 標簽用于在頁面上繪制水平線。
圖像的基本語法:<img src=“images/adv_2.jpg” width=“300” height=“150” alt=“在線報名” >
要鏈接到同一目錄 (C:\HTML) 下的頁面,可編寫 <A HREF = “Doc1.htm”> 或 <A HREF = “C:\html\Doc2.htm”>
鏈接到本頁面:
<a href=“http://www.it.com”>
<img src=“images/adv_2.jpg” border=“0” width="300"height="150">
</a>
<marquee scrolldelay=“100” direction=“up”>
滾動文字或圖像
</marquee>
說明:scrolldelay:表示滾動延遲時間,默認值為90;direction:表示滾動的方向,默認為從右向左。
目標:掌握列表的用法
使用表格的基本結構實現簡單表格
使用表格相關標簽實現跨行、跨列的復雜表格
會使用表單的基本結構制作表單頁面
會使用各種表單元素實現注冊頁面
能理解post和get兩種提交方式的區別
格式: <ul type=“”>
type屬性設置標號的類型,值可以?。?/p>
1 disc :實心圓點
2 circle :空心圓點
3 square :實心方塊
無序列表
格式:<ol type=“” start=“”>
type設置標號的類型,值可以?。?/p>
1 1:顯示數字
2 A:顯示大寫字母
3 a:顯示小寫字母
4 I:顯示大寫羅馬數字
5 i:顯示小寫羅馬數字
有序列表
嵌套列表
門戶網站應用表格
<table>...</ table >定義表格
創建表格
表格表現
域名數量報表的創建
域名數量報表
1.跨多列的表格
2.跨多行的表格
3.如何創建跨行跨列的表格
品牌商城表的創建
width用來設置表格的寬度;height用來設置表格的高度;border用來設置表格邊框尺寸大??;bordercolor用來設置表格邊框顏色。
品牌商城表
背景:background屬性用來設置表格的背景圖片;bgcolor屬性用來設置表格、行、列的背景色。
對其方式:align屬性用來設置表格、行、列的對齊方式。
<input type=“text” value="張三" size="20">
文本框的建設
文本框
<input type=“password” value=“123456” size=“22”>
密碼框的建設
密碼框,22個字符寬度
<input type="radio" value="男" checked="checked">
單選按鈕的建設
單選按鈕框
<input type=“checkbox” name="cb2" value="talk">
<textarea name=“textarea” cols=“40” rows=“6”>內容</textarea>
<input type="reset" name=“reset" value=" 重填 ">
其他表單元素:<input type=“hidden”/>表單隱藏域
<input type=“image”/>表單圖片按鈕
<input type=“file”/>文件瀏覽
<label>標簽可以綁定某個表單元素,用于擴展可以相應點擊等事件的區域
如:當點擊復選框右邊的提示文字時,該復選框也可被選中。
內容有限,關于css,div和網頁布局的部分就下次在和大家分享吧!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。