本篇内容

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>

第十二篇：HTML基础的更多相关文章

解剖SQLSERVER 第十二篇 OrcaMDF 行压缩支持（译）
解剖SQLSERVER 第十二篇 OrcaMDF 行压缩支持(译) http://improve.dk/orcamdf-row-compression-support/ 在这两个月的断断续续的开发 ...
Python开发【第二十二篇】：Web框架之Django【进阶】
Python开发[第二十二篇]:Web框架之Django[进阶] 猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园首页 ...
跟我学SpringCloud | 第十二篇：Spring Cloud Gateway初探
SpringCloud系列教程 | 第十二篇:Spring Cloud Gateway初探 Springboot: 2.1.6.RELEASE SpringCloud: Greenwich.SR1 如 ...
Spring Cloud第十二篇 | 消息总线Bus
本文是Spring Cloud专栏的第十二篇文章,了解前十一篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring ...
第十二篇 SQL Server代理多服务器管理
本篇文章是SQL Server代理系列的第十二篇,详细内容请参考原文在这一系列的上一篇,我们查看了维护计划,一个维护计划可能会创建多个作业,多个计划.你还简单地看了SSIS子系统,并查看了维护计划作 ...
第十二篇 Integration Services：高级日志记录
本篇文章是Integration Services系列的第十二篇,详细内容请参考原文. 简介在前一篇文章我们配置了SSIS内置日志记录,演示了简单和高级日志配置,保存并查看日志配置,生成自定义日志消息 ...
Python之路【第十二篇】：JavaScrpt -暂无内容-待更新
Python之路[第十二篇]:JavaScrpt -暂无内容-待更新
【译】第十二篇 Integration Services：高级日志记录
本篇文章是Integration Services系列的第十二篇,详细内容请参考原文. 简介在前一篇文章我们配置了SSIS内置日志记录,演示了简单和高级日志配置,保存并查看日志配置,生成自定义日志消息 ...
【译】第十二篇 SQL Server代理多服务器管理
本篇文章是SQL Server代理系列的第十二篇,详细内容请参考原文在这一系列的上一篇,我们查看了维护计划,一个维护计划可能会创建多个作业,多个计划.你还简单地看了SSIS子系统,并查看了维护计划作 ...
Egret入门学习日记 --- 第十二篇（书中 5.1节内容）
第十二篇(书中 5.1节内容) 昨天把第4章完成了. 今天来看第5章. 接下来是 5.1节的内容. 总结一下 5.1节的重点: 1.如何制作一个公用按钮皮肤. 跟着做: 重点1:如何制作一个公 ...

随机推荐

改变shape solid color
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http: ...
第8条：覆盖equals时请遵守通用约定
第8条:覆盖equals时请遵守通用约定引言:尽管Object是一个具体类,但是设计它主要是为了拓展.它所有的非final方法(equals.hashCode.toString.clone和fina ...
v-show
v-show的原理是当值为false的时候,元素display:none 隐藏了元素且脱离文档流,但是在dom 中仍然存在. 与v-if使用场景不同,文档中提到,当需要高频切换的时候使用v-show ...
Tomcat的部署+第一个Servlet
Tomcat部署 1.下载tomcat,添加到eclipse 2.配置环境变量(path) 3.win+r,输入Startup(如果没用,就管理员启动命令) 或者找到tomcat安装包,在bin目录找 ...
linux命令讲解
1.vi命令 1.光标移动到文件的最后一行 G :$ ]] 2.光标移动到文件的第一行 :0 gg [[ 3.从光标所在位置将光标移动到当前行的开头 0 ^ ...
python中enumerate函数使用
enumerate()说明 enumerate()是python的内置函数 enumerate在字典上是枚举.列举的意思对于一个可迭代的(iterable)/可遍历的对象(如列表.字符串),enum ...
macOs 使用Homebrew升级到MySQL 8系列之后，php无法连接解决方法
当前时间2018-9-28 在使用brew install mysql 默认安装为 MySQL 8,但是使用php连接到数据库之后,出现了这种错误 (Unexpected server respose ...
C语言进阶——注释符号12
注释可能大认为非常简单,但是注释其实在C语言中很关键,来看下面一段对话. ---学生: 老师,我觉得注释没有必要深究,因为很简单,对程序功能也没有影响. ---老师: 注释是C语言最重要的工具,我们先 ...
[BZOJ1060][ZJOI2007]时态同步（树形DP）
[我是传送门] 因为边权只能增加,那么设f[u]为u子树上从i出发到达某个叶节点的最大路径, 显然Ans应该增加f[u]-f[v]-e[i].w Code #include <cstdio> ...
2015 acm taipei L-Reward the Troop(uvalive 7465)(找规律)
原题链接就大概说的是一个将军要给部下发勋章,他的部下以和别人不一样的勋章为荣,但是他没这么多钱,所以问你最少要多少钱要求是每个人的上司是他的上两级,他的下两级是他的部下,每个人的勋章不能和他的上司 ...