第十二篇：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:如何制作一个公 ...
随机推荐
- 转 IOS7开发错误收集
转自:http://blog.csdn.net/smallsky_keke/article/details/16117653 1. fatal error: file '/Applications/X ...
- Qt.5.9.6移植
工具及软件包 交叉编译工具链 arm-2014.05-29-arm-none-linux-gnueabi-i686-pc-linux-gnu.tar.bz2 软件包 dbus-1.10.0.tar.g ...
- Centos下使用Docker部署MySql
本文讲述 CentOS 系统 Docker 中安装 MySql 的过程 步骤 1. 拉取 Docker Hub 官方提供的mysql镜像 docker pull mysql:5.7 2.运行容器 do ...
- Servlet学习笔记05——什么是jsp？
1. jsp (java server page) (1)jsp是什么? sun公司制订的一种服务器端动态页面技术规范. 注: 因为虽然使用servlet也可以生成动态页面, 但是过于繁琐(需要使用o ...
- hadoop-2.0.0-cdh4.1.2升级到hadoop-2.7.2
升级前准备: 如果是 centos6.x的系统得升级glibc和pam包 在/etc/ld.so.conf 文件里添加 /usr/src/jdk1.6.0_23/jre/lib/amd64/serve ...
- scrapy--selenium(二)
今天学习了很多,还是想给大家讲一讲正题:scrapy的动态加载AJax的网页爬取:selenium.让我们开始 三: 针对大型电商网站:京东网,因为比较有代表性,爬出来有点小成就.先给大家看下效果图. ...
- C# 创建新线程
首先需要包含命名空间 using System.Threading; 然后创建进程 Thread th = new Thread(new ThreadStart(ThreadMethod)); //创 ...
- 003---wsgi和wsgiref模块
WSGI: 全称:Web Server Gatway Interface ,web服务网关接口,独立的,与django无关,他们俩只是遵循一个约定,是一个协议. wsgiref模块: 实现了WSGI协 ...
- mysql in和exists性能比较和使用【转】
exists对外表用loop逐条查询,每次查询都会查看exists的条件语句,当 exists里的条件语句能够返回记录行时(无论记录行是的多少,只要能返回),条件就为真,返回当前loop到的这条记录, ...
- STM8 输出比较极性
PWM输出的信号极性有两个选项决定,一个选项是PWM模式,另一个选项是输出极性控制位. 请看定时器的框图,PWM模式的选择决定OC1REF的极性, 例如当选择PWM1模式时,OC1REF信号是&quo ...