HTML基础教程1

1. HTML基础

1. HTML标题

    HTML标题是通过<h1>~<h6>等标签进行定义的:

<h1>this is a heading</h1>
<h2>this is a heading</h2>
<h3>this is a heading</h3>
程序输出:

HTML基础教程1

2. HTML段落

    HTML段落是通过<p>标签进行定义的.

<p>this is a paragraph.</p>
<p>this is another paragraph.</p>
程序输出:

3. HTML链接

    HTML链接是通过<a>标签进行定义的.

<a href="http://www.w3school.com.cn">this is a link</a>
程序输出(点击会跳转到w3school的页面):

4. HTML图像

    HTML图像是通过<img>标签进行定义的.

<img src='11.png' width="200" height='200' />
程序输出:(如果照片名为中文,则会显示出错:好像是需要设置语言为utf-8)

HTML基础教程1

2. HTML元素

1. HTML元素语法

    HTML元素指的是从开始标签到结束标签的所有代码.

开始标签
元素内容
结束标签
<p> this is a paragraph </p>
<a href="default.html"> this is a link </a>
<br />

2. 嵌套的HTML元素

<html>
<body>
<p>this is my first paragraph.</p>
</body>
</html>
备注:

1. 不要忘记结束标签

2. 允许有空的HTML元素

3. HTML对大小写不敏感,但是推荐小写.

3. HTML属性

1. HTML属性

    HTML标签可以拥有属性.属性提供了有关HTML元素的更多信息.

    属性总是以名称/值对的形式出现,比如:name="value"

    属性总是在HTML元素的开始标签中规定.

2. 属性实例

1) 链接属性

<html>
<body>
<a href="http://www.w3school.com.cn">this is a link</a>
</body>
</html>

2) 标题属性(居中)

<html>
<body>
<h1 align="center">this is a heading</h1>
</body>
</html>

3) 文档的主体属性(修改背景颜色)

<html>
<body bgcolor="yellow">
<h1 align="center">change the background color</h1>
</body>
</html>

3. 一些基础的属性

属性

描述
class
classname
规定元素的类名(classname)
id
id
规定元素的唯一id
style
style_definition
规定元素的行内样式
title
text
规定元素的额外信息

4. HTML标题

1. HTML标题

    标题是通过<h1>-<h6>等标签进行定义的.<h1>定义最大的标题.<h6>定义最小的标题.


<html>
<body bgcolor="yellow">
<h1>this is a heading</h1>
<h3>this is a heading</h3>
<h6>this is a heading</h6>
</body>
</html>



程序输出:


HTML基础教程1

备注:

1. 浏览器会自动的在标题的前后添加空行.

2. 默认情况下,HTML会自动地在块级元素的前后添加一个额外的空行.

2. HTML水平线

    <hr />标签在HTML页面中创建水平线,可用于分隔内容.


<html>
<!-- 这里显示中文,要设置字符集为utf-8-->
<meta charset="utf-8">
<body>
<p>hr 标签定义水平线</p>
<hr />
<p>this is a paragraph</p>
<hr />
</body>
</html>



程序输出:


HTML基础教程1

3. 小结

标签 描述
<html> 定义HTML文档
<body> 定义文档的主体
<h1>-<h6> 定义HTML标题
<hr> 定义水平线
<!--> 定义注释

你可能感兴趣的:(HTML基础教程)