房上的猫:HTML5基础

一.W3C标准  1)W3C标准不是某一个标准,而是一系列的标准的集合,一个网页主要由三部分组成,即结构(Structure),表现(Presentation)和行为(Behavior)  2)不很严谨的说"结构","表现","行为"分别对应了三种非常常用的技术,即HTML,CSS,JavaSxript.也就是说HTML用来决定结构和内容,CSS用来设定网页的表现样式,JavaSpcript用来控制网页的行为  3)W3C标准包括结构化标准语言(HTML,XML),表现标准语言(CSS),行为标准(DOM,ECMAScript) 二.网页编辑工具  使用WebStorm编辑HTML文档:   1)打开WebStorm编辑器后,选择File->New->HTML File命令.打开"HTML File"对话框   2)在"Name"文本框中输入HTML的文件名,在"Kind"下拉列表框中选择"HTML 5 file"选项,单击"OK"按钮即可创建一个页面的模板   3)在body元素和title元素中添加网页的内容   4)网页内容添加完毕后,鼠标移动到WebStorm编辑器的右上方,会出现几个常见的浏览器图标,单击其中一个图标即可打开该页面   注:使用某浏览器测试,前提是本机上安装了该浏览器   5)在浏览器中显示效果 三.HTML5文件的基本结构  最基本与语法:   <标记>内容</标记>   1)标记在有的地方也称为标签或者元素,其实它们知道是同一种东西   2)标签都是成对出现的,有一个开头标记就对应地有一个结束标记,以"<>"开始,以"</>"结束,要求成对出现,标签之间有缩进,体现层次感,方便阅读和修改

<html>            
     <head>    
          <title>网页标题<title>  
     </head>     
     <body>
         
     </body>       
</html>                            

四.网页的基本信息  1.DOCTYPE声明:   1)约束HTML文档结构,检验是否符合相关Web标准,同事告诉浏览器,使用哪种规范来解释这个文档中的代码   2)DOCTYPE声明必须位于HTML文档的第一行   3)语法:

<!DOCTYPE html>

 2.<title>标签:

<title>网页标题</title>

打开网页后,将在浏览器窗口的标题栏显示网页标题  3.<meta>标签:   1)使用该标签描述网页的摘要信息,包括文档内容类型,字符编码信息,搜索关键字,网站提供的功能和服务的详细描述等   2)<meta>标签描述的内容不显示,其目的是方便浏览器解析或利用搜索引擎搜索,它采用"名称/值"对的方式描述摘要信息   1.文档内容类型,字符编码信息:

<meta charset="属性"/>

   属性:charset表示字符集编码,常用编码:     1)jb2312:简体中文,一般用于包含中文和英文的页面     2)ISO-885901:纯英文,一般用于只包含英文的页面     3)big5:繁体,一般用于带有繁体字的页面     4)UTF-8:国际性通用的字符编码,同样适用于中文和英文的页面.和gb2312编码相比,国际通用性更好    在保存文件时编码方式一定要与HTML5y页面中的<meta>标签中的编码方式保持一致,否则会出现乱码   2.搜索关键字和内容描述信息:    <meta name="搜索关键字" content="网站内容的具体描述"/>    1)实现的方式仍然为"名称/值"对的形式    2)通过搜索关键字和内容描述信息,方便搜索引擎的搜索   使用WebStorm工具自动生成的HTML基本结构中<head>标签里有个属性lang="en",它的意思是表示本页面是英文的.浏览器会提示是否需要翻译 五.网页的基本标签  1.标题标签:   1)标题标签表示一段文字的标题和主题,并且支持多层次的内容结构   2)HTML共提供了六级标签<h1>--<h6>,并赋予了标题一定的外观,所有标题字体加粗,<h1>字号最大,<h6>字号最小   语法:

  <h1>一级标题</h1>
   <h2>二级标题</h2>
   <h3>三级标题</h3>
   <h4>四级标题</h4>
   <h5>五级标题</h5>
   <h6>六级标题</h6>

 2.段落标签和换行标签:   1)段落标签<p>内容</p>表示一段文字等内容:一个段落中可以包含多行文字,文字内容将随浏览器窗口的大小自动换行   2)换行标签<br/>表示强制换行显示,该标签比较特殊,没有结束标签,直接使用<br/>表示标签的开始和结束  说明:像换行标签<br/>这样没有结束标签,直接使用<br/>表示标签的开始和结束的标签叫做单标签.成对出现的,如<html></html>这样有开始标签和结束标签的标签叫做双标签  3.水平线标签:   水平线标签<hr/>表示一条水平线,注意该标签与<br/>标签一样.比较特殊,没有结束标签  4.字体样式标签:

<strong>字体变粗</strong>
<em>字体倾斜</em>

 5.注释和特殊符号:

<!--注释内容-->

   当页面的HTML结构复杂或内容较多时,需要添加必要的注释方便代码阅读和维护.同时,有时为了调试,需要暂时注释一些不必要HTML代码   特殊符号:    由于一些符号已作为HTML的语法符号,因此要在页面中显示这些特殊符号,就必须使用相应的HTML代码表示,这些特殊符号对应的HTML代码被称为字符实体,这些字符实体都以"&"开头,以";"结束

特殊符号

字符实体

空格

&nbsp;

大于号(>)

