第十二篇：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:如何制作一个公 ...
随机推荐
- python之字典的书写
python之字典 1.字典的说明定义:字典是另一种可变容器模型,且可存储任意类型对象,他是由key:value键值对组成的. 2.字典的代码2.1.字典的定义 >>> a = di ...
- python生成xml文件
先上代码: #!/usr/bin/env python3 # _*_ coding: utf-8 _*_ from xml.dom.minidom import Document def readFi ...
- git 常用命令及仓库创建
一.常用命令 1.添加到本地仓库缓存 git add . 2.查看本地仓库状态 git status 3.提交到本地仓库 git commit -am 'project init' 4.连接线上分支 ...
- 红帽CentOS7 密码破解
1.在启动的时候按住方向键停留在内核选项页面,在内核选项出按e键 2.进入到另一个页面后,寻找到以linux16开头的地方,按end到行后,输入空格,然后输入rd.break console=tty0 ...
- 设置vim tab为4个空格
Vim 编辑器默认tab为8个空格,但对于pythoner来说,必须要调整到4个空格. 方法如下: 在~/.vimrc文件中加入下面设置: set ts=4 #设置tabstop为4个空格 set e ...
- 开发工具cfree安装报错解决
报错如下: [ --------------------配置: mingw5 - CUI Debug, 编译器类型: MinGW-------------------- 检查文件依赖性... 正在编译 ...
- python__基础 : 类的继承,调用父类的属性和方法
1.继承,调用父类属性方法 在python里面,继承一个类只需要这样写: class Animal: def heshui(self): print('动物正在喝水') class Cat(Anima ...
- <Docker学习>3. docker镜像命令使用
镜像提供容器运行时所需要的程序,资源.配置文件等,是一个特殊的文件系统.是容器运行的基础.镜像是多层文件系统组成的,是一个分层存储的架构,在镜像的构建中,会一层层的构建,每一层构建完成就不会发生改变, ...
- Requests库：python实现的简单易用的http库
1.get请求: get(url, params, headers) 2.json 解析 3.content 获取二进制内容 4.headers 添加 5.post请求:post(url,data,h ...
- list函数及list对象的reverse方法
list的reverse方法,是就地reverse,不返回值 如a是一个list,a.reverse()直接将a这个list给reverse了,所以如果print(a.reverse())就是None ...