html 基本介绍

html作为文件后缀名,就可以让文件变成网页,可以用浏览器所打开;
实际,html是一门编程语言,叫做《超文本标记语言》;

html的作用,就是制作网页;

超文本: 超过了文字 有图片

标记:html这门语言的基本组成单元 <内容>,大部分都有开始和结束的区别

格式:
<html>
<head></head> --作用:
<body></body> --作用:
</html>

DW简介:一般用代码 、拆分、设计。

创建网页:文件 --新建 --创建

body的属性:
body中的背景颜色和背景图片 <body bgcolor="" /background=""></body>
topmargin:上页边距
bottommargin:下页边距
leftmargin:左页边距
rightmargin:右页边距

 


文本:
基础样式,6种:加粗,倾斜,下划线,颜色,尺寸,字体
一、加粗、倾斜、下划线
<b><i><u>hello world</b></i></u>


二、颜色,尺寸,字体
<font color="read" face="黑体" size="7">世界你好<font>

三、换行
<br />
四、空格
&nbsp 设计界面 ctrl+shift+space
五、段落
<p>内容</p> 段落上下之间的间距较大
六、居中
<center></center>
七、单独标签占一行
<div></div>
八、默认用多大空间
<span></span>


内容容器标签:
1、<h1>内容</h1>......<h6>内容</h6> 标题(会自动换行),标题的大小
2、<div>内容</div>层标签(默认占一行,布局用)
3、<span>内容</span>层标签(利于找到内容)
4、有序列表
<ol>
<li>内容</li>
<li>内容</li>
</ol>
无序列表
<ul>
<li>内容</li>
<li>内容</li>
</ul>

插入图片
<img src="图片路径" width="" height="" >
title="图片隐藏的内容"


超链接
超级链接:
1、给文本添加超链接
代码书写格式:
<a href="连接到的地址">用户可见内容</a>

【注意:连接到的地址一定要写全地址!
如果要连接的页面在某个文件夹下,写地址的时候时一定要写上文件夹名】
2、给图片添加超链接
代码书写格式:
<a href="连接到的地址"><img src="图片地址"></a>
3、给文本和图片一起添加插连接
代码书写格式:
<a href="连接到的地址">用户可见内容<img src="图片地址"></a>
如何将连接的页面在新窗口打开?
代码书写格式:<a href="连接到的地址" target="_blank">用户可见内容</a>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body bgcolor="#66CCFF" topmargin="3" bottommargin="3" leftmargin="5" rightmargin="5">
<b>hello word</b><br />
<i>世界你好</i><br />
<u>good morning teacher</u><br/>
<font color="#CC0000" face="黑体" size="5" >早上好</font><br/>
<p>美女好  帅哥好</p>
<p><center><b><font color="#00FF00" size="6"><i>我是最棒的
</i></font></b></center><p>
<center><div>看飞碟</div></center>


<ol>
<li>嘿嘿</li>
<li>呵呵</li>
<li>哈哈</li>

</ol>

<img src="53c02679e9188.jpg" width="71" title="飞碟" ><br/>

<a href="http://www.baidu.com" target="_blank">百度</a><br/> 
<a href="http://www.baidu.com"target="_blank"><img src="53bd428a537ac.jpg" width="100" />   
<a href="http://www.baidu.com"target="_blank"><font size="7">百度<font><img src="53bd428a537ac.jpg" width="100"/></a>





</body>
</html>

  

posted @ 2016-06-16 19:17  宋小尧  阅读(159)  评论(0编辑  收藏  举报