html5基础知识第二章标签

淩亂°似流年 2022-08-10 06:14 246阅读 0赞

以下内容是学习期间整理，有些语句是便于理解，便于快速入门写的。并不权威![微笑][smile.gif]。

**标题标签：**

h1~h6 随着数字越大，字体越小，理论上h1只有一个

<body>
    	<h1>我是标题标签h1</h1>
    	<h2>我是标题标签h2</h2>
    	<h3>我是标题标签h3</h3>
    	<h4>我是标题标签h4</h4>
    	<h5>我是标题标签h5</h5>
    	<h6>我是标题标签h6</h6>
    </body>

**段落标签（p）：**

**字体标签（font）：**

学习css以后就不用这样写

字体 ========= face="微软雅黑";

字体大小 ========= size="12px";

字体颜色 ========= color="\#000";

<font face="微软雅黑" size="14px" color="red">font文字标签</font>

**span标签：**

对某个文字修饰，用的比较少

<span>非段落标签</span>

**超链接（a）：**

超链接一般都自带下划线，可以通过css样式的text-decoration:"none"消除掉

能在当前页面不跳转的尽量不跳转，跳转不利于搜索

<a href="#">超链接,刷新页面</a><br />
    <a href="http://blog.csdn.net/qq_19558705">在当前页面上打开新页面</a><br />
    <a href="http://blog.csdn.net/qq_19558705" target="_blank">在新标签页面打开</a><br />
    <a href="javascript:void(0)">超链接,不刷新页面，比第一种好</a><br /><br />

**strong/b标签：**

文字加粗，b单纯的加粗， strong 除了加粗以外，还利于搜索引擎的优化

<p><b>b标签加粗</b>段落标签<strong>strong标签加粗</strong></p>

**marquee滚动标签：**

<marquee>我是滚动标签marquee,默认是向左移动</marquee>
    <marquee direction="right">我是有方向的滚动标签向右移动</marquee>

**图片标签（img）：**

图片标签四要素：src （图片来源）；width（图片宽度）；height（图片高度）；alt（图片介绍）；

其实显示图片只需要src即可，但为了利于搜索引擎的优化建议把后面三项加上

**三种列表（ul,ol,dl）：**

ul：无序列表

disc是实心圆点

circle是空心圆点

square是实心正方型点

一般用ul li \{list-style:none;\}消除前面的点

ul非常有用，可以用于做导航等；老实说初学html5的时候只觉得ul li标签很有用，可以做导航，做轮展图；现在用插件比较多，为了项目的快速开发。比如做导航可以用Mmenu（[Mmenu学习][Mmenu]）轮展图可以用bootstrap的插件，瞬间觉得之前学的都白学了。其实基础还是要有的，不出错还好，出错都不造怎么开始找问题。之前因为一个简单的jquery问题花了近两小时。![偷笑][titter.gif]

ol：有序列表

A，a，I，i都可以

dl：自定义列表

<dl>
    	<dt>自定义列表项1</dt>
    	<dd>列表项1</dd>
    	<dd>列表项2</dd>
    	<dt>自定义列表项2</dt>
    	<dd>列表项3</dd>
    	<dd>列表项4</dd>
    </dl>

**特殊符号：**

空格 ======== &nbsp;

大于号 ======== >

小于号 ======== <

引号 ======== "

a标签 锚点技术（现在一般用js完成）：

<!doctype html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>锚点-demo</title>
    		<meta name="Keywords" content="a标签锚点">
    		<meta name="Description" content="">
    		<style type="text/css">
    			*{margin:0;padding:0;}
    			body{font-family:"微软雅黑";color:#fff;}
    			a{margin:auto;}
    			.box1,.box2,.box3,.box4{width:600px;height:400px;border:1px solid #666;margin:auto;}
    			.box1{background:#066;}
    			.box2{background:#f66;}
    			.box3{background:#c03;}
    			.box4{background:#369;}
    		</style>
    	</head>
    	<body>
    		<a name="top"></a>
    		<a href="#box1">box1</a> | <a href="#box2">box2</a> | 
    		<a href="#box3">box3</a> | <a href="#box4">box4</a>
    		<div class="box1"><a name="box1">box1</a></div><a href="#top">top</a><br /><br />
    		<div class="box2"><a name="box2">box2</a></div><a href="#top">top</a><br /><br />
    		<div class="box3"><a name="box3">box3</a></div><a href="#top">top</a><br /><br />
    		<div class="box4"><a name="box4">box4</a></div><a href="#top">top</a><br /><br />
    	</body>
    </html>

本人学的是后台java开发，前端只是简单的学习，如有不对的地方可以留言。ITDragon![大笑][laugh.gif]

更多干货等你来拿 [http://www.itit123.cn/][http_www.itit123.cn]

[smile.gif]: /images/20220731/2fc02de9f70343f28b92290fc5c15883.png
[Mmenu]: http://blog.csdn.net/qq_19558705/article/details/49808151
[titter.gif]: /images/20220731/6e89ef665e934bf9b4cac791a732874f.png
[laugh.gif]: /images/20220731/84e72f9b8c0e48c5aa2df1660c0a2d9e.png
[http_www.itit123.cn]: http://www.itit123.cn/