&gt;

小于号(<)

&lt;

引号(")

&quot;

版权符号

&copy;

六.图像标签  1.常见的图像格式   1)JPG格式:    >JPG(JPEG)格式图像在Internet上被广泛支持的图像格式    >此格式最适合用于摄影或连续色调图像的高级格式,这是因为JPG文件可以包含数百万种颜色    >通常可以通过压缩JPG格式文件在图像品质和文件大小之间达到良好的平衡   2)GIF格式:    >GIF格式图像是网页中最广泛,最普遍的一种图像格式    >GIF格式文件支持透明色,使得GIF格式在网页的背景和一些多层特效的显示上用得非常多,还支持动画,这是它最突出的一个特点,因此GIF格式图像在网页中应用非常广泛   3)BMP格式:    >BMP格式图像在Windows操作系统中使用得比较多    >BMP格式图像文件格式与其他Microsoft Windows程序兼容    >它不支持文件压缩,也不适用于Web页   4)PNG格式:    >PNG格式是20世纪90年代中期开始开发的图像文件储存格式,它兼有GIF格式和JPG格式的优势,同时具备GIF格式不具备的特性    >PNG是一种新兴的Web图像格式  2.图像标签的基本语法:   <img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字" width="图片宽度" height="图片高度" />    语法解析:     1)src属性表示图片路径     2)alt属性指定的替代文本,表示图像无法显示时替代显示的文本,这样,即使当图像无法显示时,用户还是可以看到网页丢失的信息内容     3)title属性可以提供额外的提示或帮助信息,当鼠标移至图片上时显示提示信息     4)width和height两个属性分别表示图片的宽度和高度,如果不设置那么图片默认显示原始大小   在实际的网站开发中,通常会把网站应用到的图片统一存放在一个文件夹中 七.超链接标签  1.基本用法    语法:

<a herf="链接地址" target="目标窗口位置">链接文本或图像</a>
  <!--语法解析:
   1)herf:表示链接地址的路径
   2)target:指定链接在哪个窗口打开,常用的取值有"_self"(自身窗口),"_blank"(新建窗口)
   3)超链接即可以是文本超链接,也可以是图像超链接-->

  根据链接地址是指向站外文件还是站内文件,链接地址又分为结对路径和相对路径:    1)绝对路径:指向目标地址的完整描述,一般指向本站点外的文件    2)相对路径:相对于当前页面的路径,一般指向本站点内的文件,所以一般不需要一个完整的URL地址的形式    站内使用相对路径时常用到两个特殊符号:     >"../"表示当前目录的上级目录     >"../../"表示当前目录的上上级目录   注:当超链接href链接路径为"#"时,表示空链接  2.超链接的应用场合   1)页面间链接:    页面间链接就是从一个页面链接到另一个页面   2)锚链接:    锚链接常用于目标页内容很多,需定位到目标页内容的某个具体位置时

<a href="#marker">当前位置</a>
   <a name="marker">目标位置</a>

 3.功能型性链接:   功能型链接比较特殊,当单击该链接时不是打开某个网页,而是启动本机自带的某个应用程序

<a herf="www.baidu.com">百度</a>

块元素特性:无论内容多少,该元素独占一行 行内元素特性:内容撑开宽度,左右都是行内元素的可以排在一行

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 uwp win2d 入门 看这一篇就够了

本文主要翻译,可能带有一定的主观性和局限性,说的东西可能不对或者不符合每个人的预期。如果觉得我有讲的不对的,就多多包含,或者直接关掉这篇文章,但是请勿生气或者发...

82
来自专栏张善友的专栏

MSBuild的简单介绍与使用

MSBuild 是 Microsoft 和 Visual Studio的生成系统。它不仅仅是一个构造工具,应该称之为拥有相当强大扩展能力的自动化平台。MSBui...

1805
来自专栏练小习的专栏

伪类以及伪元素的一些使用小技巧

在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用...

1879
来自专栏张善友的专栏

Mono P/Invoke :DLLImport

Mono 的初衷是为了吸引更多的Windows .Net程序员来加入Linux平台的开发。但在Linux世界中C语言依然是主流。很多时候一些关键应用(比如大型笛...

19510
来自专栏菩提树下的杨过

Silverlight中多个Xaml("场景"? or "窗口"? )之间的切换/调用/弹出/传参数问题小结

silverlight中不存在Flash中的场景,有的只是一个个Xaml文件,你要是愿意,也可以把它看做"场景"或"窗口",刚开始接触sl时,对于多个xaml之...

1797
来自专栏朱慕之的博客

UIWebView与JS的交互

要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的HTML。除此之外,还需要禁用获取的HTML...

691
来自专栏林德熙的博客

C# AddRange 添加位置

有没人想知道, AddRange 添加位置 是哪? 是添加到数组的开始,还是数组的末尾?

141
来自专栏林德熙的博客

dotnet 从入门到放弃的 500 篇文章合集

博客包括 C#、WPF、UWP、dotnet core 、git 和 VisualStudio 和一些算法,所有博客使用 docx 保存

122
来自专栏卡少编程之旅

对列表hover效果的小探讨

3017
来自专栏一个爱瞎折腾的程序猿

HTML5学习笔记

参考资料:http://www.runoob.com/html/html-tutorial.html

632

扫描关注云+社区