HTML-2

作者: Wonder茂茂 | 来源:发表于2017-12-07 13:53 被阅读0次

列表

有序、无序和定义列表

无序列表

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

    HTML5的优点与缺点? 优点:a、网络标准统一、HTML5本身是由W3C推荐出来的。b、多设备、跨平台c、即时更...

  • HTML-2

    列表 有序、无序和定义列表 无序列表 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。开...

  • html-2

    一,样式有几种引入方式? link 和 @import有什么区别? 答:在html文件中,css样式一共有三种引入...

  • HTML-2

    1.样式有几种引入方式? link和@import有什么区别? I. 样式在HTML中有三种引入方式,分别是 内联...

  • 前端笔记--HTML-2

    html类: 对 HTML 进行分类(设置类),使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式,...

  • 前端规范之HTML-2

    属性顺序 class id name data-* src, for, type, href, value , m...

网友评论

      本文标题:HTML-2

      本文链接:https://www.haomeiwen.com/subject/vysdixtx.html