HTML-2

列表

有序、无序和定义列表

无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。开始于<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>






  1. Wonder
  2. 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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,627评论 32 459
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,808评论 0 2
  • 1.样式有几种引入方式? link和@import有什么区别? I. 样式在HTML中有三种引入方式,分别是 内联...
    王康_Wang阅读 473评论 1 0
  • 一,样式有几种引入方式? link 和 @import有什么区别? 答:在html文件中,css样式一共有三种引入...
    kingBirds阅读 453评论 0 0
  • 一厢情愿就要愿赌服输
    Miss_d2fd阅读 220评论 0 0