前端学习(一)---HTML常用标签

一、html的基本结构(html5)
代码:

<!doctype html>
<html>
   <head>
      <title>东软睿道</title>
   </head>
   <body>
      产业融入教育
   </body>
</html>

<meta charset="UTF-8">处理中文乱码的标记,写在head里

二、标题标签

<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>第一节课</h1>
		<h2>第二节课</h2>
		<h3>第三节课</h3>
		<h4>第四节课</h4>
		<h5>第五节课</h5>
		<h6>第六节课</h6>    		
	</body>
</html>

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1 align="left">第一节课</h1>
		<h2 align="center">第二节课</h2>
		<h3 align="right">第三节课</h3>
		<h4>第四节课</h4>
		<h5>第五节课</h5>
		<h6>第六节课</h6>
	</body>
</html>

三、段落标签

<p></p>
<p style="line-height:1.8">   line-height是行间距属性,值是倍数

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		   <p style="line-height:1.8">公元一九七八年,党的十一届三中全会吹响了改革开放的号角,把社会主义现代化经济建设作为全党全民的主要发展目标,三十余年来,私营企业经济已经由原来的辅助经济转变成了国民经济的重要组成部分,在这个发展历程中,深广、江浙、闽沪等东南沿海地区凭借着优越的地理环境和对国家政策的高度理解,已经成为当之无愧的经济发展排头兵,以浪潮涌动的英姿受到举国瞩目的赞叹,我们艳羡他们的成绩,更加感叹他们团结在一起所凝聚的力量,正是因为这种力量,让小小的温州纽扣和皮鞋走向了世界,让苏州布匹和广州服装无人能及。</p>
		   <p>回顾龙江企业发展历史,历来是单打独斗,互相防范,以至银行推行几年的联保贷款至今没有企业实现。</p>
		   <p>十四万六千户龙江私营企业,百分之八十的部分还停留在徘徊、游离、有待于解决温饱的状态。我们没有市场份额,是因为我们没有力量,我们没有知名度,也是因为我们没有力量,我们没有走出国门,更是因为我们没有力量。我们只有迈开步伐的勇气,而没有聚集力量的方法。在省委省政府的指导下,黑龙江私营企业协会按照孙尧副省长和马文博副局长的指示,要求私营企业服务中心全面开展各项职能,为全省私营企业保驾护航,以振兴龙江经济为目标,全心全意为私营企业服务。</p>
	</body>
</html>

四、换行标签

<br/>
代码:
<p>回顾龙江企业发展历史,<br>历来是单打独斗,互相防范,以至银行推行几年的联保贷款至今没有企业实现。</p>

五、水平线标签

<hr/>

代码:

  <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    	</head>
    	<body>
    		<hr/>
    		<hr color="blue"/>
    		<hr color="blue" size="5px"/>
    	</body>
    </html>

六、字体样式标签字体样式标签加粗<strong>…</strong> <b>..</b>斜体:<em>…</em> <i>...</i>

七、特殊字符

?	  无间断空格	    &nbsp;	&#160;
<	  小于	        &lt;  	&#60;
>	  大于	        &gt; 	&#62;
&	  and符号	    &amp;	&#38;
"	  双引号 	    &quot;	&#34;
¢	  分	        &cent;	&#162;
£	  英镑    	    &pound;	&#163;
¥   人民币元 	    &yen;	&#165;
§	  章节          &sect;	&#167;
?	  版权   	    &copy;	&#169;
?	  注册 	        &reg;	&#174;
×	  乘号	        &times;	&#215;
÷	  除号	        &divide;&#247;
√	  对号	        &radic;	&#8730; 

八、图像标签
常见的图像格式
JPG
GIF
PNG

<img src="path" alt="text" title="text"  width="x"  height="y" />

src是图片路径的属性
alt或title是图片提示信息
width是宽
heigth是高
代码:

<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<img src="img/logo.png"><br>
		<img src="img/logo.png" alt="help1" title="help2"><br>
	    <img src="img/logo.png" alt="help1" title="help2"
	    	 width="180px" height="180px"><br>
	    	 	<img src="img/logo.png" width="100%"><br>
	</body>	
</html>

九、链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>

代码

<a href="index.html">首页</a><br>
		<a href="index.html" target="_blank">首页</a><br>
		<a href="index.html" target="_blank">
			<img src="img/logo.png" width="100px" height="100px" 
		</a><br>

十、预设格式文本

<pre>……</pre>

代码:

<pre>
public void main(String[]args){
     System.out.println("dd");
}
</pre>

十一、字体标签

字体:<font>……</font>
代码:

<font color="blue">蓝色的海洋</font><br>
<font style="font-size:100px">蓝色的海洋</font>

十二、物理字体

<b>…</b> 	    设置标记间的文字为粗体      
<i>…</i>	    设置标记间的文字为斜体       
<u>…</u>	    设置标记间的文字带下划线     
<sup>…</sup>	设置标记间的文字为上标       
<sub>…</sub> 	设置标记间的文字为下标       
<del>…</del>	设置标记间的文字带删除线 

十三、逻辑字体

<em>…</em>	            一般强调(emphasis),斜体
<strong>…</strong>	    特别强调,黑体
<address>…</address> 	表示地址
<q>…</q>	            定义引用
<kbd>…</kbd> 	        用户键入的文字,字体变细变轻
<cite>…</cite> 	        一段引用的文字,斜体。用于书名、电影名
<small>…</small>	    字体变小
<big>…</big>	        字体变大    
<dfn>…</dfn>	        定义术语
<code>…</code>	        源代码
<var>…</var> 	        变量

十四、居中及注释
居中:<center>…</center>
设置标记中文本或者图像居中显示
注释:<!-- … -->
浏览器中不显示注释内容<!-- 本句不会显示在浏览器中 -->

十五、文档主体body
bgcolor 设置页面背景颜色。※
background 设置页面的背景图片的URL。
text 设置页面非超链接文字基本颜色。
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body bgcolor="gray" text="white" background="img/logo.png">
		这就是一个测试嘛!
	</body>
</html>

十六、列表
列表的分类
无序列表: <ul>…</ul>
有序列表: <ol>...</ol>
定义列表: <dl>...</dl>
列表项用<li>…</li>标识
无序列表

<ul>…</ul>

列表项用<li>…</li>标识
type 取值可以是disc、square、circle,分别表示用圆盘、正方形、圆形作为列表符号。
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ul type="discc">
			<li>讲html第一章</li>
			<li>完税系统项目</li>
			<li>听听歌</li>
		</ul>
	</body>
</html>

有序列表

<ol>…</ol>

列表项用<li>…</li>标识
type 取值可以是1、a、A、i、I,分别代表编号使用阿拉伯数字、小写英文字母、大写英文字母、小写罗马数字、大写罗马数字。
start 指定序号的起始值,只能取数字。
代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<ol type="a">
			<li>讲html第一章</li>
			<li>完税系统项目</li>
			<li>听听歌</li>
		</ol>
		
	</body>
</html>

设置定义列表:<dl>…</dl>
dl是definition list的缩写
<dt>,定义项(definition term)
<dd>,定义解释(definition description)
<dl>, 可以设置以下属性
compact 无取值,可以实现紧凑显示格式。

猜你喜欢

转载自blog.csdn.net/qq_40707033/article/details/86513462