您的位置：首页 > Web前端 > HTML

HTML基础详解

2015-03-29 00:32 267 查看

声明

HTML也有多个不同的版本，只有完全明白页面中使用的确切HTML，浏览器才能完全正确地显示出HTML页面。这就是的作用

HTML5的声明：(下面外面都要有尖括号)

<!DOCTYPE html>

HTML4.01的声明：

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0的声明：

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0  Transitional//EN""http://www.w3.org/TR/xhtml1.transitional.dtd">

HTML基础标签

head、body(都会包含在html标签当中)

head定义编码格式

<head lang="zh"></head>

代表中文

<head lang="en"></head>

代表英文

<head>
<meta charset="UTF-8">
<title>HTML标题</title>
</head>

UTF-8是种编码格式

title是显示网页标题

HTML标题

<h1></h1>~<h6></h6>

依次从大到小，且都有加粗效果

HTML段落

p标签定义段落，会占一行的长度

HTML超链接

<a href="http://www.jikexueyuan.com">学习的家园</a>

HTML图像

<img src="images/图片名称.png">

标签定义图片

建议在项目下创建一个文件夹专门存放图片

项目->右键->new->directory->命名

HTML5元素

<p>

开始标签(开发标签)

元素内容

</p>

结束标签（闭合标签）

<br/>

空元素，没有元素内容，用来换行，其实用

<br>

也可以，但是

<br/>

更规范

HTML元素语法

元素的内容是开始标签与结束标签之间的内容

空元素在开始标签中进行关闭

大多数HTML元素可拥有属性

嵌套的HTML元素

大多数HTML元素是可以嵌套使用的

<body>
<p><a>this is my web page</a></p>
</body>

HTML属性

1、标签可以拥有属性为元素提供更多的信息

2、属性以键/值对的形式出现

如：href=”www.jikexueyuan.com”

3、常用标签属性

<h1>

:align对其方式

<body>

:bgcolor背景颜色

<a>

:target规定在何处打开链接

4、通用属性

class：规定元素的类名

id ：规定元素的唯一ID

style ：规定元素的样式

title ：规定元素的额外信息

实例：

1、在同一个项目下创建hrefht.html

<a href="hrefht.html">打开本地</a>

2、

<h1 align="right">标题</h1>

居右放置，也可以居中居上居下

3、

<body bgclocr="...">

设置背景颜色名，注意backgroud是设置背景图片的，不要弄混。

4、target的使用

<a href="hrefht.html" target="">打开本地</a>

默认打开新的链接会覆盖原来的网页，这种属性就是默认的_self属性，其次还有 _blank，开辟新的页面打开，除此之外还有 _top 和 _parent，之后再讲解它们的用法。

5、

<h2 class="h2ID">标题2</h2>

<h2 id="hID">标题2</h2>

通过CSS设置显示的效果

6、

<head>
<style type="text/css"></style>
</head>

以后再说明

HTML格式化

但是里面有一些标签已经很少使用，例如big，已经过时了，一般使用CSS实现。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>第二课</title>
</head>
<body>
<b>欢迎来到jikexueyuan.com</b>
<br/>
<big>欢迎来到</big>
<br/>
<i>欢迎来到</i>
<br/>
<small>欢迎来到</small>
<br/>
<strong>欢迎来到</strong>
<br/>
大家好<sub>欢迎</sub>来到
<br/>
大家好<sup>欢迎</sup>来到
<br/>
<ins>欢迎</ins>
<br/>
<del>欢迎来到</del>
</body>
</html>

实现效果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航