第十二篇：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>
第十二篇：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:如何制作一个公 ...
随机推荐
- 知识总结和记录——HTML
文档结构 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="U ...
- 重新认识下数组的concat方法
最近在学习react,看官方文档的时候,有一个例子中的一句话让我困惑.就是讲todoList的例子 concat不是连接数组的吗?看了一下concat的介绍 数组虽然是对象类型,但是对象毕竟不是数组啊 ...
- 第34-3题：LeetCode437. Path Sum III
题目 二叉树不超过1000个节点,且节点数值范围是 [-1000000,1000000] 的整数. 示例: root = [10,5,-3,3,2,null,11,3,-2,null,1], sum ...
- AngularJS常见面试题
本文引自:https://segmentfault.com/a/1190000005836443 问题来源:如何衡量一个人的 AngularJS 水平? ng-if 跟 ng-show/hide 的区 ...
- js表格打印自动分页demo
本文翻译自:How Does setState Know What to Do? 原作者:Dan Abramov 如果有任何版权问题,请联系shuirong1997@icloud.com 当你在组件中 ...
- 记一次微信小程序在安卓的白屏问题
在做小程序的时候,做到了一个限时商品售卖,用到了倒计时,因为这个原因导致了安卓手机上使用小程序时,将小程序放入后台运行一段时间后,再次进入小程序后出现了页面白屏或者点击事件失效的情况,这里记录下 1. ...
- 解决.NET Core R1中文乱码问题
今天写了一个简单的.NET Core RC1控制台程序,发现中文显示一直是乱码.查看操作系统设置,没有问题:查看源文件编码,也没有问题:甚至查看了Console字符编码相关的注册表,依然没有发现问题. ...
- php-5.6.26源代码 - 如何用C语言支持“类似异常”机制
代码编写在文件php-\Zend\zend.h #define zend_bailout() _zend_bailout(__FILE__, __LINE__) #ifdef HAVE_SIGSETJ ...
- Android内购订单验证 --- nodejs实现
主代码: function AndroidPlayVerify(inappPurchaseData, inappDataSignature) { let verify = crypto.createV ...
- Storm: 集群安装和配置
前期准备:3台服务器: 192.168.8.94 192.168.8.95 192.168.8.96 去storm官网下载响应版本的软件包:http://storm.apache.org/downl ...