一、HTML的介绍

HTML(HyperText Markup Language)超文本标记语言，不是一种编程语言，而是一种描述性的标记语言，用于描述超文本的内容的显示，比如字体颜色或者大小。

HTML是最基础的网页语言，它是通过标签定义的语言，代码是由标签所组成的。

<!DOCTYPE html>

<html>

	<head>

		<!--

		  1.放置一些属性信息，辅助信息。

		  2.引入一些外部的文件(css js)。

		  3.它里面的内容会先加载。

		 -->

		<meta charset="UTF-8" />

		<title>这是HTML标题</title>

	</head>

	<body>

		<font color="red">这是网页正文</font> 

	</body>

</html>

二、HTML标签的使用

1.排版标签

(1)<br/>

换行。

(2)<p></p>

段落标签，在开始和结束的位置上留一个空行。

属性: align="left/center/right"对齐方式。

(3)<hr/>

一条水平线。

(4)div

声明一块区域。

(5)span

声明一块区域。

<!DOCTYPE html>

<html>

  <head>

    <title>HTML学习</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  </head>

  <body>

  	---------------------p标签测试---------------------

  	<p>

  		 HTML(HyperText Markup Language)超文本标记语言，不是一种编程语言，而是一种描述性的标记语言，用于描述超文本的内容的显示，比如字体颜色或者大小。

  	</p>

  	---------------------hr标签测试---------------------

  	<hr align="left" width="50%"/>

  	---------------------div标签测试---------------------<br>

    <div>这是div区域1</div>

    <div>这是div区域2</div>

    ---------------------span标签测试---------------------<br>

    <span>这是span区域1</span>

    <span>这是span区域2</span>

  </body>

</html>

结果:

2.字体标签

(1)<font></font>

中间放文字，设置文字的颜色大小。

sieze:字号大小最大值7，最小值1。

(2)标题标签

……字体从大到小……

(3)<b></b>

粗体。

(4)<i></i>

斜体。

3.列表标签

数据对齐格式化。

(1)<ol></ol>

有序列表。

(2)<ul></ul>

无序列表。

<!DOCTYPE html>

<html>

<head>

<title>HTML学习</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

	<h2>有序列表</h2>

	<ol type="a">

		<li>AAA</li>

		<li>BBB</li>

		<li>CCC</li>

	</ol>

	<h2>无序列表</h2>

	<ul>

		<li>AAA</li>

		<li>BBB</li>

		<li>CCC</li>

	</ul>

</body>

</html>

结果:

4.图片标签

<img />

属性:

src: 文件的位置。

width:文件宽度。

height: 文件高度。

alt: 文件的说明文字。

5.超链接标签

<a></a>

(1)链接资源

href="" 必须指定协议，默认为file文件协议。

(2)定位资源

name 锚点

<a name="top">顶部</a>

<a name="center">中间</a>

<a href="#top">回到顶部</a>

6.表格标签

<!DOCTYPE html>

<html>

<head>

<title>HTML学习</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

	<table border="1" width="50%" align="center" cellpadding="8">

		<caption>用户列表</caption>

		<tr>

			<th>姓名</th>

			<th>性别</th>

			<th>年龄</th>

		</tr>

		<tr align="center">

			<td>AAA</td>

			<td>男</td>

			<td>22</td>

		</tr>

		<tr align="center" >

			<td>BBB</td>

			<td>女</td>

			<td>21</td>

		</tr>

		<tr align="center" >

			<td colspan="3">

				人数总计:

			</td>

		</tr>

	</table>

</body>

</html>

结果:

7.表单标签

<form></form>

(1)form标签中常见的属性

action: 指定表单组件数据发送的位置。如果没有定义action属性，那么默认提交到当前页面。

method: 定义表单提交的方式。只有两种常用 get post.如果没有指定method，默认就是get提交方式。

(2)input标签中type的类型如下

文本框 text。输入的文本信息直接显示在框中。

密码框 password。输入的文本以原点或者星号的形式显示。

单选框 radio 复选框 checkbox 如：兴趣选择。

隐藏字段 hidden 在页面上不显示，但在提交的时候随其他内容一起提交。

提交按钮 submit 用于提交表单中的内容。

重置按钮 reset 将表单中填写的内容设置为初始值。

按钮 button 可以为其自定义事件。

文件上传 file 后期扩展内容，会自动生成一个文本框，和一个浏览按钮。

(3)两个特殊的

A:<select>

选择标签提供用户选择内容。如：用户所在的省市。size 属性为显示项目个数。

<option>:子项标签属性 selected 没有属性值，加在子项上，其中一个子项上，子项就变成默认被选项。

B: <textarea>

多行文本框。如：个人信息描述。

HTML基础学习(一)—HTML的更多相关文章

