整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
html概述
HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
html基本结构
一个html的基本结构如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> 网页显示内容 </body> </html>
第一行是文档声明，第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang=“zh-CN”’,不定义也没什么影响，它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。
HTML文档类型
目前常用的两种文档类型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一个常用的版本，目前许多网站仍然使用此版本。
此版本文档用sublime text创建方法： html:xt + tab
文档示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title> xhtml 1.0 文档类型 </title> </head> <body> </body> </html>
html5
pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的
此版本文档用sublime text创建方法： html:5 + tab 或者 ! + tab
文档示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文档类型 </title> </head> <body> </body> </html>
两种文档的区别
1、文档声明和编码声明
2、html5新增了标签元素以及元素属性
html注释：
html文档代码中可以插入注释，注释是对代码的说明和解释，注释的内容不会显示在页面上，html代码中插入注释的方法是：
<!-- 这是一段注释 -->
通过
、
、
、
、
,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说：
，再其次是
，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。
<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3>
html段落标签
标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超 文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的 标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。 </p> <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方 式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网 页可以从一个网页链接跳转到另外一个网页。</p> </body> </html>
html换行标签
代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入
来强制换行，代码如下：
<p> 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br /> 文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br /> 渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。 </p>
html字符实体
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：
<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： --> <p> 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br /> 文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br /> 渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：
<!-- “<” 和 “>” 的字符实体为 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
html块标签
1、
标签 块元素，表示一块内容，没有具体的语义。
2、 标签 行内元素，表示一行中的一小段内容，没有具体的语义。
含样式和语义的标签
1、 标签 行内元素，表示语气中的强调词
2、 标签 行内元素，表示专业词汇
3、 标签 行内元素，表示文档中的关键字或者产品名
4、 标签 行内元素，表示非常重要的内容
语义化的标签
语义化的标签，就是在布局的时候多使用有语义的标签，搜索引擎在爬网的时候能认识这些标签，理解文档的结构，方便网站的收录。比如：h1标签是表示标题，p标签是表示段落，ul、li标签是表示列表，a标签表示链接，dl、dt、dd表示定义列表等，语义化的标签不多。
html图像标签
标签可以在网页上插入一张图片，它是独立使用的标签，它的常用属性有：
src属性 定义图片的引用地址
alt属性 定义图片加载失败时显示的文字，搜索引擎会使用这个文字收录图片、盲人读屏软件会读取这个文字让盲人识别图片，所以此属性非常重要。
<img src="images/pic.jpg" alt="产品图片" />
绝对路径和相对路径
像网页上插入图片这种外部文件，需要定义文件的引用地址，引用外部文件还包括引用外部样式表，javascript等等，引用地址分为绝对地址和相对地址。
绝对地址：相对于磁盘的位置去定位文件的地址
相对地址：相对于引用文件本身去定位被引用的文件地址
绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件，相对路径就没有这个问题。相对路径的定义技巧：
“ ./ ” 表示当前文件所在目录下，比如：“./pic.jpg” 表示当前目录下的pic.jpg的图片，这个使用时可以省略。
“ …/ ” 表示当前文件所在目录下的上一级目录，比如：“…/images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。
标签可以在网页上定义一个链接地址，它的常用属性有：
href属性 定义跳转的地址
title属性 定义鼠标悬停时弹出的提示文字框
target属性 定义链接窗口打开的位置
target="_self" 缺省值，新页面替换原来的页面，在原来位置打开
target="_blank" 新页面会在新开的一个浏览器窗口打开
HTML是用来开发网页的，它是开发网页的语言
全称HyperText Mark-up Language，超文本标记语言
标记就是标签
<标签名称></标签名称> 比如 <html></html> <h1></h1>等，标签大多数都是成对出现的。
超文本 两层含义：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
网页显示内容
</body>
</html>第一行<!DOCTYPE html>是文档声明
用来指定页面所使用的html的版本, 这里声明的是一个html5的文档
<html>...</html>标签是开发人员在告诉浏览器
整个网页是从<html>这里开始的，到</html>结束
也就是html文档的开始和结束标签
<head>...</head>标签用于定义文档的头部
是负责对网页进行设置标题、编码格式以及引入css和js文件的
<body>...</body>标签是编写网页上显示的内容
网页文件的后缀是.html, 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页
VS Code全拼是 Visual Studio Code 是由微软研发的一款免费、开源的跨平台代码编辑器
目前是前端(网页)开发使用最多的一款软件开发工具
下载网址: https://code.visualstudio.com/Download
选择对应的安装包进行下载:
安装一切默认
1 标签不区分大小写，但是推荐使用小写
2 根据标签的书写形式，标签分为双标签(闭合标签)和单标签(空标签) 2.1 双标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，比如: div标签 2.2 单标签是一个标签组成，没有标签内容， 比如: img标签
标签的使用形式
列表标签
网页效果
表格标签
<table>标签：表示一个表格
<tr>标签：表示表格中的一行
<td>标签：表示表格中的列
<th>标签：表示表格中的表头
属性设置
border: 1px solid black:设置边框和颜色
border-collapse: collapse:设置边框合并
网页效果
表单标签
表单用于搜集不同类型的用户输入的数据，然后可以把用户数据提交到web服务器
<form>标签 表示表单标签，定义整体的表单区域
一个表单中有很多信息组成,比如 姓名,爱好,地址等,这些内容有很多其他标签来承载
这些标签称为表单元素标签
网页效果
表单用于搜集不同类型的用户输入的数据，然后可以把用户数据提交到web服务器
两种方式的区别:
表单元素属性设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--
姓名 type="text" 定义单行文本输入框
密码 type="password" 定义密码输入框
性别 type="radio" 定义单选框
爱好 type="checkbox" 定义复选框
照片 type="file" 定义上传文件
个人描述 <textarea></textarea> 定义多行文本输入框
地址 <select></select> 定义下拉列表
提交 type="submit" 定义提交按钮
重置 type="reset" 定义重置按钮
按钮 type="button" 定义一个普通按钮
-->
<form action="http://192.168.1.106:8080" method="POST">
<label>姓名:</label>
<input type="text" name="username" >
<br>
<label>密码:</label>
<input type="password" name="password">
<br>
<label>性别:</label>
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="0">女
<br>
<label>爱好:</label>
<input type="checkbox" name="like" value="睡觉">睡觉
<input type="checkbox" name="like" value="吃饭">吃饭
<input type="checkbox" name="like" value="打豆豆">打豆豆
<br>
<label>照片:</label>
<input type="file" name="pic">
<br>
<label>个人描述:</label>
<textarea name="desc"></textarea>
<br>
<label>地址:</label>
<select name="addr">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
<option value="4">深圳</option>
</select>
<br>
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮">
</form>
</body>
</html>
点击提交：
可以看到服务器收到了请求报文。
单的 ASP.NET 页面看上去就像普通的 HTML 页面。
Hello RUNOOB.COM
在开始学习 ASP.NET 之前，我们先来构建一个简单的 HTML 页面，该页面将在浏览器中显示 "Hello RUNOOB.COM"：
Hello RUNOOB.COM! |
用 HTML 编写的 Hello RUNOOB.COM
下面的代码将以 HTML 页面的形式显示实例：
<html>
<body bgcolor="yellow">
<center>
<h2>Hello RUNOOB.COM!</h2>
</center>
</body>
</html>
如果您想亲自尝试一下，请保存上面的代码到一个名为 "firstpage.htm" 的文件中，并创建一个到该文件的链接：firstpage.htm。
用 ASP.NET 编写的 Hello RUNOOB.COM
转换 HTML 页面为 ASP.NET 页面最简单的方法是，直接复制一个 HTML 文件，并把新文件的扩展名改成 .aspx 。
下面的代码将以 ASP.NET 页面的形式显示实例：
<html>
<body bgcolor="yellow">
<center>
<h2>Hello RUNOOB.COM!</h2>
</center>
</body>
</html>
如果您想亲自尝试一下，请保存上面的代码到一个名为 "firstpage.aspx" 的文件中，并创建一个到该文件的链接：firstpage.aspx。
它是如何工作的？
从根本上讲，ASP.NET 页面与 HTML 是完全相同的。
HTML 页面的扩展名是 .htm。如果浏览器向服务器请求一个 HTML 页面，服务器可以不进行任何修改，就直接发送页面给浏览器。
ASP.NET 页面的扩展名是 .aspx。如果浏览器向服务器请求个 ASP.NET 页面，服务器在将结果发回给浏览器之前，需要先处理页面中的可执行代码。
上面的 ASP.NET 页面不包含任何可执行的代码，所以没有执行任何东西。在下面的实例中，我们将添加一些可执行的代码到页面中，以便演示静态 HTML 页面和动态 ASP 页面的不同之处。
经典 ASP
Active Server Pages (ASP) 已经流行很多年了。通过 ASP，可以在 HTML 页面中放置可执行代码。
之前的 ASP 版本（在 ASP.NET 之前）通常被称为经典 ASP。
ASP.NET 不完全兼容经典 ASP，但是只需要经过少量的修改，大部分经典 ASP 页面就可以作为 ASP.NET 页面良好地运行。
如果您想学习更多关于经典 ASP 的知识，请访问我们的 ASP 教程。
用经典 ASP 编写的动态页面
为了演示 ASP 是如何显示包含动态内容的页面，我们将向上面的实例中添加一些可执行的代码（红色字体标识）：
<html>
<body bgcolor="yellow">
<center>
<h2>Hello RUNOOB.COM!</h2>
<p><%Response.Write(now())%></p>
</center>
</body>
</html>
<% --%> 标签内的代码是在服务器上执行的。
Response.Write 是用来向 HTML 输出流中写东西的 ASP 代码。
Now() 是一个返回服务器当前日期和时间的函数。
如果您想亲自尝试一下，请保存上面的代码到一个名为 "dynpage.asp" 的文件中，并创建一个到该文件的链接：dynpage.asp。
用 ASP .NET 编写的动态页面
下面的代码将以 ASP.NET 页面的形式显示实例：
<html>
<body bgcolor="yellow">
<center>
<h2>Hello RUNOOB.COM!</h2>
<p><%Response.Write(now())%></p>
</center>
</body>
</html>
如果您想亲自尝试一下，请保存上面的代码到一个名为 "dynpage.aspx" 的文件中，并创建一个到该文件的链接：dynpage.aspx。
ASP.NET 对比经典 ASP
上面的实例无法演示 ASP.NET 与经典 ASP 之间任何的不同之处。
正如最后的两个实例中，您看不出 ASP 页面和 ASP.NET 页面两者之间的不同之处。
在下一章中，您将看到服务器控件是如何让 ASP.NET 比经典 ASP 更强大的。
*请认真填写需求信息，我们会在24小时内与您取得联系。
