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
文本标记语言(Hypertext Markup Language)是一种用来制作网页的标记语言,不需要编译,可以直接由浏览器解释执行,更形象地说,HTML是浏览器的“母语”。在网页设计中HTML主要负责信息展现,能独立于各种操作系统平台,并且可以通知浏览器显示内容。自20世纪90年代以来,HTML就一直被用作Internet的信息展示语言,用于描述网页的格式设计和与Internet上其他网页的链接信息。
关于超文本标记语言,有以下含义:
超(Hyper):是相对于线性(linear)来说的。以前的计算机程序基本上是线性运行,即当计算机程序执行完一条命令后,转向下一行,该行结束后,继续下移,依此类推。但HTML则不同,它可以在任何时候跳转到任何位置。例如,程序可以从第1行跳转到第8行,然后跳转到第5行,甚至可以跳转到另外一个程序中去执行。
文本(Text):即文字本身,意味着它是自解释的(self-explanatory)。
标记(Markup):指的是如何处理文本。对文本作标记的方式,与在文本编辑程序中将文本加粗,或者将一行文字设为标题或列表项目类似。
语言(Language):HTML就是一种语言,它使用了许多英文单词。
HTML文件也可以说是一个文本文件,它包含了一些HTML元素、标签等。HTML文件必须使用.html或.htm为文件名后缀。
按字母排序
按功能排序
HTML主要应用于:
控制页面和内容的外观;
发布和检索联机文档;
创建联机表单;
插入诸如音频剪辑和视频剪辑等对象。
们俗称的网页,在程序员看来其实就是一个HTML。
一个页面就一个HTML
那么HTML究竟是什么呢?
让我们一起来看看!!
什么是 HTML呢?
HTML 是用来描述网页的一种语言。
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
其实Web 浏览器和电脑的浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容。
如下面的代码示例:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
其中
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容,展示给用户看的页面
<h1> 与 </h1> 之间的文本会被显示为标题
<p> 与 </p> 之间的文本会被显示为段落
测试结果:
上述代码测试结果
做一个小网页是不是很简单!
新人一个,关注才能不迷路哦!
接下来我还会继续为大家涨知识!
直到大家能独立做出一个自己的网页!
*请认真填写需求信息,我们会在24小时内与您取得联系。