前端培训技术分享：HTML简介及常用标签

育知同创官网：前端培训技术分享：HTML简介及常用标签我们先来看一下案例：在浏览器中输入网址可以看到需要浏览的网页，那这个网页是怎么生成的呢？育知同创官网：（互联网总称）:Web：web（WorldWideWeb）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。Web又分为Web前端呢和Web后端。什么又是Web前端呢和Web后端呢？前端：就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。后端：更多的是与数据库进行交互以处理相应的业务逻辑。我们这里着重介绍web前端相关的知识点。web前端分为网页设计师、web前端开发工程师。网页设计师是对网页的架构、色彩负责;网站得做的漂亮，客户满意。主要需要您有美术功底，会photoshop等。web前端开发工程师是负责交互设计的，需要和后台程序猿进行交互设计的配合。需要掌握的有脚本技术javascript、HTML+CSS现下最流行的页面搭建技术，ajax和jquery等。我们此阶段就是web前端开发工程师。大家都上过网吧，我们都浏览过网页，那什么是网站，什么又是网页呢，网页或者网站是怎么形成的呢？网站用于展示相关内容的网页的集合。网页是网站中的任何一页面，通常文件扩展名为html、或htm，那我们要实现一个网页首先需要学习那些技术呢？那就是HTML,其次是CSS，还有还javascript等一些相关的技术。育知同创官网：育知同创官网：我们所处的阶段育知同创官网：我们了解了网站从无到有的过程，总之就是设计要给我们一个设计好的效果，我们需要用相关技术把生成网页。那我们来学习一下如何生成的吧，从以下几方面入手学习。什么是HTMLHTML的发展史HTML的特点HTML的基本组成单位HTML的基本结构HTML的常用标签HTML4.0及XHMTL1.0及HTML5的基本规范HTML4.0及HTML5.0的区别Photoshop的基本使用一、什么是HTMLHTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是目前网络上应用为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等.也就是说文字、图片、表格、音视频都被看成是文本。这些部分都是用HTML的标签生成的。二、HTML的发展史三、HTML的特点1.简易性2.可扩展性育知同创官网：平台无关四、HTML的基本组成单位HTML的基本组成单位-----标签。那什么是标签，标签又那些特点呢？我们一一介绍一下。标签：标记”是一些符号，用来区分文档中的不同部分。标签的分类–单标签–双标签标签的基本写法单标签：某些标签只需单独使用就能完整地表达意思，控制网页效果，这类标签的语法是：标签名/双标签：标签成对使用，由一个开始标签和一个结束标签构成。开始标签告诉Web浏览器从此处开始执行该标签所代表的功能，而结束标签告诉Web浏览器在这里结束该功能，结束标签的形式是在开始标签前加上一个斜杠。语法：标签名/标签名标签属性在单标签和双标签的开始标签里，还可以包含一些属性，以达到个性化的效果。标签属性=属性=内容/标签标签的组成标签和标签属性及标签内容组成。五、HTML的基本结构了解了以上的知识我们开学习HTML吧。应该那里写HTML呢？在那里运行呢？HTML的编辑工具:育知同创官网：的运行环境：•我们可以用这么多的浏览器可以浏览页面，每个浏览器对HTML代码的解析是会有差异的地方，那我们在写代码的时候要兼容五大主流浏览器（IE、Chrome、FF、Safari、Opera）。看看这些浏览器的市场占有率吧!好了开始写HTML吧！首先要先写个HTML的基本结构.育知同创官网：网页的标题、其它的说明信息及不需要在浏览器中显示的内容放在head这对标签中。在浏览器中需要显示的内容放在body这对标签中。另外我们在真正写网页时除了以上的标签之外，我们还需要添加其它的标签，比如文档声明，中文编码声明等，为什么加这些呢？因为我们大家都知道浏览器特别多对吧。浏览器对HTML的代码解析不一样，不加文档声明，会不同的浏览器按自己的标准去解析HTML代码！所以我们在HTML最开始的位置加!DOCTYPEHTML这句话,每个浏览器都会按着符合标准的HTML代码去解析，说到标准，我们还要知道HTML是应该遵循谁的标准，HTML要遵循W3C标准，那W3C标准又是什么呢？W3C标准：万维网联盟创建于1994年。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，（W3C）标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括HTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。这些标准大部分由W3C起草和发布。另外加中文编码声明，是为了浏览器解析中文时以简体中文形式显示。那中文编码有那些呢？有UTF-8（用在网页上可以统一页面显示中文简体繁体及其它语言）、GB2312(信息交换用汉字编码字符集)等。完整的HTM基本结构如下：!DOCTYPEhtmlhtmlheadmetacharset=UTF-8title这是第一个网页/title/head育知同创官网：需要在浏览器中显示的内容。/body/html六、HTML的常用标签1.标题标签（h1----h6）语法:h1align=”center”内容/h1常用属性：align：设置对齐方式.属性值有left（左对齐）、center（居中对齐）、right（右对齐）代码：bodyh1align=center我是一级标题/h1h2我是二级标题/h2h3我是三级标题/h3h4我是四级标题/h4h5我是五级标题/h5h6我是六级标题/h6/body页面效果:育知同创官网：段落标签:语法：p/p常用属性：align：设置对齐方式.属性值有left（左对齐）、center（居中对齐）、right（右对齐）代码：bodyh1align=center赵薇真实身家曝光：资产总值56亿不动产占6亿/h1p澎湃新闻讯1月11日，浙江万好万家（18.380，0.00，0.00%）文化股份有限公司（600576）发布公告，回复上证所问询。/pp2016年12月29日，万家文化收到上海证券交易所《关于对浙江万好万家文化股份有限公司权益变动信息披露相关事项的问询函》（上证公函[2016]2483号）（以下简称“《问询函》”），问询函要求西藏龙薇文化传媒有限公司（以下简称“龙薇传媒”）就通过股份育知同创官网：转让协议，以30.6亿元对价取得公司1.85亿股份、成为公司控股股东事项作进一步说明和披露。/pp根据公告显示，龙薇传媒用于本次收购所需资金30亿元万元，全部为自筹资金，其中股东自有资金借款6，000万元，第三方自有资金借款150，000万元，筹资成本为年化利率10%；拟向金融机构股票质押融资149，990万元，目前正在金融机构审批流程中，融资年利率遵守市场化原则，预计6%左右。/p/body页面效果:4.三种列表标签4.1无序列表语法:ulli无序列表项/lili无序列表项/lili无序列表项/li......育知同创官网：常用属性：type：设置符合类型，属性值有circle（空心圆）、square（黑色方块）、disc（黑色实心圆）代码：ulli吉林省/lili黑龙江省/lili辽宁省/li/ul页面效果4.2有序列表语法:olli无序列表项/lili无序列表项/lili无序列表项/li....../ol常用属性：type：设置编号类型，属性值有a、A、i、I、1（默认）育知同创官网：：设置编号起始值，属性值为起始的数值，如从2开始就写2代码：olli吉林省/lili黑龙江省/lili辽宁省/li/ol页面效果4.3定义列表语法:dldt定义项/dtdd描述项/dddd描述项/dddt定义项/dtdd描述项/dddd描述项/dd/dl育知同创官网：代码:dldt吉林省/dtdd长春市/dddd吉林市/dddt辽宁省/dtdd沈阳市/dddd大连市/dd/dl页面效果5.span标签、strong标签、b标签、i标签、em标签、br标签语法：span内容/spanstrong内容/strongb内容/bi内容/iem内容/embr/说明：span标签默认浏览器中没有效果，strong\b标签默认是加粗显示，但strong更多是有强调的作用。i\em是倾斜的意见，但em具有强调的作用。br表示换行的意思。代码：育知同创官网：根据/spanstrong公告/strongb显示/b，i龙薇传媒/iem用于本次/em收购所需资金30亿元万元，全部为自筹资金，其中股东自br有资金借款6，000万元，第三方自有资金借款150，000万元，筹资成本为年化利率10%；拟向金融机构股票质押融资149，990万元，目前正在金融机构审批流程中，融资年利率遵守市场化原则，预计6%左右。/pspan根据/spanstrong公告/strongb显示/b，i龙薇传媒/iem用于本次/em页面效果5.div标签语法:div内容/div说明:Div的中文含义是区块的意思，里面可嵌套任何一个标签。育知同创官网：赵微资产/h3p第三方自有资金借款150，000万元，筹资成本为年化利率10%；拟向金融机构股票质押融资149，990万元/pulli投资赚来的/lili演电影赚的/lili演电视剧赚的/li/ul/div页面效果6.img标签（插入图像标签）语法:imgsrc=“图片地址”width=“”height=“”title=“”alt=“”border=“”/常用属性：src：指定图像的源文件路径，可以使用相对路径、绝对路径或URL。width：指定图像的宽度，单位为像素。border：指定图像边框厚度。育知同创官网：：这是用以描述该图像的文字，图像不能显示时将显示该属性值；当鼠标移至图像上时，将该属性值