HTML-2

列表

有序、無序和定義列表

無序列表

無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標(biāo)記。開始于<ul></ul>標(biāo)簽,列表項為<li></li>


<ul>


<li>Wonder</li>


<li>maomao</li>


</ul>






  • Wonder
  • maomao




有序列表

開始于<ol></ol>標(biāo)簽,列表項為<li></li>


<ol>


<li>Wonder</li>


<li>maoamo</li>


</ol>






  1. Wonder
  2. maoamo




定義列表

自定義列表不僅僅是一列項目,而是項目及其注釋的組合。

自定義列表以<dl></dl>標(biāo)簽開始。每個自定義列表項以<dt></dt>開始。每個自定義列表項的定義以<dd></dd>開始。



<dl>


<dt>Wonder</dt>


<dd>奇跡</dd>


<dt>maomao</dt>


<dd>茂茂</dd>


</dl>



Wonder奇跡maomao茂茂


塊元素

塊級元素在瀏覽器顯示時,通常會以新行來開始(和結(jié)束)

例如:<h1>,<p>,<ul>,<table>,<div>

內(nèi)聯(lián)元素

內(nèi)聯(lián)元素在顯示時通常不會以新行開始

例如:<b>,<td>,<a>,<img>,<span>

網(wǎng)站布局

HTML5? ? ? ? ? 語義元素

header? ? ? ? ? 定義文檔或節(jié)的頁眉

nav? ? ? ? ? ? ? ? 定義導(dǎo)航鏈接的容器

section? ? ? ? ? 定義文檔中的節(jié)

article? ? ? ? ? ? 定義獨立的自包含文章

aside? ? ? ? ? ? ? 定義內(nèi)容之外的內(nèi)容(比如側(cè)欄)

footer? ? ? ? ? ? ? 定義文檔或節(jié)的頁腳

details? ? ? ? ? ? ? 定義額外的細節(jié)

summary? ? ? ? ? 定義 details 元素的標(biāo)題



實例


<!DOCTYPE html>

<html>

<head>

<style>

#header{

background-color:black;

color:white;

text-align:center;

padding:5px;

}

nav{

line-height:30px;

background-color:#eeeeee;

height:800px;width:100px;float:left;padding:5px;

}

section{

width:350px;float:left;padding:10px;

}

footer{

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

}

</style>

</head>

<body>

<div id="header">

<h1>茂茂專屬</h1>

</div>

<nav>

前端學(xué)習(xí)<br>

愛好<br>

游戲<br>

</nav>

<section>

<h1>前端學(xué)習(xí)</h1>

<h3> HTML階段 </h3>

<p>

HTML文檔結(jié)構(gòu)——段落標(biāo)簽——文字標(biāo)簽——圖片標(biāo)簽——超鏈接標(biāo)簽——列表標(biāo)簽——表格標(biāo)簽——表單標(biāo)簽——框架標(biāo)簽——HTML5新增標(biāo)簽和屬性(表單標(biāo)簽——canvas標(biāo)簽——媒體標(biāo)簽)

</p>

<h3> CSS階段 </h3>

<p> CSS語法——CSS選擇器(ID選擇器——類選擇器——符合選擇器)——CSSS樣式(背景——文本——字體——鏈接——列表——表格)——盒子模型(邊框——外邊框——內(nèi)邊框)——CSS定位(相對定位——絕對定位——浮動)——CSS3新增屬性——CSS布局實戰(zhàn) </p>

<h3> JavaScript階段 </h3>

<p> 基本語法——變量——數(shù)據(jù)類型——函數(shù)——運算符——流程控制——JS對象(String對象——Array對象——Date對象——Window對象——Document對象)——DOM操作——JS和CSS綜合操作 </p>

</section>

<footer>

http://m.wondermaomao.faisco.cn/manage/mobiDesign.jsp

</footer>

</body>

</html>


#header{background-color:black;color:white;text-align:center;padding:5px;}nav{line-height:30px;background-color:#eeeeee;height:800px;width:100px;float:left;padding:5px;}section{width:350px;float:left;padding:10px;}footer{background-color:black;color:white;clear:both;text-align:center;padding:5px;}

茂茂專屬

前端學(xué)習(xí)
愛好
游戲

前端學(xué)習(xí)

HTML階段

HTML文檔結(jié)構(gòu)——段落標(biāo)簽——文字標(biāo)簽——圖片標(biāo)簽——超鏈接標(biāo)簽——列表標(biāo)簽——表格標(biāo)簽——表單標(biāo)簽——框架標(biāo)簽——HTML5新增標(biāo)簽和屬性(表單標(biāo)簽——canvas標(biāo)簽——媒體標(biāo)簽)

CSS階段

CSS語法——CSS選擇器(ID選擇器——類選擇器——符合選擇器)——CSSS樣式(背景——文本——字體——鏈接——列表——表格)——盒子模型(邊框——外邊框——內(nèi)邊框)——CSS定位(相對定位——絕對定位——浮動)——CSS3新增屬性——CSS布局實戰(zhàn)

JavaScript階段

基本語法——變量——數(shù)據(jù)類型——函數(shù)——運算符——流程控制——JS對象(String對象——Array對象——Date對象——Window對象——Document對象)——DOM操作——JS和CSS綜合操作

http://m.wondermaomao.faisco.cn/manage/mobiDesign.jsp

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    前端進階之旅閱讀 16,875評論 32 459
  • 選擇qi:是表達式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color,font,text-align,li...
    wzhiq896閱讀 2,117評論 0 2
  • 1.樣式有幾種引入方式? link和@import有什么區(qū)別? I. 樣式在HTML中有三種引入方式,分別是 內(nèi)聯(lián)...
    王康_Wang閱讀 503評論 1 0
  • 一,樣式有幾種引入方式? link 和 @import有什么區(qū)別? 答:在html文件中,css樣式一共有三種引入...
    kingBirds閱讀 523評論 0 0
  • 一廂情愿就要愿賭服輸
    Miss_d2fd閱讀 226評論 0 0

友情鏈接更多精彩內(nèi)容