一、什么是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">

       &nbsp; 静夜思<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.框架标签

框架标签不能写在<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的开发者 ...

随机推荐

转: windows 10使用原生linux bash命令行
转: https://www.zybuluo.com/pandait/note/337430 windows 10使用原生linux bash命令行 linux bash windows-10 第一时 ...
关于webpack.optimize.CommonsChunkPlugin的使用二
Note:当有多个入口节点的时候,只有所有入口节点都引入了同一个模块的时候,webpack.optimize.CommonsChunkPlugin才会将那个模块提取出来,如果其中一个入口节点没有引入该 ...
IE8以下不支持getElementsByClassName方法
function getElementsByClassName(classStr,tagName,element){ tagName = (tagName || '*'); element = (el ...
mysql密码遗忘和登陆报错问题
mysql登录密码忘记,其实解决办法很简单,只需要在mysql的主配置文件my.cnf里添加一行"跳过授权表"的参数选择即可! 在my.cnf中添加下面一行:[root@test- ...
javascript数组对象排序
javascript数组对象排序 JavaScript数组内置排序函数 javascript内置的sort函数是多种排序算法的集合 JavaScript实现多维数组.对象数组排序,其实用的就是原生的s ...
AAL模版中英文对照
来源:http://52brain.com/thread-17336-1-1.html Brodmann分区是一个根据细胞结构将大脑皮层划分为一系列解剖区域的系统.神经解剖学中所谓细胞结构(Cytoa ...
windows Server 2008各版本区别详解
Windows Server 2008 是专为强化下一代网络.应用程序和 Web 服务的功能而设计,是有史以来最先进的 Windows Server 操作系统.拥有 Windows Server 20 ...
设置word里的代码格式,使之有底纹的效果
目录 1 实现效果: 1 2 怎么才能在word里实现这样的显示? 1 如何设置word里的代码格式,使之有底纹的效果 2 实现效果: 怎么才能在word里实现这 ...
RSA签名验签学习笔记
RSA私钥签名时要基于某个HASH算法,比如MD5或者SHA1等.之前我一直认为签名的过程是:先对明文做HASH计算,然后用私钥直接对HASH值加密.最近才发现不是那么简单,需要对HASH后的数据进行 ...
LINQ基础概述
介绍LINQ基础之前,首说一下LINQ 的历史和LINQ是什么,然后说一下学习 LINQ要了解的东西和 LINQ基础语法 LINQ 的历史从语言方面的进化 –委托 –匿名方法 –Lambda表达 ...

Html一天入门

一、什么是HTML

二、常见标签

Html一天入门的更多相关文章

随机推荐

热门专题