列表
有序、无序和定义列表
无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。开始于<ul></ul>标签,列表项为<li></li>
<ul>
<li>Wonder</li>
<li>maomao</li>
</ul>
- Wonder
- maomao
有序列表
开始于<ol></ol>标签,列表项为<li></li>
<ol>
<li>Wonder</li>
<li>maoamo</li>
</ol>
- Wonder
- maoamo
定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。
自定义列表以<dl></dl>标签开始。每个自定义列表项以<dt></dt>开始。每个自定义列表项的定义以<dd></dd>开始。
<dl>
<dt>Wonder</dt>
<dd>奇迹</dd>
<dt>maomao</dt>
<dd>茂茂</dd>
</dl>
Wonder奇迹maomao茂茂
块元素
块级元素在浏览器显示时,通常会以新行来开始(和结束)
例如:<h1>,<p>,<ul>,<table>,<div>
内联元素
内联元素在显示时通常不会以新行开始
例如:<b>,<td>,<a>,<img>,<span>
网站布局
HTML5 语义元素
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
实例
<!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>
前端学习<br>
爱好<br>
游戏<br>
</nav>
<section>
<h1>前端学习</h1>
<h3> HTML阶段 </h3>
<p>
HTML文档结构——段落标签——文字标签——图片标签——超链接标签——列表标签——表格标签——表单标签——框架标签——HTML5新增标签和属性(表单标签——canvas标签——媒体标签)
</p>
<h3> CSS阶段 </h3>
<p> CSS语法——CSS选择器(ID选择器——类选择器——符合选择器)——CSSS样式(背景——文本——字体——链接——列表——表格)——盒子模型(边框——外边框——内边框)——CSS定位(相对定位——绝对定位——浮动)——CSS3新增属性——CSS布局实战 </p>
<h3> JavaScript阶段 </h3>
<p> 基本语法——变量——数据类型——函数——运算符——流程控制——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;}
前端学习茂茂专属
爱好
游戏前端学习
HTML阶段
HTML文档结构——段落标签——文字标签——图片标签——超链接标签——列表标签——表格标签——表单标签——框架标签——HTML5新增标签和属性(表单标签——canvas标签——媒体标签)
CSS阶段
CSS语法——CSS选择器(ID选择器——类选择器——符合选择器)——CSSS样式(背景——文本——字体——链接——列表——表格)——盒子模型(边框——外边框——内边框)——CSS定位(相对定位——绝对定位——浮动)——CSS3新增属性——CSS布局实战
JavaScript阶段
基本语法——变量——数据类型——函数——运算符——流程控制——JS对象(String对象——Array对象——Date对象——Window对象——Document对象)——DOM操作——JS和CSS综合操作
http://m.wondermaomao.faisco.cn/manage/mobiDesign.jsp