本篇内容

  1. HTML概述
  2. HTML常用基本标签
  3. 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基础的更多相关文章

  1. 解剖SQLSERVER 第十二篇 OrcaMDF 行压缩支持(译)

    解剖SQLSERVER 第十二篇   OrcaMDF 行压缩支持(译) http://improve.dk/orcamdf-row-compression-support/ 在这两个月的断断续续的开发 ...

  2. Python开发【第二十二篇】:Web框架之Django【进阶】

    Python开发[第二十二篇]:Web框架之Django[进阶]   猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...

  3. 跟我学SpringCloud | 第十二篇:Spring Cloud Gateway初探

    SpringCloud系列教程 | 第十二篇:Spring Cloud Gateway初探 Springboot: 2.1.6.RELEASE SpringCloud: Greenwich.SR1 如 ...

  4. Spring Cloud第十二篇 | 消息总线Bus

    ​ ​本文是Spring Cloud专栏的第十二篇文章,了解前十一篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring ...

  5. 第十二篇 SQL Server代理多服务器管理

    本篇文章是SQL Server代理系列的第十二篇,详细内容请参考原文 在这一系列的上一篇,我们查看了维护计划,一个维护计划可能会创建多个作业,多个计划.你还简单地看了SSIS子系统,并查看了维护计划作 ...

  6. 第十二篇 Integration Services:高级日志记录

    本篇文章是Integration Services系列的第十二篇,详细内容请参考原文. 简介在前一篇文章我们配置了SSIS内置日志记录,演示了简单和高级日志配置,保存并查看日志配置,生成自定义日志消息 ...

  7. Python之路【第十二篇】:JavaScrpt -暂无内容-待更新

    Python之路[第十二篇]:JavaScrpt -暂无内容-待更新

  8. 【译】第十二篇 Integration Services:高级日志记录

    本篇文章是Integration Services系列的第十二篇,详细内容请参考原文. 简介在前一篇文章我们配置了SSIS内置日志记录,演示了简单和高级日志配置,保存并查看日志配置,生成自定义日志消息 ...

  9. 【译】第十二篇 SQL Server代理多服务器管理

    本篇文章是SQL Server代理系列的第十二篇,详细内容请参考原文 在这一系列的上一篇,我们查看了维护计划,一个维护计划可能会创建多个作业,多个计划.你还简单地看了SSIS子系统,并查看了维护计划作 ...

  10. Egret入门学习日记 --- 第十二篇(书中 5.1节 内容)

    第十二篇(书中 5.1节 内容) 昨天把 第4章完成了. 今天来看第5章. 接下来是 5.1节 的内容. 总结一下 5.1节 的重点: 1.如何制作一个公用按钮皮肤. 跟着做: 重点1:如何制作一个公 ...

随机推荐

  1. Docker迁移学习及其他

    起因: 有在一台服务器A上通过docker搭建git服务,由于某些原因需要将其迁移到另一台服务器B. 过程: 最终采用方式: 首先通过docker ps(-a) 查看目标容器,然后通过commit命令 ...

  2. Android和IOS网页不一致汇总

    1.input type=text 内容输入框的不一致,ios会默认给输入框添加自己的样式,导致在横向的输入框长度精准控制的时候,ios的输入框一般都比android上要长一点,还有内部阴影 解决此问 ...

  3. Python类与对象--基础

    ## 类 - 具体事物的抽象和总结,是事物的共性,由属性和方法两个部分构成,比如一个Person类,有是身高.体重.肤色等属性,也有吃饭.睡觉.观察.等方法 ## 对象 - 具体的事物,单一.个体.特 ...

  4. web worker,SSE,WebSocket,AJAX 与后端交互的方式

    一 web worker web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能.您可以继续做任何愿意做的事情:点击.选取内容等等,而此时 web worker ...

  5. 笔记-爬虫-js代码解析

    笔记-爬虫-js代码解析 1.      js代码解析 1.1.    前言 在爬取网站时经常会有js生成关键信息,而且js代码是混淆过的. 以瓜子二手车为例,直接请求https://www.guaz ...

  6. 设置默认以管理员运行的WinForm

    右键工程名, 属性; 选择"安全性"; 勾选"启用ClickOnce安全设置"与"这是完全可信的应用程序"; 退出该页面, app.mani ...

  7. format内置函数

    1. 函数功能将一个数值进行格式化显示. 2. 如果参数format_spec未提供,则和调用str(value)效果相同,转换成字符串格式化. >>> format(3.14159 ...

  8. [bzoj3371][poj2009][Usaco2004 Mar]Moo University - Emergency Pizza Order 定制比萨饼

    标题这么长的..真是让感觉人头大脚轻. 贴题面先. Description     Moo大学的餐厅必须为$C(1\leq C\leq 1000)$头入学的奶牛新生定制比萨饼.比萨饼可以在比萨小屋订做 ...

  9. Eclipse Java 构建路径 ---Eclipse教程第13课

    Eclipse Java 构建路径 设置 Java 构建路径 Java构建路径用于在编译Java项目时找到依赖的类,包括以下几项: 源码包 项目相关的 jar 包及类文件 项目引用的的类库 我们可以通 ...

  10. adb logcat 日志过滤

    方法 1.采用wpa_supplicant:s   *:v 排除wpa_supplicant标签 adb -s 01d32e89cb94d599 logcat -v time -s wpa_suppl ...