第十二篇：HTML基础

本篇内容

HTML概述
HTML常用基本标签
CSS格式引入

一、 HTML概述

1.定义：

HTML，超文本标记语言，写给浏览器的语言，目前网络上应用最广泛的语言。HTML也在不断的更新，最新版本已经出现了HTML5。在HTML5中出现了许多新特性，也遗弃了一些旧元素。我们写好html文件后，在浏览器中打开。主流的浏览器包括IE、Firefox、Chrome、Goole等。

2.标签元素：

HTML元素由开始标签和结束标签组成。如<p>/<p>,<h1><h1/>。虽然现在我们还不知道具体标签代表的意思，但标签一定是这样的格式：有一对开始<>和结束</>。一般标签名推荐用小写。标签具有属性，属性用来表示标签的特征。比如，我们用大小这个属性，来衡量一个苹果。所以，大小可以用来表示苹果的特征。属性时写在标签里面的，而且是开始标签内。

3.基本架构：

结构由网页的头部和网页的身体组成。如下例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这里是标题</title>
</head>
<body>
    这里是内容
</body>
</html>

在上面的例子中，第一个标签<html>是告诉浏览器这是html文档的开始。Html文档的最后一个标签是</html>，是告诉浏览器这是html的终止。标签<head></head>之间的文本是头部信息，在<title></title>之间的文本是文档标题，会显示在浏览器的窗口的标题栏。<body></body>之间的文本是正文。

二、 HTML常用基本标签

1.h标签：

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Hellow World</h1>
    <h2>Hellow World</h2>
    <h3>Hellow World</h3>
    <h4>Hellow World</h4>
    <h5>Hellow World</h5>
    <h6>Hellow World</h6>
</body>
</html>

2.p标签：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p>That's the first paragraph.</p>
    <p>This is the second paragraph.</p>
</body>
</html>

3.a标签：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="http://www.baidu.com">百度</a>
</body>
</html>

4.img标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="海贼王.jpg" alt="" width="500px" height="600px">
</body>
</html>

5.hr标签：

<hr /> 标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>test</h1>
    <hr>
    <h2>test</h2>
    <hr>
</body>
</html>

6.ul标签：

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li>111</li>
        <li>222</li>
    </ul>
</body>
</html>

7.ol标签：

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ol>
        <li>111</li>
        <li>222</li>
    </ol>
</body>
</html>

8.dl标签：

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <dl>
        <dt>北京市</dt>
        <dd>海淀区</dd>
        <dd>东城区</dd>
        <dd>西城区</dd>
    </dl>
</body>
</html>

9.table标签：

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
    </table>
</body>
</html>

10.form表单：

（1）text：

<input type="text"> 定义用于文本输入的单行输入字段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" method="post">
        用户名：<input type="text" name="username">
    </form>
</body>
</html>

（2）password：

<input type="password"> 定义用于密码输入的单行输入字段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" method="post">
        密码：<input type="password" name="password">
    </form>
</body>
</html>

（3）radio：

<input type="radio"> 定义用于单选按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" method="post">
        <input type="radio" name="sex" value="1">男
        <input type="radio" name="sex" value="0">女
    </form>
</body>
</html>

（4）checkbox：

<input type="checkbox"> 定义用于复选按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" method="post">
        <input type="checkbox" name="hobby" value="1">足球
        <input type="checkbox" name="hobby" value="2">篮球
        <input type="checkbox" name="hobby" value="3">排球
    </form>
</body>
</html>

（5）submit：

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="" method="post">
        <input type="submit" value="提交">
    </form>
</body>
</html>

三、 CSS格式引入

css三种引用方式：

1.标签引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    h1{
        color: red;
    }
</style>
<body>
    <h1>
        这是一个标题
    </h1>
</body>
</html>

2.id引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    #c1{
        color: red;
    }
</style>
<body>
    <h1 id="c1">
        这是一个标题
    </h1>
</body>
</html>

3.类引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .c1{
        color: red;
    }
</style>
<body>
    <h1 class="c1">
        这是一个标题
    </h1>
</body>
</html>

posted @ 2017-09-21 10:47 00豆豆00 阅读(175) 评论(0) 编辑收藏举报

00豆豆00

第十二篇：HTML基础

本篇内容

一、 HTML概述

二、 HTML常用基本标签

三、 CSS格式引入

公告