整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
eb标准：
由于不同浏览器解析出来的网页效果可能不同，所以需要通过web标准对其进行约束使其一致，主要包括三个方面：
结构标准：
结构用于对网页元素进行整理和分类，主要指的是HTML。
表现标准：
表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：
行为是指网页模型的定义及交互的编写，主要指的是 JavaScript。
初识HTML：
html 全称 Hyper Text Markup Language ，中文译为：“超文本标记语言” ，描述网页的一种语言。
HTML发展：
XHTML 是一个 W3C 标准，可扩展超文本标签语言（EXtensible HyperText Markup Language），更严格更纯净的 HTML 版本，作为一种 XML 应用被重新定义的 HTML。
HTML中的注释：
<!-- 注释标签：注释的内容 -->条件注释：
条件注释的作用是：定义只有Internet Explorer才执行条件注释中的html标签。
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->HTML骨架：
<!DOCTYPE html> <!-- 声明文档类型版本为html5 -->
<html lang="en"> <!-- 网页的跟标签,lang=""用来设置网页语言，其值还有zh-CN中文简体、fr法语等，设置后当系统设置语言和网页语言发生冲突时会提示是否翻译网页 -->
<head> <!-- 网页的头部 -->
<meta charset='UTF-8'> <!-- 声明字符编码，其值还有gbk和gb2312 -->
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 开启移动端视口 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 开启ios快捷启动方式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 设置iOS顶部通栏样式 -->
<meta name="format-detection" content="telephone=no"> <!-- 遇到数字不转成电话号码 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是针对IE浏览器做兼容的，ie=edge表示兼容edge，若后面ie=7，则表示兼容IE7 -->
<meta name='keywords' content='This is a key words'> <!-- 网站搜索关键字 -->
<meta name='description' content='this is description'> <!-- 描述网站的信息 -->
<link rel="shortcut icon" type="image/x-icon" href="图片路径 "/> <!-- 网站的图标，如果图标是gif图，则需要改：type="image/gif"，引入网站图标另一种方法：命名为favicon.ico文件放到网站根目录下 -->
<link rel="stylesheet" type="text/css" href="css文件路径"/> <!-- 引用css文件 -->
<base target="_blank"/> <!-- base标签，定义这个网页中a链接打开窗口的方式，其值还有_self -->
<title>标题</title> <!-- 网站的标题 -->
<style type="text/CSS"> /* 用来写CSS代码，type="text/CSS"可以省略 */
div{width:100px; height:100px; color:white;}
</style>
</head>
<body> <!-- 网页的主体 -->
<h1>标题</h1> <!-- 标题标签，共六个级，分别为：h1~h6,大小逐级递减，h1在一个网页中只允许出现一次。 -->
<p>段落</p> <!-- 段落标签 -->
<hr/> <!-- 单线标签,所有单标签后面的关闭符均可以省略 -->
<br/> <!-- 换行标签 -->
</div></div> <!-- 无语义化标签布局用,上面的标签是语义化标签 -->
<span>span</span> <!-- 无语义化标签分割用 -->
<strong>加粗</strong> <!-- 加粗标签 -->
<b>加粗</b> <!-- 加粗标签 -->
<i>倾斜</i> <!-- 倾斜标签 -->
<em>倾斜</em> <!-- 倾斜标签 -->
<s>删除线</s> <!-- 删除标签 -->
<del>删除线</del> <!-- 删除标签 -->
<u>下划线</u> <!-- 下划线标签 -->
<ins>下划线</ins> <!-- 下划线标签 -->
<img src="图片路径" alt="图片无法加载，提示文字" title="鼠标悬停，提示文体" border="2"/> <!-- 图像标签，border是边框属性，width和height属性设置图像的宽度和高度 -->
<a href="跳转目标" target="_self">链接的命名</a> <!-- 链接标签，target属性为链接页面打开的方式，默认值_self为自身打开；_blank为新窗口打开；_new为新窗口打开，相同页面只会打开一个;_top跳出框架-->
<ul> <!-- 无序列表 -->
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ol type="A"> <!-- 有序列表,属性type可以控制li序号的样式，其属性值有：1、A、a、I、i-->
<li>中国</li>
<li>美国</li>
<li>英国</li>
</ol>
<dl> <!-- 自定义列表 -->
<dt>分类1</dt> <!-- 分类名称 -->
<dd>分类1第1项</dd> <!-- 类的项 -->
<dd>分类1第2项</dd>
<dt>分类2</dt>
<dd>分类2第1项</dd>
<dd>分类2第2项</dd>
</dl>
<table> <!-- 定义表格，table标签实际就是一个四方块框框，里面有单元格才会显示出表格的样子 -->
<caption>信息表</caption> <!-- 表格标题 -->
<tr> <!-- 定义行 -->
<th>姓名</th> <!-- 定义表头，表头文本有加粗居中效果 -->
<th>年龄</th>
<th>性别</th>
</tr>
<tr> <!-- 定义行 -->
<td>小明</td> <!-- 定义单元格，表格里面没有列-->
<td>18</td>
<td>男</td>
</tr>
</table>
</body>
</html>提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海123
其它问题可通过以下方式联系本人咨询：
QQ：810665436
微信：ConstancyMan
天我们来看下html中<a></a>的特点与功能
一 .a标签是超链接标签，首先我们说一下它的特点：
1.在网页中默认会有下划线
2.不会继承父级的颜色样式
效果图
详细代码
其中，自带的下划线不美观，但我们可以用以下代码解决，ctrl+s保存后，下划线就没有了
去掉下划线
二 .下面我们来看看a标签的几个功能：
1.跳转页面
href 属性要跳转页面的地址（没地址的情况下可以写一个#）,即可以给网络的地址也可以给本地的地址
target 属性
值：_blank在新页面打开
_self 在本页面打开（默认的）
跳转页面功能
2.锚点
作用：网页太长时，通过点击页面某一个导航，页面直接到达该内容，网页还是该网页，只是向下自己滑动。
实现方法：在 href 的值里写上#name,name对应id的值
下面是一个简单例子，点击颜色就会跳转到相应颜色区域
锚点例子
3.下载
作用：实现网页的下载功能
实现方法：在 href 里写上文件的地址就可以了
注意：如果你要下载的文件浏览器能够读出来，那它就不会被下载，而是会被直接打开。如果就想让浏览器下载所有文件，那就在a标签里添加一个属性download（ h5 新增属性，不兼容IE低版本），它的值写上文件的名字加后缀名
下载功能
三.此外，介绍一下a标签的颜色，给a标签换颜色也是会经常用到的，但是怎么改呢？
这里用到了“伪类”，伪类：针对元素的某种状态添加的不同样式
a :link 未访问链接的（颜色）状态
:visited访问过的链接的（颜色）状态
:hover鼠标移入（悬停）（颜色）状态
:active鼠标按下不动时候的（颜色）状态
改变a标签颜色
今天的a标签就介绍到这里，你学到了吗？
标
head标签处于html结构里的第一层。
他的作用是记录和设置了这个HTML文件的很多有用的信息，比如网页标题的设置、网页的字符编码，网页是否启用缓存，选择启用浏览器内核等等，还可以引用脚本方式来减少代码量。
head的位置
Meta标签的属性分成两个：name和http-equiv
主要用于描述网页，比如定义网页的关键词，关键叙述、标注作者、标注版权等。
基本语法：
name属性基本语法
常用的属性：
说明：用于告诉搜索引擎，你网页的关键字。
<meta name="keywords" content="我是前端旺">
说明：用于告诉搜索引擎，你网站的主要内容。
<meta name="description" content="前端旺，免费学习前端的好地方">
说明：robots用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。
<meta name="robots" content="none">
说明：用于标注网页作者举例
<meta name="author" content="前端旺,296699783@qq.com">
说明：用于标明网页是什么软件做的举例
<meta name="generator" content="Hbuilder">
说明：用于标注版权信息举例：
<meta name="copyright" content="前端旺">
说明：renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。
<meta name="renderer" content="webkit"> //默认webkit内核 <meta name="renderer" content="ie-comp"> //默认IE兼容模式 <meta name="renderer" content="ie-stand"> //默认IE标准模式
主要用于描述网页，比如定义网页的关键词，关键叙述、标注作者、标注版权等。
基本语法：
http-equiv属性基本语法
常用的属性：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //旧的HTML，不推荐 <meta charset="utf-8"> //HTML5设定网页字符集的方式，推荐使用UTF-8
说明：用于告知浏览器以何种版本来渲染页面。（一般都设置为最新模式）
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面
说明：指导浏览器如何缓存某个响应以及缓存多长时间。
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Set-Cookie" content="name, date"> //格式
head标签的作用
更多前端教程，敬请关注微信公众号：前端旺
*请认真填写需求信息，我们会在24小时内与您取得联系。