salesforce 零基础学习（五十二）Trigger使用篇（二）
第十七篇的Trigger用法为通过Handler方式实现Trigger的封装,此种好处是一个Handler对应一个sObject,使本该在Trigger中写的代码分到Handler中,代码更加清晰. ...
如何从零基础学习VR
转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 近期很多搞技术的朋友问我,如何步入VR的圈子?如何从零基础系统性的学习VR技术? 本人将于2017年1月 ...
IOS基础学习-2: UIButton
IOS基础学习-2: UIButton UIButton是一个标准的UIControl控件,UIKit提供了一组控件:UISwitch开关.UIButton按钮.UISegmentedContro ...
HTML5零基础学习Web前端需要知道哪些？
HTML零基础学习Web前端网页制作,首先是要掌握一些常用标签的使用和他们的各个属性,常用的标签我总结了一下有以下这些: html:页面的根元素. head:页面的头部标签,是所有头部元素的容器. b ...
python入门到精通[三]:基础学习(2)
摘要:Python基础学习:列表.元组.字典.函数.序列化.正则.模块. 上一节学习了字符串.流程控制.文件及目录操作,这节介绍下列表.元组.字典.函数.序列化.正则.模块. 1.列表 python中 ...
python入门到精通[二]:基础学习(1)
摘要:Python基础学习: 注释.字符串操作.用户交互.流程控制.导入模块.文件操作.目录操作. 上一节讲了分别在windows下和linux下的环境配置,这节以linux为例学习基本语法.代码部分 ...
CSS零基础学习笔记.
酸菜记之 CSS的零基础. 这篇是我自己从零基础学习CSS的笔记加理解总结归纳的,如有不对的地方,请留言指教, 学前了解: CSS中字母是不分大小写的; CSS文件可以使用在各种程序文件中(如:PH ...
Yaf零基础学习总结5-Yaf类的自动加载
Yaf零基础学习总结5-Yaf类的自动加载框架的一个重要功能就是类的自动加载了,在第一个demo的时候我们就约定自己的项目的目录结构,框架就基于这个目录结构来自动加载需要的类文件. Yaf在自启动的 ...
Yaf零基础学习总结4-Yaf的配置文件
在上一节的hello yaf当中我们已经接触过了yaf的配置文件了, Yaf和用户共用一个配置空间, 也就是在Yaf_Application初始化时刻给出的配置文件中的配置. 作为区别, Yaf的配置 ...
qml基础学习 Canvas画笔
一.画布元素自qt4.7发布qml以来,qml也在一直不断的完善中,在qt4时代使用qml时如果需要异形图,那我们只能让设计师来切图,这样的感觉是很不爽的,总感觉开发没有那么犀利.但是到了qt5这一 ...

随机推荐

Java重写equals()和hashCode()
1.何时需要重写equals() 当一个类有自己特有的 ”逻辑相等”概念(不同于对象身份的概念). 2.设计equals() [1]使用instanceof操作符检查 ”实参是否为正确的类型”. [2 ...
MySQL两种引擎的区别
Innodb引擎 Innodb引擎提供了对数据库ACID事务的支持,并且实现了SQL标准的四种隔离级别.该引擎还提供了行级锁和外键约束,它的设计目标是处理大容量数据库系统,它本身其实就是基于MySQL ...
WebStorm 自定义字体+颜色+语法高亮+导入导出用户设置
WebStorm :是jetbrains公司旗下一款JavaScript 开发工具.被广大中国JS开发者誉为“Web前端开发神器”.“最强大的HTML5编辑器”.“最智能的JavaScript IDE ...
安全体系（二）——RSA算法详解
本文主要讲述RSA算法使用的基本数学知识.秘钥的计算过程以及加密和解密的过程. 安全体系(零)—— 加解密算法.消息摘要.消息认证技术.数字签名与公钥证书安全体系(一)—— DES算法详解 1.概述 ...
Java系统属性与Preferences API的简单介绍
系统属性在和Preferences API都是键值对,前者只能当前应用程序中共享数据,而后者可以在用户的各个应用或用户之间共享数据. 系统属性 Java 的系统属性决定了 Java 程序实际运行的环境 ...
[HDUOJ1312]Red And Black (经典的DFS)
Hot~~招聘——亚信科技,巴卡斯(杭州),壹晨仟阳(杭州),英雄互娱(杭州) (包括2016级新生)除了校赛,还有什么途径可以申请加入ACM校队? Red and Black Time Limit: ...
Strtus2 S2-045漏洞
S2-045漏洞已经爆发几天了,但还很多网址都存在此漏洞,很多金融类网站也收到了保护费通知...唉,收保护费少,报警无效!只能酌情处理了!做黑产的,还是少做为秒,常在河边站哪有不湿鞋,劝各位早日金盆洗 ...
每天一个Linux命令 1
nl命令在Linux系统中用来计算文件中行号.nl可以将输出的文件内容自动的加上行号!其默认的结果与cat -n有点不太一样,nl可以将行号做比较多的显示设计,包括位数与是否自动补齐0等等的功能. 1 ...
算法模板——Dinic网络最大流 1
实现功能:同sap网络最大流今天第一次学Dinic,感觉最大的特点就是——相当的白话,相当的容易懂,而且丝毫不影响复杂度,顶多也就是代码长个几行主要原理就是每次用spfa以O(n)的时间复杂度预处 ...
wx模块小实例
功能介绍: 查询数据库表数据,提取数据并显示 main.py(执行文件) #coding:gbk __author__ = 'Hito' import querySmscode import wx c ...

HTML基础学习(一)—HTML