整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
HTML简介
HTML是用来描述网页的一种语言，它是一种超文本标记语言，由一套标记标签组成，在制作网页时，HTML使用标记标签来描述网页。
发展史
HTML：Hyper Text Markup Language超文本标记语言
超文本标记语言—在1993年6月互联网工程工作小组工作案发布（并非标准）
HTML2.0—1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布过时。
HTML3.2—1996年1月14日，W3C推荐标准
HTML4.0—1997年12月18日，W3C推荐标准
HTML4.01（微小改进）—1999年12月24日，W3C推荐标准，2000年5月15日发布基本严格的HTML4.01语法，是国标标准化组织和国际电工委员会的标准
XHTML1.0—发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布
XHTML1.1—2001年5月31日发布
XHTML2.0是W3C的工作草案，由于改动过大，学习这个新技术的成本过高而最终胎死腹中，因此，现在最常用的还是XHTML1.0标准。
目前最新的版本为HTML5，它是2004年被提出，2007年被W3C接纳并成立新的HTML工作团队，
2008年1月22日公布HTML5第一份正式草案，
2012年12月17日HTML5规范正式定稿，
2013年5月6日，HTML5.1正式草案公布。
HTML 5作为最新版本，提供了一些新的元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则的建立，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。目前企业开发中也在增大使用HTML5的力度
HTML的优势
h1~h6
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题标签</title> </head> <body> <h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3> <h4>这是四级标题</h4> <h5>这是五级标题</h5> <h6>这是六级标题</h6> <h7>这是七级标题</h7>效果怎么显示不出来呢？？？ <h1>这是一级标题</h1> </body> </html> |
浏览器预览效果
p标签为段落标签，br标签为换行标签
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落和换行标签</title> </head> <body> <h1>北京欢迎你</h1> <p>北京欢迎你，<br>为你开天辟地</p> <p>北京欢迎你，<br/>有有勇气就会有奇迹</p> </body> </html> |
浏览器预览效果图
hr标签为水平线标签
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>水平线标签</title> </head> <body> <h1>漂洋过海来看你</h1> <hr> <p>为你我用了半年的积蓄，<br>漂洋过海来看你</p> <hr/> </body> </html> |
浏览器预览效果图
em为斜体标签，strong为字体加粗标签
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体样式标签</title> </head> <body> <h1>漂洋过海来看你</h1> <hr> <p>为你我用了<em>2017</em>半年的<strong><em>积蓄</em></strong>，<br> <em><strong>漂洋过海</strong></em>来看你 </p> <hr/> </body> </html> |
浏览器预览效果图
注释使用：<!--被注释的内容-->
大于号：> great than的缩写
小于号：< less than的缩写
双引号：""
版权符号：©
空格：
源代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注释和特殊符号</title> </head> <body> <pre> 注释使用：<!--被注释的内容--> 大于号：> great than的缩写 小于号：< less than的缩写 双引号："" 版权符号：© 空格： </pre> <!-- 我是被注释的内容，我只留给你们看，不会在页面上显示 --> 5<10>6 <br> "我是被双引号引起来的内容"<br> ©自由职业开发者公司<br> 我是 测试 空 格的 </body> </html> |
浏览器预览效果图
以上就是HTML的简单入门，后续带大家更深入的了解HTML
注释：<!-- -->
DOCTYPE：就是告诉浏览器，我们要使用什么规范
head：网页头部标签
body：代表网页主题
标题标签
段落标签
换行标签
水平线标签
字体样式标签
注释
特殊字符
特殊符号就是 & xxx ;
<img src="path" alt="文字" title="text" width="x" heigth="y" />
注意：../ 代表上一级目录
文本链接
<a href="path" target="目标窗口位置">链接文本或图像</a>
图像链接：就是嵌套图片标签
页面间链接
锚链接
功能性链接
块元素
行内元素
什么是列表：就是一种展示方式
有序列表
无序列表
自定义列表
<dl>
<dt></dt> 标题
<dd></dd> 选项
<dd></dd>
<dd></dd>
</dl>为什么使用表格
基本结构
<table border="1px" 边框>表格标签
<tr>
<td></td>列标签
<td></td>
<td></td>
</tr>行标签 这代表一行
</table>跨列：使用colspan="夸的列数" <td colspan="4">
跨行：使用rowspan="夸的行数" <td rowspan="4">
视频元素
音频元素
元素名 | 描述 |
header | 标题头部区域的内容(用于页面或页面中的一块区域) |
footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
section | web页面中的一块独立区域 |
atricle | 独立的文章内容 |
aside | 相关内容或应用(常用于侧边栏) |
nav | 导航类辅助内容 |
<iframe src="path" name="mainFrame"></iframe>
表单：form
<form method="post|get" action="result.hetml">
<input />
</form>get方式提交：我们可以在url中看到我们提交的信息，不安全，但高效
post方式提交：比较安全，可以传输大文件
表单元素格式
属性 | 说明 |
type | 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image、button默认为text |
name | 指定表单元素的名称 必填，用来后台读取 |
value | 元素的初试值。type为radio时必须指定一个值 |
size | 指定元素的初始宽度。当type为text时或者password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位 |
maxlength | type为txet或password时，输入的最大字符数 |
cheaked | type为radio或cheackbox时，指定按钮是否被选中 |
单选框
多选框
按钮
<input type="button" name="btn1" value="点击" />普通按钮
<input type="image" src ="点击跳转的path"/>图片按钮
<input type="submit"/>提交按钮
<input type="reset"/>重置按钮下拉框
<select name="列表名称">
<option value="选项的值" select>中国</option>
<option value="选项的值">中国</option>
<option value="选项的值">中国</option>
<option value="选项的值">中国</option>
<option value="选项的值">中国</option>
</select>
提交的格式就是列表名称和value文本域
<textarea name="name" cols="列数" rows="行数">文本内容</textarea>文件域
<input type="file" name="files"/>
<input type="button" value="提交"/>邮件验证
<input type="email" name="youjian">URL
<input type="url" name="url"> 数字验证
<input type="number" name="num" max="100" min="0" step="10">滑块
<input type="range" max="100" min="0">搜索
<input type="search" name="search">隐藏域 hidden
<input type="text" id="mark" hidden>只读 readonly
<input type="text" id="mark" readonly>禁用 disabled
<input type="text" id="mark" disabled>增强鼠标可用性
<label for="mark">点击</label>
<input type="text" id="mark">为什么要进行表单验证：缓解服务器压力、保证数据安全
提示信息
非空判断
正则表达式验证
高级验证使用js
TML标签：
所有内容都在<html></html>标签之内；
<head></head>内放的是头部信息，是对页面的描述，不会直接显示在页面中。
<head></head>内的<title></title>中设置的是页面的标题，<title></title>只能放在<head></head>中；
<body></body>是页面的主体，大部分显示内容都定义在这里。
HTML注释：<!-- -->：
注释不允许嵌套
html常用标签:
h标签（标题），HTML定义了<h1></h1>到<h6></h6>六个h标签，分别表示不同大小的字体。h1最大，h6最小。
<br/>只是回车，<p>是段落。<p>前后会有比较大的空白，而<br/>则没有。
<center>居中显示.
<b>、<strong>粗体，<i>、<em>斜体。<u>下划线。
<sub>2</sub>下标，如：H<sub>2</sub>O
<sup>2</sup>上标，如：10<sup>2</sup>
<font></font>字体标签，<font color=“red“ size=“7” face=“隶书”>红色</font>。color（设置颜色） size（1-7） face（设置字体,设置字体是注意用户计算机中必须有该字体才能正常显示）
<hr> color size（厚度） width（长度） align=left/center/right （默认为剧中显示）
<pre> 预格式化 保持本色;
HTML特殊字符：<（小于号，less than）；>（大于号，greater than）； （空格）。
超链接：<a>标签的一些常用属性：href、title、target、name
插入图片：<img src=“路径”/>
列表：dl→(定义列表)，ul→(无序列表)， ol→(有序列表)。
表格：<table>；创建行：<tr>；创建单元格：<td>；表页眉：<thead>；表主体：<tbody>；表页脚：<tfoot>；表头：<th>。
rowspan(合并行)、colspan（合并列）
<input>是主要的表单元素，type的可选值：submit（提交按钮）、button（普通按钮）、checkbox表单标签：（复选框）、file（文件选择框）、hidden（隐藏字段）、image（图片按钮）、password（密码框）、radio（单选按钮）、reset（重置按钮）、text（文本框）。
meta标签：（包括在head标签中。主要用来描述页面自身信息,元信息）
<meta name="keywords" content="C#学习资料,4k8k.net,.net开发,软件开发,编程自学网"/>
<meta name="description" content="免费更新最新C#相关技术知识，主要包括：.net基础,网页前端,三层架构,SQL数据库..."/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />网页编码
<meta http-equiv="Refresh" content="3" />三秒钟后刷新此网页。
<meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒钟后重定向到新网页。
<meta http-equiv="Cache-Control" content="no-cache" /> 禁止浏览器缓存页面。
<meta name="名字" content="值" />关于网页的描述信息。
<meta http-equiv="名字" content="值" />模拟http响应头信息。
C#编程自学_做最好的.net自学资料站_更多文章请访问：http://www.4k8k.net/
欢迎订阅。
*请认真填写需求信息，我们会在24小时内与您取得联系。
