Html一天入门
一、什么是HTML
1.html：
HyperText Markup Language 超文本标记语言，是最基础的网页语言，而且都是由标签组成。
2.基本格式：
<html>
<head>
放置一些属性信息，辅助信息。
引入一些外部的文件。（css，javascript）
它里面的内容会先加载。
</head>
<body>
存放真正的数据。
</body>
</html>
3.注意事项
1）多数标签都是有开始标签和结束标签，其中有个别标签因为只有单一功能，或者没有要修饰的内容可以在标签内结束。
2）想要对被标签修饰的内容进行更丰富的操作，就用到了标签中的属性，通过对属性值的改变，增加了更多的效果选择。
3）属性与属性值之间用“=”连接，属性值可以用双引号或单引号或者不用引号，一般都会用双引号。或公司规定书写规范。
二、常见标签
1.排版标签
1）换行 <br/>
2）<p></p> 段落标签 在开始和结束的位置上会留一个空行。
属性：align= 对齐方式
3）<hr /> 一条水平线
属性：
1）宽度：width 值像素 100px 可以写百分比 30%
2）align= 对齐方式
3）size 粗细
4）color 值 red green blue RGB 三原色 (red green blue #aa55ff)
4）div 声明一块区域 <div>数据</div> css+div
5）span 声明一块区域
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>排版标签</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body>
这是一首古诗。
<hr width="300px" size="20px;" color="red"/>
<p align="center">
静夜思<br/>
床前明月光，<br/>
疑是地上霜。<br/>
举头望明月，<br/>
低头思故乡。<br/>
</p>
一首非常出名的古诗。 <hr/>
<div>这是div区域1</div>
<div>这是div区域1</div>
<span>这是span的区域1</span>
<span>这是span的区域2</span>
</body>
</html>
显示：
2.字体标签
1）<font>文本内容</font>
属性：
1）size 字号的大小 最大值是7 最小值是1
2）color 颜色
3）face 字体
2）标题标签
<h1></h1>
...
<h6></h6>
从大到小字体缩小。
3）<B></B>粗体
4）<I></I>斜体
标签支持嵌套
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>字体标签</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body>
<h2>排版标签</h2>
<font size="7">文本内容</font><br/>
<font size="10">文本内容</font><br/> <hr/> <h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6> <hr/> <b><i>这是粗体又是斜体</i></b>
<I>这是斜体</I> </body>
</html>
显示:
3.列表标签
1）dl 列表标签
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>特点：自动对齐，自动缩进。
</dl>
2）有序列表和无序列表
有序：<ol>
type：列表前序标号
start：从第几个开始。
无序：<ul>
数据条目：<li>数据内容</li>
<li><a href="后台的路径">用户管理</a></li>
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>列表标签</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body>
<h3>列表标签</h3>
<dl>
<dt>上层项目</dt>
<dd>下层项目</dd>
<dd>下层项目</dd>
<dd>下层项目</dd>
</dl> <hr/> <h3>有序列表</h3>
<ol type="a" start="4">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol> <h3>无序列表</h3>
<ul type="square">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul> </body>
</html>
显示：
4.图片标签
<img >
属性：src="图片的路径"
width 显示图片的宽度
height 显示图片的高度
alt 图片的说明文字/Users/apple/Library/Containers/com.tencent.qq/Data/Library/Application Support/QQ/Users/.png
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>图片标签</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body>
<h3>图片标签</h3>
<img src="girl4.jpg" width="800px" height="600px" alt="啊，美女！"> </body>
</html>
显示：一个美女
5.超链接链接
<a></a>
作用：1）链接资源
href="" 必须指定 如果href的值不指定，默认是file文件的协议。只有自己指定协议，链接资源。如果href中指定的协议，浏览器不能解析，就会调用应用程序，可以解析的程序就可以打开。
2）定位资源
name 名称 专业术语 锚
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>超链接标签</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body>
<a href="http://www.baidu.com">百度</a><br/>
<a href="girl4.jpg">啊，美女！</a><br/>
<a href="mailto:xxx@sina.com">联系我们</a><br/>
<a href="http://www.xunlei.com/moves/bxjg.rmvb">变形金刚</a><br/>
<a href="thunder:23cwe2s@32sd==">变形金刚</a><br/> <hr/> <a name="top">顶部位置</a>
<hr/> 50年前，长沙镖子岭。 四个土夫子正蹲在一个土丘上，所有人都不说话，直勾勾地盯着地上那把洛阳铲。 <hr/> <a name="center">中间位置</a>
<hr/> 50年前，长沙镖子岭。 四个土夫子正蹲在一个土丘上，所有人都不说话，直勾勾地盯着地上那把洛阳铲。 <hr/> <a href="#top">回到顶部</a>
<a href="#center">回到中间</a>
<hr/> </body>
</html>
显示：这里可以多搞一些文字
6.表格标签（重点）
作用：格式化数据
<table></table> 声明一个表格
属性：
1）边框 border
2）width 宽度
3）文字与内边框的距离 cellpadding
<tr></tr> 行
属性：
1）align 对齐方式（文本内容）
<td></td>
属性：
1）width
2）height
3）colspan 列合并单元格
4）rowspan 行合并单元格
<th></th> 会加粗 并且会居中。
<caption> 表格的标题
colspan 合并行， rowspan合并列
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>表格标签</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body>
<!--
序号 姓名 性别
1 张三 女
--> <table border="1" width="400px" cellpadding="8" cellspacing="1">
<caption>用户列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>女</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table> <hr/> <table border="1" width="400px" cellpadding="8" cellspacing="1">
<caption>用户列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr align="center">
<td>1</td>
<td>张三</td>
<td>女</td>
</tr>
<tr align="center">
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<tr align="center">
<td colspan="3">
人数总计：<font color="red">2人</font>
</td>
<!-- <td></td>
<td></td> -->
</tr>
</table> <hr/> <table border="1" width="400px" cellpadding="8" cellspacing="1">
<tr>
<td rowspan="3">
<img src="bx.jpg" width="150px" height="200px">
</td>
<td>
商品信息：冰箱
</td>
</tr>
<tr>
<!-- <td></td> -->
<td>
商品价格：2999
</td>
</tr><tr>
<!-- <td></td> -->
<td>
<img src="gwc.png">
</td>
</tr>
</table> </body>
</html>
显示：
7.表单标签（重点）
作用：可以和服务器进行交互。
输入项的内容 用户名 密码
<form></form>
属性：action="提交的请求位置"
method 提交方式（get和post） 如果method没有写默认是get方式提交。
get和post区别：
1）get方式表单封装的数据直接显示在url上。post方式数据不显示在url上。
2）get方式安全级别较低，post级别较高。
3）get方式数据的长度，post支持大数据。
** ?sex=on：
在每个输入的标签中指定name和value name必须指定
?username=haha&pwd=1223&sex=nv&jishu=html
<input />
属性：type 值可以指定很多的值，每一个不同的值代表的不同输入组件。
1）type=text 文本框
2）type=password 密码
3）type=radio 单选按钮
name属性
4）type=checkbox 多选按钮
单选和多选都有默认值：checked="checked"
5）type=reset 重置按钮
6）type=submit 提交按钮
7）type=file 上传文件的输入项
8）type=button 按钮
9）type=image 图片（也是提交按钮，）
10）type=hidden 隐藏标签（用户不用看到的，但是咱们开发时必须要使用的，可以把数据封装到隐藏标签中，和表单一起提交到后台）。
选择标签
<select></select>选择下拉框
文本域textarea
<textarea>文本内容</textarea>
8.框架标签
<frameset>
<frame>
</frameset>
框架标签不能写在<body>的内部。body不能写在frameset的上面。
代码：
left.html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>left.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body>
<ul>
<li><a href="http://www.baidu.com" target="right">百度</a></li>
<li><a href="http://www.sina.com" target="right">新浪</a></li>
</ul>
</body>
</html>
right.html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>right.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body>
<font color="green" size="7">北京欢迎您！！</font> </body>
</html>
top.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>顶部logo</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body>
<img src="../girl4.jpg" height="160"/> </body>
</html>
09-htmldemo.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>框架标签</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <frameset rows="160,*">
<frame src="top.html" name="top">
<frameset cols="180,*">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset>
</frameset> <body> </body>
</html>
显示：注意这里的frameset
代码下载地址：
https://github.com/BigShow1949/02-HTML-CSS
Html一天入门的更多相关文章
- Angular2入门系列教程7-HTTP（一）-使用Angular2自带的http进行网络请求
上一篇:Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数 感觉这篇不是很好写,因为涉及到网络请求,如果采用真实的网络请求,这个例子大家拿到手估计还要自己写一个web ...
- ABP入门系列（1）——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- Oracle分析函数入门
一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...
- Angular2入门系列教程6-路由（二）-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数
上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...
- Angular2入门系列教程4-服务
上一篇文章 Angular2入门系列教程-多个组件,主从关系 在编程中,我们通常会将数据提供单独分离出来,以免在编写程序的过程中反复复制粘贴数据请求的代码 Angular2中提供了依赖注入的概念,使得 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
随机推荐
- ESXi 5.5 命令行克隆虚拟机
1. 开启ESXi的SSH功能,用vSphere Client登录ESXi, 选中服务器, 在右侧标签栏选择Configuration->SecurityProfile->Services ...
- Linux虚拟机突然不能上网了
之前是可以的,然后这次打开突然不能上网了. 更改配置后就好了: 配置如下: 我的问题是打开打开之后变成了OFF不是ON了.然后不管怎么改变O都失败了. 改为: 这样虚拟机这边就好了. 我们看下wind ...
- 快速排名 让人疯狂的黑帽seo技术
对于黑帽seo大家或许并不陌生,黑帽seo和白帽seo恰恰相反,是作弊手段.有白帽seo的时候,就有了黑帽seo一直到现在.但隔行如隔山这句话这句话一点都没错,再没接触黑帽seo技术之前我根本不知道黑 ...
- 二叉树的遍历（递归，迭代，Morris遍历）
二叉树的三种遍历方法: 先序,中序,后序,这三种遍历方式每一个都可以用递归,迭代,Morris三种形式实现,其中Morris效率最高,空间复杂度为O(1). 主要参考博客: 二叉树的遍历(递归,迭代, ...
- docker 镜像导入导出
导出(Export) Export命令用于持久化容器(不是镜像).所以,我们就需要通过以下方法得到容器ID: sudo docker ps -a 接着执行导出: sudo docker export ...
- 简单谈谈dom解析xml和html
前言 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.html,xml都是基于这个模型构造的.这也是一个W3C推出的标准.j ...
- 读懂IL代码就这么简单 (一)
一前言 感谢 @冰麟轻武 指出文章的错误之处,现已更正 对于IL代码没了解之前总感觉很神奇,初一看完全不知所云,只听高手们说,了解IL代码你能更加清楚的知道你的代码是如何运行相互调用的,此言一出不明觉 ...
- 快速备份和还原 MySQL 数据库的另一种方法
一直使用 SQL Server 作为公司产品的数据库来存储系统数据,所以备份还原一直都不是问题,因为 SQL Server 的备份还原非常迅速和易用.但今年公司改变策略,使用起 MySQL 数据库作为 ...
- dev gridcontrol纵向合并单元格设置
1.要设置gridcontrol中指定列(columns中选中指定列)的AllowMerge属性为true; 2.要设置gridview中AllowCellMerge的属性为true; 3.如果只合并 ...
- socket.io简单说明及在线抽奖demo
socket.io简单说明及在线抽奖demo socket.io 简介 Socket.IO可以实现实时双向的基于事件的通信. 它适用于各种平台,浏览器或设备,也同样注重可靠性和速度. socket.i ...