1. 首页
  2. IT资讯

前端教程之HTML(一)

“u003Cdivu003Eu003Cpu003E 昨天了解计算机基础知识后,小编今天带大家学习前端三大脚手架之一的HTML,从常用程度上,HTML可以简单的分为:基础HTML、核心HTML。今天将学习基础HTML(一),因为只有把地基打扎实了,才能建高楼。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F31d1000311042a473523″ img_width=”400″ img_height=”300″ alt=”前端教程之HTML(一)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E首先,什么是HTML?书本上称为HTML(Hyper Text Markup Language),超级文本标记语言,说白了就是编写一个网页的语言;可以想象因为要讲话,所以我们学会了文字,同理,因为要编辑网页,所以我们要学习HTML;HTML是有一系列标记组成,同时也具有自己独特的语法。通过标记和语法组成后,最终会由浏览器负责解释,浏览器中有两大解析器,html渲染解析器,js解析器(这块后续会提到)。u003Cu002Fpu003Eu003Cpu003EHTML的发展进程,从最开始的HTML2.0>HTML3.2>HTML4.0>HTML4.01>XHTML1.0>HTML5;目前HTML已经更新到了HTML5了,HTML5给我们带来了很多新玩意儿,后面会陆续把好东西分享给大家。u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F31dd00007cd6b9093f8e” img_width=”500″ img_height=”273″ alt=”前端教程之HTML(一)” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”pgc-img-caption”u003EHTML5 质的发展u003Cu002Fpu003Eu003Cpu003E在今日学习之前,先分析一些开发工具,作为新手,不建议使用具有代码提示补全的工具,建议使用EditPlus,记事本之类的工具,只有把代码写扎实了,再进阶到高级工具。u003Cu002Fpu003Eu003Cpu003E下面进入HTML标签的学习,也有叫标记的。 u003Cu002Fpu003Eu003Cpu003E一、标签语法u003Cu002Fpu003Eu003Cpu003E1、所有的标签都必须使用尖括号扩起来,例如 <a>,<div> … <A>,<a>u003Cu002Fpu003Eu003Cpu003E2、有封闭类型的标签,也有非封闭类型的标签u003Cu002Fpu003Eu003Cpu003E 2.1、封闭类型,也称作双标记,则必须成对出现;语法规则: <标记>文本内容<u002F标记>; 不同的标记,决定 了”文本内容”的不同表现形式;常见的封闭类型标记有:<a><u002Fa>,<p><u002Fp>,<div><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E 2.2、非封闭类型,也称作单标记、空标记;语法规则: <标记>或者<标记u002F> 常见的非封闭类型标记有: <hr>,<br>,<img>u003Cu002Fpu003Eu003Cpu003E 区别封闭类型和非封闭类型标签,就看这标签是一对出现的,还是单个出现的。u003Cu002Fpu003Eu003Cpu003E3、标签嵌套u003Cu002Fpu003Eu003Cpu003E 标签之间可以相互嵌套,形成复杂的语法结构,简单的例子如下:u003Cu002Fpu003Eu003Cpu003E <body>u003Cu002Fpu003Eu003Cpu003E <p>u003Cu002Fpu003Eu003Cpu003E <a><u002Fa>u003Cu002Fpu003Eu003Cpu003E <u002Fp>u003Cu002Fpu003Eu003Cpu003E <u002Fbody>u003Cu002Fpu003Eu003Cpu003E4、标签属性,标签属性是指出现在开始标记中的内容,作用是修饰元素,如 <div 属性名=”属性值”><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E 标准属性:就是每个元素与生俱来就具备的通用属性,常见的标准属性有:u003Cu002Fpu003Eu003Cpu003E id :定义每个标签的唯一标识u003Cu002Fpu003Eu003Cpu003E title:提示文本u003Cu002Fpu003Eu003Cpu003E class:样式相关,类样式u003Cu002Fpu003Eu003Cpu003E style:样式相关,行内样式u003Cu002Fpu003Eu003Cpu003E现在可以和小编一个编写一个简单的标签,同时设置这个标签的id属性为myDIv。(属性命名方式:驼峰命名,后续会分享给大家)u003Cu002Fpu003Eu003Cpu003E 实战:第一步:先定义一个标签div,即<div><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E 第二步:添加id属性,即<div id=”myDIv”><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E疑问:如果存在多个属性值怎么办?怎么添加属性值是编码规范的?u003Cu002Fpu003Eu003Cpu003E答:如果是多属性的,那么直接在前一个属性值后继续编写,不需要用“,”或者“;”分开,直接写就对了!而且,多个属性排名不分先后的,举个栗子: <div id=”myDiv” title=”myTitle”><u002Fp>u003Cu002Fpu003Eu003Cpu003E二、文档结构u003Cu002Fpu003Eu003Cpu003E 1、文档类型声明:即声明使用的HTML版本和风格,HTML5中使用声明为: <!doctype html>u003Cu002Fpu003Eu003Cpu003E 2、html页面u003Cu002Fpu003Eu003Cpu003E 2.1、文档根元素,每个文档有且仅有一对根元素 , htmlu003Cu002Fpu003Eu003Cpu003E 2.2、在根元素的内部,包含两对子元素;u003Cu002Fpu003Eu003Cpu003E 2.2.1、head : 页面的头部内容,定义页面全局信息 包含的内容有:u003Cu002Fpu003Eu003Cpu003E <title><u002Ftitle> ;网页标题,就是网页地址上面显示的名称;u003Cu002Fpu003Eu003Cpu003E <meta u002F>:声明元数据(编码,关键字,描述),最重要的搜索引擎SEO主要是写这部分;同时也可以定义一些网页属性,比如说,中文显示 <meta charset=”utf-8″ u002F>;u003Cu002Fpu003Eu003Cpu003E <style><u002Fstyle>:声明内部样式表,声明当前网页所用到的样式,这种方式的样式定义只能运用在当前页面,其他页面不能使用这里定义的样式;u003Cu002Fpu003Eu003Cpu003E <link u002F>:引入外部样式表,引入外部定义好的样式,只要是这个页面想要用到某一个外部样式表,就直接引入就可以用了,这种样式表定义运用弥补上面<style><u002Fstyle>不能共享的缺陷,是的代码达到了重用的优势;u003Cu002Fpu003Eu003Cpu003E <script><u002Fscript>:定义或引入脚本文件,主要是引入一些js脚本语言,完成这个页面所需要的交互;u003Cu002Fpu003Eu003Cpu003E 2.2.2、body : 页面的主体内容,任何一个标签,都可能会出现在body中;<body>也是标签,它也可以定义自己的属性,比如网页背景有绿色,那么就是<body bgcolor=”green”><u002Fbody>;u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F31d6000453748d9b0ed0″ img_width=”918″ img_height=”688″ alt=”前端教程之HTML(一)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E3、文本标记u003Cu002Fpu003Eu003Cpu003E 3.1、特殊的文本,除了正常文字外,在一些特定的情况下会需要有特别的标点符号等,小编举例几个常见的特殊符号的标记,如 空格对应的是“&nbsp;”、 <对应的是 “&lt;” 可以理解为less than 、> 对应的是 “&gt; ”理解为greater than、 版权标识对应的是 “&copy”,这里需要特别特别注意的一点是 每个特殊字符有需要“;”u003Cu002Fpu003Eu003Cpu003E 3.2、文本标记u003Cu002Fpu003Eu003Cpu003E 3.2.1、文本样式u003Cu002Fpu003Eu003Cpu003E<b>…<u002Fb>: 加粗文本;u003Cu002Fpu003Eu003Cpu003E <i>…<u002Fi>:斜体文本;u003Cu002Fpu003Eu003Cpu003E <u>…<u002Fu>:下划线;u003Cu002Fpu003Eu003Cpu003E <s>…<u002Fs>:删除线;u003Cu002Fpu003Eu003Cpu003E <sup>…<u002Fsup>:上标;u003Cu002Fpu003Eu003Cpu003E <sub>…<u002Fsub>:下标;u003Cu002Fpu003Eu003Cpu003E 3.2.2、标题元素, 1-6级6个标题 <hn><u002Fhn> n:1-6 其中一级是最大的, 六级是最小的;u003Cu002Fpu003Eu003Cpu003E 3.2.3、段落元素,提供了结构化文本的表现方式, 语法:<p><u002Fp>, 注意:每对p标签单独成一个段落,常用属性:u003Cu002Fpu003Eu003Cpu003E align:水平对齐方式 取值:left center right;u003Cu002Fpu003Eu003Cpu003E 4、换行元素,在代码的任何位置处,实现回车的效果 <br u002F>,是非封闭类型标记;u003Cu002Fpu003Eu003Cpu003E5、水平线, 又叫分割线, <hr u002F> 也是非封闭类型标记,常用属性;u003Cu002Fpu003Eu003Cpu003E 5.1、size :水平线的粗细,通常以像素(px)为单位;u003Cu002Fpu003Eu003Cpu003E 5.2、width:宽度;u003Cu002Fpu003Eu003Cpu003E 5.3、align:水平线的水平对齐方式;u003Cu002Fpu003Eu003Cpu003E 5.4、color:颜色;u003Cu002Fpu003Eu003Cpu003E6、分区元素目的:为元素进行分组,多数用在布局中;u003Cu002Fpu003Eu003Cpu003E 块分区元素:<div><u002Fdiv> ;u003Cu002Fpu003Eu003Cpu003E 行内分区元素:<span><u002Fspan>;u003Cu002Fpu003Eu003Cpu003E 注意:u003Cu002Fpu003Eu003Cpu003E div :主要用在布局上;u003Cu002Fpu003Eu003Cpu003E span:修改其内部内容的样式;u003Cu002Fpu003Eu003Cpu003E7、预格式化,保留源文档中的空格和回车 <pre>文本内容 <u002Fpre>;u003Cu002Fpu003Eu003Cpu003E8、注释u003Cu002Fpu003Eu003Cpu003E 可以写在html源码中,但不被浏览器解释的文本;u003Cu002Fpu003Eu003Cpu003E 语法: <!– 注释内容 –>u003Cu002Fpu003Eu003Cpu003E!!!特别注意:行内元素与块级元素u003Cu002Fpu003Eu003Cpu003E 块级元素:默认情况下,块级元素独占一行,元素的前后都会自动换行 div、hn、hr、p等 主要用于布局。u003Cu002Fpu003Eu003Cpu003E 行内元素:默认情况,多个元素位于同一行,不会换行,span、文本标记… .主要行内元素作用:修改内部内容的样式。u003Cu002Fpu003Eu003Cpu003E最后,小编建议多多打代码!u003Cu002Fpu003Eu003Cpu003E预告:下一篇 前端教程之HTML(二)u003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:前端教程之HTML(一)

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11270.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code