html5常用标签 body部分 包括外观、结构体、分隔。
2014-12-27 22:02
399 查看
<!doctype html><!--html5声明-->
<html>
<head>
<meta charset="utf-8"/> <!-- 设置当前页面支持的字符集 html5-->
<title>所有的html基本标签</title> <!-- 当前页面的标题-->
</head>
<body>
<center><h1>*****第一类标记：与外观相关的标签*****</h1></center>
<br><br>
加粗 b: <b>加粗文字</b>
<br>
斜体 i: <i>斜体文字</i>
<br>
下划线 u: <u>下滑线</u>
<br>
贯穿线 s: <s>贯穿线文字</s>
<br>
小标 sub: <sub>下标文字</sub>
<br>
上标 sup: <sup>上标文字</sup>
<br>
打字机字体 tt: <tt>打字机字体表示如果中间有空格，无论 多少 个 都只显示 一个！</tt>
<br>
预定义格式 pre: <pre>按照预定的格式
显示 在网页上</pre>
<br>
居中显示 center: <center>居中显示文字</center>
<br>
闪耀的字 blink: <blink>闪烁的文字，但是不是所有的浏览器都支持</blink>
<br>
字体大小 font size大小一直能到7号字体: <br><font size="1">1号大小字体</font><br><font size="2">2号大小字体</font><br><font size="3">3号大小字体</font><br><font size="4">4号大小字体</font><br>
<br>
邮箱 address： <address draggable="true">邮箱地址：hiwyh@live.com</address>
html5新增的 fieldset： <br>
<fieldset title="自我介绍">
<legend>自我介绍</legend>
我是一位潜力股！
</fieldset>
缩写 abbr:<abbr title="java开发工具包">jdk</abbr>
<br>
引用 blockquote: 毛主席说：<blockquote cite="http://www.baidu.com">不以结婚为目的谈恋爱都是耍流氓！</blockquote>
<br>
<center><h1>*****第二类标记：结构体定义（容器块定义）*****</h1></center>
标题字： h?（？代表数字 1~6）
<h1 dir="rtl">标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
区块： div 表示一个区块<br>
<div style="width:200px;height:100px;background:black;color:white;float:left">表示一个div层，每个层就是一个渔区，类似swt中的 compsite</div>
div后的文字，用了浮动所有更在div后显示。
<br><br><br><br><br><br>
区块布局演示：
<div style="width:1100px">
<div style="width:200px;height:100px;background:black;color:white;float:left">第一个区块</div>
<div style="width:500px;height:100px;background:blue;color:white;float:left">第二个区块</div>
<div style="width:400px;height:100px;background:red;color:white;float:left">第三个区块</div>
</div>
<br><br><br><br><br><br>
强调标签 em & strong: <em>强调标签文字</em> <strong>强调标签文字2</strong>
<br>
代码标签 code ：<code>public void static</code>
<br>
表示从键盘输的信息 kbd: 按下<kbd>esc</kbd>退出程序
<br>
表示一个变量 var : int <var>r</var>=3
<br>
大字 big:<big>字体加大</big>
<br>
小字 small :<small>字体变小</small>
<br>
<center><h1>*****第三类标记：分隔*****</h1></center>
段落 p: <p>这是一个段落，可以加其他标签，前后自动换行</p>
换行 br: <br> 换行显示<br>
横线 hr:hr,html5 是不支持属性的.演示html4 加属性<hr width="70%" size="10" color="blue">
<br>
不换行标记 nobr: <nobr>***********
*******</nobr>
新增的html5的语义化分隔标记： article，header， section <br>
<article>
<header>
<h1>喜迎油价下降</h1>
<div>
<ul>
<li class="author">作者</li>
<li class="category">国内新闻</li>
</ul>
</div>
</header>
<div class ="content">
新华社电。。。。
</div>
</article>
<section>
<header>
<h1>一楼</h1>
<div>
同意楼主
</div>
</header>
</section>
<center><h1>*****第三类标记：列表*****</h1></center>
无序列表 ul li 样式有： cricle、square、disc:
<br>
水果：
<ul>
<li>
橘子
</li>
<li>
苹果
</li>
</ul>
有序列表 ol li 样式有： A、a、I ,设置起始位置：start=起始位置:
<br>
水果：
<ol type="I">
<li>
橘子
</li>
<li>
苹果
</li>
</ol>
html5新增：
图文混排列举： dl <br>
<dl>
<dt>商品一</dt>
<dd><img src="./image/1.ico" width="50px" height="100px"/></dd>
<dd>很棒的打底裤</dd>
<dd>原价:<s>￥1000</s></dd>
<dd>现价:￥200</dd>
</dl>
菜单列表 menu li<br>
<menu>
<li>
保存
</li>
<li>
另存为
</li>
</menu>
目标列表 dir li<br>
<dir>
<li>
************
</li>
<li>
************
</li>
</dir>
</body>
</html>
----------------------
以上代码都是能直接运行看效果。
标签分为3部分，外观、结构体、分隔。常用的html标签基本包括。
<html>
<head>
<meta charset="utf-8"/> <!-- 设置当前页面支持的字符集 html5-->
<title>所有的html基本标签</title> <!-- 当前页面的标题-->
</head>
<body>
<center><h1>*****第一类标记：与外观相关的标签*****</h1></center>
<br><br>
加粗 b: <b>加粗文字</b>
<br>
斜体 i: <i>斜体文字</i>
<br>
下划线 u: <u>下滑线</u>
<br>
贯穿线 s: <s>贯穿线文字</s>
<br>
小标 sub: <sub>下标文字</sub>
<br>
上标 sup: <sup>上标文字</sup>
<br>
打字机字体 tt: <tt>打字机字体表示如果中间有空格，无论 多少 个 都只显示 一个！</tt>
<br>
预定义格式 pre: <pre>按照预定的格式
显示 在网页上</pre>
<br>
居中显示 center: <center>居中显示文字</center>
<br>
闪耀的字 blink: <blink>闪烁的文字，但是不是所有的浏览器都支持</blink>
<br>
字体大小 font size大小一直能到7号字体: <br><font size="1">1号大小字体</font><br><font size="2">2号大小字体</font><br><font size="3">3号大小字体</font><br><font size="4">4号大小字体</font><br>
<br>
邮箱 address： <address draggable="true">邮箱地址：hiwyh@live.com</address>
html5新增的 fieldset： <br>
<fieldset title="自我介绍">
<legend>自我介绍</legend>
我是一位潜力股！
</fieldset>
缩写 abbr:<abbr title="java开发工具包">jdk</abbr>
<br>
引用 blockquote: 毛主席说：<blockquote cite="http://www.baidu.com">不以结婚为目的谈恋爱都是耍流氓！</blockquote>
<br>
<center><h1>*****第二类标记：结构体定义（容器块定义）*****</h1></center>
标题字： h?（？代表数字 1~6）
<h1 dir="rtl">标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
区块： div 表示一个区块<br>
<div style="width:200px;height:100px;background:black;color:white;float:left">表示一个div层，每个层就是一个渔区，类似swt中的 compsite</div>
div后的文字，用了浮动所有更在div后显示。
<br><br><br><br><br><br>
区块布局演示：
<div style="width:1100px">
<div style="width:200px;height:100px;background:black;color:white;float:left">第一个区块</div>
<div style="width:500px;height:100px;background:blue;color:white;float:left">第二个区块</div>
<div style="width:400px;height:100px;background:red;color:white;float:left">第三个区块</div>
</div>
<br><br><br><br><br><br>
强调标签 em & strong: <em>强调标签文字</em> <strong>强调标签文字2</strong>
<br>
代码标签 code ：<code>public void static</code>
<br>
表示从键盘输的信息 kbd: 按下<kbd>esc</kbd>退出程序
<br>
表示一个变量 var : int <var>r</var>=3
<br>
大字 big:<big>字体加大</big>
<br>
小字 small :<small>字体变小</small>
<br>
<center><h1>*****第三类标记：分隔*****</h1></center>
段落 p: <p>这是一个段落，可以加其他标签，前后自动换行</p>
换行 br: <br> 换行显示<br>
横线 hr:hr,html5 是不支持属性的.演示html4 加属性<hr width="70%" size="10" color="blue">
<br>
不换行标记 nobr: <nobr>***********
*******</nobr>
新增的html5的语义化分隔标记： article，header， section <br>
<article>
<header>
<h1>喜迎油价下降</h1>
<div>
<ul>
<li class="author">作者</li>
<li class="category">国内新闻</li>
</ul>
</div>
</header>
<div class ="content">
新华社电。。。。
</div>
</article>
<section>
<header>
<h1>一楼</h1>
<div>
同意楼主
</div>
</header>
</section>
<center><h1>*****第三类标记：列表*****</h1></center>
无序列表 ul li 样式有： cricle、square、disc:
<br>
水果：
<ul>
<li>
橘子
</li>
<li>
苹果
</li>
</ul>
有序列表 ol li 样式有： A、a、I ,设置起始位置：start=起始位置:
<br>
水果：
<ol type="I">
<li>
橘子
</li>
<li>
苹果
</li>
</ol>
html5新增：
图文混排列举： dl <br>
<dl>
<dt>商品一</dt>
<dd><img src="./image/1.ico" width="50px" height="100px"/></dd>
<dd>很棒的打底裤</dd>
<dd>原价:<s>￥1000</s></dd>
<dd>现价:￥200</dd>
</dl>
菜单列表 menu li<br>
<menu>
<li>
保存
</li>
<li>
另存为
</li>
</menu>
目标列表 dir li<br>
<dir>
<li>
************
</li>
<li>
************
</li>
</dir>
</body>
</html>
----------------------
以上代码都是能直接运行看效果。
标签分为3部分，外观、结构体、分隔。常用的html标签基本包括。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html5常用标签 body部分（2）包括 表格、图片、链接、视频、表单、以及其他html5新增
- html5 常用 标签
- JEE CMS常用标签总结-包括日期标签、文章列表标签
- ie8以下版本（包括ie8）的浏览器不支持html5标签属性解决方案（Modernizr 2.6.2插件的使用）
- html5元素标签基础 head 部分
- HTML语义化：HTML5的新标签及IE5.5~9的部分兼容方案
- typedef常用的使用方法（包括结构体）
- 【HTML5】学习笔记2(常用标签2)
- HTML5 <address> Tag，这个标签貌似挺常用
- HTML5中新标签和常用标签详解
- HTML5常用 标签
- html5与html4的部分标签区别
- html5常用新标签
- html body标签详解与html常用的控制标记
- body常用标签
- HTML5添加的一些常用新标签
- HTML5中html head body标签应该省略吗
- 许多HTML5新标签都是由大家最常用的ID名转换过来
- html5常用标签
- 【HTML5】学习笔记2(常用标签1)