HTML5基本概念简介

HTML基础简介HTML简介•超文本标记语言英文全称(HyperTextMarkupLanguage)，标准通用标记语言下的一个应用。•“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。•超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。HTML语言特点•简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。•可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。•平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（）盛行的另一个原因。•通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。HTML发展史•HTML2.0——1995年11月作为RFC1866发布，在RFC2854于2000年6月发布之后被宣布已经过时•HTML3.2——1997年1月14日，W3C推荐标准•HTML4.0——1997年12月18日，W3C推荐标准•HTML4.01（微小改进）——1999年12月24日，W3C推荐标准•HTML5——2014年10月28日，W3C推荐标准HTML标题•HTML标题•HTML标题（Heading）是通过h1-h6标签来定义的。一共分为六级标题•主要是放在HEAD/HEAD之间•h1这是一个标题/h1•h2这是一个标题/h2•h3这是一个标题/h3HTML元素•HTML文档由HTML元素定义。•HTMLElement以开始标签起始,以结束标签终止。•元素的内容是开始标签与结束标签之间的内容。•大多数HTML元素可拥有属性。•例如：p、body等开始标记内容结束标记p这是一个段落标记/pahref=“default.htm这是一个超链接/adiv这是一个div布局/divHTML段落•HTML可以将文档分割为若干段落•段落是通过p标签定义的。•pThisisaparagraph/p•pThisisanotherparagraph/p•如果您希望在不产生一个新段落的情况下进行换行（新行），请使用br/标签•pThisisbraparabrgraphwithlinebreaks/pHTML文本格式化•HTML格式化标签•HTML使用标签b与i对输出的文本进行格式,如：粗体or斜体•标签定义描述描述•b定义粗体文本•em定义着重文字•i定义斜体字•small定义小号字HTML文本格式化•strong定义加重语气•sub定义下标字•sup定义上标字•ins定义插入字•del定义删除字HTML超链接•HTML使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。•HTML使用标签a来设置超文本链接。•超链接可以是一个字，一个词，或者一组词，也可以是一幅图像等。•默认情况下，链接将以以下形式出现在浏览器中：•一个未访问过的链接显示为蓝色字体并带有下划线•访问过的链接显示为紫色并带上下划线•点击链接时，链接显示为红色并带上下划线HTML超链接•链接的HTML代码很简单。它类似这样：•ahref=“url链接文本/a•HTML链接-target属性•使用target属性，你可以定义被链接的文档在何处显示。•ahref==_blank访问我的网站!/aHTMLHead属性•HTMLhead元素•head元素包含了所有的头部标签元素。在head元素中你可以插入脚本（scripts）,样式文件（CSS），及各种meta信息。•可以添加在头部区域的元素标签为:title,style,meta,link,script,noscript,andbase.HTMLtitle元素•title标签定义了不同文档的标题。•title在HTML/XHTML文档中是必须的。•title元素:•定义了浏览器工具栏的标题•当网页添加到收藏夹时，显示在收藏夹中的标题•显示在搜索引擎结果页面的标题HTMLlink元素•link标签定义了文档与外部资源之间的关系。•link标签通常用于链接到样式表:•例如：•head•linkrel=stylesheettype=text/csshref=mystyle.css•/headHTMLstyle元素•style标签定义了HTML文档的样式文件引用地址.•在style元素中你需要指定样式文件来渲染HTML文档。•head•styletype=text/css•body{background-color:yellow}•p{color:blue}•/style•/headHTMLmeta元素•meta标签描述了一些基本的元数据。•meta标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。•META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。•元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。•meta一般放置于head区域HTMLmeta元素•为搜索引擎定义关键词:•metaname=keywordscontent=HTML,CSS,XML,XHTML,JavaScript”•每30秒中刷新当前页面:•metahttp-equiv=refreshcontent=30HTMLscript元素•script标签用于加载脚本文件，如：JavaScript。•script元素在以下章节会详细描述。•scriptsrc=“•导入js文件HTMLCSS样式•CSS是在HTML4开始使用的,是为了更好的渲染HTML元素而引入的.•CSS可以通过以下方式添加到HTML中:•内联样式-在HTML元素中使用style属性•内部样式表-在HTML文档头部head区域使用style元素来包含CSS•外部引用-使用外部CSS文件HTMLCSS样式•内联样式•pstyle=color:blue;margin-left:20px;Thisisaparagraph./p•bodystyle=background-color:yellow;•h2style=background-color:red;Thisisaheading/h2•pstyle=background-color:green;Thisisaparagraph./p•字体,字体颜色，字体大小HTMLCSS样式•内部样式表•当单个文件需要特别样式时，就可以使用内部样式表。你可以在head部分通过style标签定义内部样式表:•styletype=text/css•body{background-color:yellow;}•p{color:blue;}•/styleHTMLCSS样式•外部样式表•当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。•head•linkrel=stylesheettype=text/csshref=mystyle.css•/headHTML图像•在HTML中，图像由img标签定义。•img是空标签，意思是说，它只包含属性，并且没有闭合标签。•imgsrc=urlalt=“some_text•alt属性•设置图像的高度与宽度•imgsrc=pulpit.jpgalt=Pulpitwidth=304height=228HTML表格table•HTML表格•表格由table标签来定义。每个表格均有若干行（由tr标签定义），每行被分割为若干单元格（由td标签定义）。字母td指表格数据（tabledata）。•HTML表格和边框属性•使用边框属性来显示一个带有边框的表格：•tableborder=1HTML表格table•HTML表格表头•表格的表头使用th标签进行定义。•tableborder=1•tr•thHeader1/th•thHeader2/th•/trHTML表格table•单元格边距(Cellpadding)•单元格间距(Cellspacing)•表格caption标签•tableborder=1•captionMonthlysavings/captionHTML列表•HTML支持有序、无序和定义列表:•HTML无序列表•无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。•ul•liCoffee/li•liMilk/li•/ulHTML列表•HTML有序列表•同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于ol标签。每个列表项始于li标签。•列表项项使用数字来标记。•ol•liCoffee/li•liMilk/li•/olHTML列表•HTML自定义列表•自定义列表不仅仅是一列项目，而是项目及其注释的组合。•自定义列表以dl标签开始。每个自定义列表项以dt开始。每个自定义列表项的定义以dd开始。•dl•dtCoffee/dt•dd-blackhotdrink/dd•dtMilk/dt•dd-whitecolddrink/dd•/dlHTML标题•HTML标题•HTML标题（Heading）是通过h1-h6标签来定义的。一共分为六级标题•主要是放在HEAD/HEAD之间•h1这是一个标题/h1•h2这是一个标题/h2•h3这是一个标题/h3HTML布局•网页布局对改善网站的外观非常重要。•大部分网页主要是使用div作为布局设计网页•HTML布局-使用div元素•div元素是用于分组HTML元素的块级元素•展示案例HTML表单元素•HTML表单•表单是一个包含表单元素的区域。•表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。•表单使用表单标签form来设置:HTML表单元素•HTML表单-输入元素•多数情况下被用到的表单标签是输入标签（input）。•输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下•文本域（TextFields）•密码字段•密码字段通过标签inputtype=password来定义:HTML表单元素•单选按钮（RadioButtons）•复选框（Checkboxes）•提交按钮(SubmitButton)•select定义了下拉选项列表•datalist指定一个预先定义的输入控件选项列表•inputlist=browsers•datalistid=browsers•optionvalue=InternetExplorerHTML颜色•HTML颜色由红色、绿色、蓝色混合而成。•HTML颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。•种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）