文档章节

JavaScript由入门到精通(二)——学习JavaScript的基石Html(一)

白志华
 白志华
发布于 2015/10/18 10:57
字数 356
阅读 7
收藏 0
点赞 0
评论 0

基本知识

HTMLHypertext Markup Language),超文本标记语言。是一种描述性语言。可直接有浏览器识别并处理。

计算机生成了可选文字: <html><h6dd><title》显示在浏览器左上方的标脱</ti仁le》</head》<b火扮勿color二”red”仁ext二”blue”》<p>红色背景、蓝色文本</p》《/body》</html》

body的属性

 

注释

计算机生成了可选文字: 《head>《仁i仁le》关于文档注释的演示</ti仁le》《!二Author张幸样COmpanyIT资讯交流网ContactInfo~.1七31s.org二》'Ihe己d>

HTML符号和特殊字符

计算机生成了可选文字: 表,.,H下ML编码显示成处理结果&a们nU伙;匆O下侧&n饥p;空格字符

符号使用的一个例子

计算机生成了可选文字: 如果属性值中同时有单引号和双引号,那又该如何处理呢?例如,假设<伙川y>标签的dass属性位设为’z'x"x,那么,不使用任何引号的写法为:<卜x】ydass=迹迩>灯饮刘y>使用单引号的写法为:<伙刘ydass=’义兰达.>心饮川y>使用双引号的写法为:<伙刘yc!.5二”迫壑’.>以伙川y>不管使用上面的哪种写法,浏览器进行解择时,都会产生歧义.叶于这种同时有单引号和双引号的属性值,雷要使用双引号引起来,且对属性值中的原来的双引号用&qout:未表示.要将<伙劝y>标签的class属性值设为’z'x”、,应该写成:<伙川yclass="'z'x构out;x'">心长川y>,这样,浏览器就能正确地分辫出起始和匹配的结束引号,且在解释这条语句时,自动将其中的&quot;字符序列转换成双引号.也只有在刚才这种情况下才雷要将双引号用如uot;字符序列表示,不要对其他地方的双引号进行这种转换,否则就可能弄巧成拙.

【格式标签】

<p></p> 段落标记,会换行。

计算机生成了可选文字: 印卜姚户标签对是用来创建一个段落.在此标签对之间加入的文本将技照段落的格式显示在浏览器上。另外印>标签还可以使用allgn属性,它用来说明对齐方式,语法是:<pallgo二”属性值”洲印>。allgn的属性值可以是伙ft(左对齐)、Center(居中)和凡ght(右对齐)三个值中的任何一个。如印aligu犷Conter''>刁p>表示标签对中的文本使用居中的对齐方式。

<br> 换行符

计算机生成了可选文字: <br>是一个很简单的标签,它没有结束标签.因为它只用来在网页中显示一个换行。

<nobr></nobr> 防止自动换行符

计算机生成了可选文字: <nobr>心nob。标签对用于防止浏览器将标签对中过长的内容自动换行显示。它对住址、数学算式、一行数字、程序代码等尤为有用。

<blockquote></blockquote>  缩进

计算机生成了可选文字: 在<blockquote>(七lockquote>标签对之间加入的文本将会在浏览器中按缩进的效果显示,与在普通的文本文件中使用Tab键进行缩进的效果一样。

<center></center> 水平居中

<marquee></marquee> 文本移动

计算机生成了可选文字: <m二qu二>心marquec>标签对通知浏览器移动显示嵌套在其中的图形和文本元素。<厅以quce>标签的一个主要树性是direction.用于指定其中的图形和文本移动的方向,direction属性的设紧值可以是left、right、down、up.<marquce>标签另外一个欢要的城性是比havior,用于指定其中的图形和文本移动的行为,direction属性的设里值可以是scroll、alternate、,lide,关于梅个设皿位的作用,读者只要做一下实验就再明白不过了.这要比用

behavior行为(滚动方式)值有scroll(连续不断的滚动)slide(滚动一次并停止)alternate(交替式滚动)

<dl></dl><dt></dt><dd></dd> 普通列表

计算机生成了可选文字: <dl>'ld卜用来创建一个普通的列表,dl是dcfinition115“定义列表)的简写。<dt>刁d。用来创建列表中的上层项目,dt是dcfinitiontcnn(定义术语)的简写。<dd>灯改l>用来创建列表中最下层项目,dd足definitiondefinition(定义对术语的解释定义部分)的简写。<d。心dt>和<d比卜灯dd>郝必须放在<dl>灯d】>标签对之间。肴石下边的例子就明白了。

计算机生成了可选文字: <html><hedd><title>一个普通列表<Iti七le><Ihedd><坎劝y><dl》<d七>中国城市《/dt><dd>北京</dd》<dd>上海</dd><dd>广州</dd><dt>美国城市</dt》<dd》华盛倾</dd><dd>芝加哥《/dd><dd>纽约</dd》《/dl></body》<Ihtml》 

<ol></ol>创建标有数字的列表

<ul></ul>创建标有圆点的列表

<li></li> 列表项

计算机生成了可选文字: 《body><p》中国城市</p》《01><11>北京</11><11>上海</11><11>广州</11><101》<p》美国城市<,p><Ul><11>华盛顿</11>《11》芝加哥</11》<11>纽约</11>《IUI》</坎劝y> 

<pre></pre> 对文本预格式化处理

计算机生成了可选文字: 印记卜口pre>标签对用来对文本进行预格式化处理.浏览器显示网页文件中的文本内容时,它会忽略用来分隔和对齐内容的许多空格及换行。预格式化文本标签对<pre>刁pre>告诉浏览器在屏幕上显示嵌套在其中的所有空格和空行.

计算机生成了可选文字: 画蔺砂业全颐声____.二工文伙已一椒O格截功.掀四肠丽丽云石一一一一一―--bbbbbbCCCCCdddddddddddd《fontSIZe一20Co10r一red>bbCCC《font) 

【文本标签】

<h1></h1>….<h6><h6> 标题行

计算机生成了可选文字: HTML语言提供了将文本作为标题显示的一系列标签对:<hI>(币l>’二<h6><小6>,一共6对标签。<hI>切1】>是字号鼓大的标题.而<h6>灯h6>则足字号址小的标题,h后面的数字越大,标题文本的字号就越小。如果HTML文档‘!,需要妓示标题文本的话,便可以使用这6对标趁标签。

<b><i><u><sub><sup> 加粗 斜体 下划线 下标 上标

<font></font> 字体

计算机生成了可选文字: 常见的物理样式元素包括:B元素指定一段文本,使浏览器将其显示为粗体字。

计算机生成了可选文字: I元素指定一段文本,使浏览器将其显示为斜体字。U元素指定一段文本,使浏览器将其显示为带下划线的文字。TT元素指定一段文本,使浏览器将其显示为固定大小的打字体字符。SUP元素指定一段文木,使浏览器用较小的字体将其显示为上标。SUB元素指定一段文本,使浏览器川较小的字体将其显示为下标。常见的逻辑样式元素包括:EM元素对文档中的某段文本进行强调,通常用斜体字显示出来。STRONG元素对文档中的文本进行强调,通常用粗体字显示出来。CITE元素用来指明文档中出现的书名或其他引用内容。

计算机生成了可选文字: 《坎劝y,<hl》最大的标砚(/hl》《h3》使用h3的标越</h3》《h6》最小的标砚<Ih6>。p》《b》粗体字文本《/b》</p》《p》《乡》斜体宇文本</i,</p》《p》<u》加一下划线文本</u》。/p>《p》《tt》打字机风格的文本。/tt》《/p>,》。cio.》引用方式的文本《/ci七e》心/p》《p》《掀》强润的文本《,em》《/p》<p><stron,>加觅的文本《15仁rong,《/p>印》‘fontsize二’+1'colar二’red.,size取位·+1.、color取位一red.时的文本《1font》<Ip>

【超链接标签】

URLUniform Resource Locator ,统一资源定位。

计算机生成了可选文字: 库的语句就是这个资源的URL。通常的URL一般由网络协议名、资源所在的主机名、网络服务程序的端口号和资凉本身的名称等4个部分组成,例如下而的uRL:http刀www.it315.org:8080lindex.html其中的网络协议是HTTP(HypertextTran、ferProtocol,超文本传输协议),资源所在的主机名为www.it315.org,HTTP服务器程序所用的网络端口号是5080,资源名为方ndex.html。

相对URL    基于当前目录下的资源位置,用/表示子目录,用../表示父目录

URL添加参数  格式:url?para1=value1&para2=value2

计算机生成了可选文字: http:刀www.it315.or岁dealregister.html?name=zhangsan&password==123

定位标记的URL  格式url/#定位标记

计算机生成了可选文字: 在一个网页文件中,还可以定义若干定位标记,征个定位标记都有一个名称.以后,就可以使用这个网页文件的URL地址后跟一个位到这个网页中的定位标记处。例如:在indcx."#"再跟上定位标记的名称,来八接定的定位标记,要让浏览器直接定位到indc、.h.m!使用下面的URL格式:hnp:llwww.it315.0叼index.h.ml#父ctionZ·ht而网页文件中定义了一个名为页而中的标记为sectionZ的位哭上,sCCtionZ就可以

URL编码

计算机生成了可选文字: 传送。URL编码遵循下列规则:(2)对压9,a一i,A,Z之间的字符保持不变.(3)对于所有其他的字符,用这个字符的当前字符集编码在内存中的卜六进制格式表j互左夔迎生叁坦逝迷业延址途亘坦例如,’多符“十”川%ZB表示,字符"=”用%3D表示.字符“&”用%26表示,征个使用GB2312编码的中文字符在内存中占两个字节.字符“中”用%D6%D0表示,字符“囚”用%Bg%FA表示。注愈,同一个中文字符在不同的字符集编码方式下,在内存中的编码位也是不同的,一个字符的URL编码是针对字符在内存中的编码值而言的,采用不同编码的同一个字符的URL编码结果是不同的。

mailto URL  mailto:EmailAddress

计算机生成了可选文字: mailto:收件人的E一mall地址在收件人的E一ma”地址后面,还可以使用?附带若干参数,有效的参数名为subjeC卜伙川y、CC、BCC,为这些参数名指定的参数位,会分别城写邮件发送程序的对应栏目。这些参数的使用格式,与HTTP协议的URL后的参数使用格式一样,对其中的字符也可以使用URL编码,但空格必须用“%20”来表示.而不能用加号(+)来表示。下面是一个maiItoURL的例子:厅画lto:zxx@i已15.org?,ubecl==Feedback&伙川y二how%20arc%20you!叮画ItoURL只是对网页功能的一个扩展.口前还不足1ntemct标准。

<a href="#"></a> 创建超链接

计算机生成了可选文字: 要创建超链接.首先需要在某个文本或图像的两端.分别放咒<ahref="".>心a>中的起始和结束标签,还需要将该标签的href属性设置为访问者单击超链接文本或图像时,浏览器所要访问的Intemet资源的URL。例如,对于下面的HTML语句:<ahref=='httP:,/认八仍对.it315.org/.>工T资讯交流网</a>

<a name="aa"></a>  创建定位标记

计算机生成了可选文字: <anarne="">标签要结合<ahref="">灯廷>标签对使用才有效果。<aname二”">标签用来在HTML文档中创建一个定位标记,属性name是不可缺少的,它的值也就是定位标记名,例如:《aname二”标记1·》第一部分

计算机生成了可选文字: 《ahref二,.标记1”》跳转到第一部分</a>

【图像标签】

<img> 图像标签

计算机生成了可选文字: 石mg>标签有一个src属性,是必不可少的,它的设咒值是图形文件的相对或绝对URL地址。除src属性之外,<im夕标签还有alt、align、border、width和heigh,属性。.:.alt属性指定当鼠标移动到图像上时.图像上显示出的提示文本。另外,当src属性指定的图像无法加载时,浏览器将在<img>标签处显示alt属性所设置的文本。.:.align属性指定图像与它周围的文本的对齐方式,设咒值可以是top、bottom、left、right等。.:.border属性指定图像的边框宽度,设置值可以是大于或者等于0的整数,默认单位是像素。.:.width和height属性指定图像在浏览中显示的宽度和高度,默认单位也是像素,如果没有指定这两个属性,width和height的值为图像的原始大小。

<hr> 水平线

计算机生成了可选文字: <hr>标签是在HTML文档中加入一条水平线,它可以J'l接使用,也可以设咒s滋、color、width和noshade等属性。size设义水平线的粗细。width设定水平线的宽度,默认单位是像素。cofor设哭水平线的颜色。noshad。属性不用从仇,而是l't接加入标签中即可使用,它用来说明水平线显示时没有阴影(不加此属性水平线将有阴影)。

图形

计算机生成了可选文字: 要使用图像地图,首先必须定义出图像上的各热点区域的形状、位置坐标及其所链接到的ur!地址等信息,这个过程叫图像热点映射.图像热点映射需要使用<maPnarne=maPn~>心maP>标签对进行说明,其中的namc属性为该图像热点映射指定了一个名称.图像热点映射中的各个区域用嵌套在<mapnom。二m叩namc浏maP>之中~a>标签说明,~标签的格式为:<areashape二”形状”coords=”坐标”'href:”盯l'">,其中,sha伴属性定义了热点区域的形状:coords属性定义了热点区域的坐标值,坐标的原点位于图像的左上角顶点:址叮属性定义了该热点区域的链接地址,href部分也可以用nohref替换,表示在该区域单击鼠标无效。<田吧廷>标签还可以有一个target属性,用来指明浏览器在哪个窗口或帧中显示址叮属性所指向的网页资源。

计算机生成了可选文字: shape属性的设叉值可以是:rect定义一个矩形区域,coords属性设咒值为矩形的左上角、右下角的坐标.各个坐标值之间用逗号分开;poly定义一个多边形区域,coords属性设咒值为多边形各顶点的坐标值:c流le定义一个圆形区域,coords属性设置值为圆心坐标及半径,前两个参数分别为回心的横、纵坐标,第三个参数为半径。::.


版权声明:本文为博主原创文章,未经博主允许不得转载。

本文转载自:http://blog.csdn.net/xiaoxian8023/article/details/8022341

共有 人打赏支持
白志华
粉丝 29
博文 260
码字总数 57524
作品 0
长沙
程序员
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆 ⋅ 06/14 ⋅ 0

JavaScript零基础入门——(八)JavaScript的数组

JavaScript零基础入门——(八)JavaScript的数组 欢迎大家回到我们的JavaScript零基础入门,上一节课我们讲了有关JavaScript正则表达式的相关知识点,便于大家更好的对字符串进行处理。这一...

JandenMa ⋅ 前天 ⋅ 0

前端要以正确的姿势学习编译原理(上篇)

前端要以正确的姿势学习编译原理(上篇) 发布于 02:05 文章被以下专栏收录

brambles ⋅ 05/22 ⋅ 0

JavaScript中的this指针 理论化this指针的定义

JavaScript现在应用之广泛,远超其他任何语言,只要是一个合格的网站应用,基本上多多少少都会有JS的存在。在JavaScript中,this的指向被不少Coder所不解,但其实JS中的this理解起来也是相当...

superwebmaster ⋅ 05/29 ⋅ 0

开源书籍-JavaScript 编程精解

《JavaScript 编程精解》(Eloquent JavaScript)第三版,是由马尔奇·哈弗贝克(Marlin Haverbeke)JavaScript程序员编写的JS入门书籍,Marlin Haverbeke通晓多种编程语言,在Web开发方面积累...

marsdream ⋅ 06/04 ⋅ 0

JavaScript零基础入门——(九)JavaScript的函数

JavaScript零基础入门——(九)JavaScript的函数 欢迎回到我们的JavaScript零基础入门,上一节课我们了解了有关JS中数组的相关知识点,不知道大家有没有自己去敲一敲,消化一下?这一节课,...

JandenMa ⋅ 今天 ⋅ 0

物联网学习笔记——构建RESTFul平台1

0.前言 前些时间顺着Yeelink学习了RESTFUL,使用PHP和Slim框架尝试实现简单的REST API,树莓派可通过GET方法获得JSON数据包,通过这种方式实现了树莓派和服务器(我的PC)的互动。但是由于没...

thinkyoung ⋅ 2014/12/02 ⋅ 0

DOM系列:浏览器与DOM 主标签

最近回过头来在学习JavaScript中的DOM知识,随着学习进度的向前推移,越发感觉DOM知识点较多。为了能更好的系统了解清楚DOM相关的知识,我打算重新将DOM的学习划入到DOM系列当中。那么今天将...

一个敲代码的前端妹子 ⋅ 05/28 ⋅ 0

JS实现HTML静态页传值的方法

JS实现HTML静态页传值的方法 作者:前端开发-武方博 发布:2012-10-29 分类:javascript 阅读:8,735次 此处使用JS方式实现静态页之间值传递,其实很简单,废话不多说,见代码,先看index.h...

thinkyoung ⋅ 2015/06/01 ⋅ 0

给Web前端初学者的一些建议和学习方法路线

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰 ⋅ 05/24 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

中标麒麟(龙芯版)7.0优盘安装

########################################## 制作U盘安装盘: 1.准备U盘: PMON环境下U盘必须格式化成ext3; 昆仑固件环境下可以格式化成ext3,ext4 2.把整个镜像 xxx.iso 复制到U盘下面 3....

gugudu ⋅ 17分钟前 ⋅ 0

老司机写的大数据建模五步走

本文将尝试来梳理一下数据建模的步骤,以及每一步需要做的工作。 01 第一步:选择模型或自定义模式 这是建模的第一步,我们需要基于业务问题,来决定可以选择哪些可用的模型。 比如,如果要预...

gulf ⋅ 26分钟前 ⋅ 0

PacificA 一致性协议解读

PacificA 的 paper 在 08 年左右发出来的,比 Raft 早了 6,7 年。 在 PacificA 论文中,他们强调该算法使用范围是 LAN (Local Area Network),讲白了就是对跨机房不友好。 不管是 ZAB,Raf...

黑客画家 ⋅ 28分钟前 ⋅ 0

盘符图标个性化

设置自己的专属盘符图标 准备ico格式的图片文件一个,在根目录下创建autorun.inf文件 文件内容 [Autorun]icon=logo.ico 重新启动或者插拔U盘即可看到结果...

阿豪boy ⋅ 29分钟前 ⋅ 0

Windows下QQ聊天记录中图片的默认存放位置

Windows下QQ聊天记录中图片的默认存放位置在设置中是没有说明的。 实测位置在:D:\Documents\Tencent Files\974101467\Image 其中: “974101467”为对应的QQ号; “C2C”为个人之间的聊天图...

临江仙卜算子 ⋅ 35分钟前 ⋅ 0

GC 的三种基本实现方式

参考资料《代码的未来》(作者: [日] 松本行弘)。 由于并非本人原著(我只是个“搬运工“),SO 未经本人允许请尽情转载。 另外个人像说明一下这里所说的GC指泛指垃圾回收机制,而单指Jav...

xixingzhe ⋅ 36分钟前 ⋅ 0

Android双击退出

/** * 菜单、返回键响应 */ @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // TODO Auto-generated method stub if(keyCode......

王先森oO ⋅ 40分钟前 ⋅ 0

idea 整合 vue 启动

刚学习Vue 搭建了一个项目 只能命令启动 Idea里面不会启动 尝试了一下修改启动的配置 如下: 1.首先你要保证你的package.json没有修改过 具体原因没有看 因为我改了这个name的值 就没办法启动...

事儿爹 ⋅ 45分钟前 ⋅ 0

redis在windows环境的后台运行方法

在后台运行,首先需要安装redis服务,命令为 redis-server.exe --service-install redis.windows.conf --loglevel verbose 启动,命令为 redis-server --service-start 停止,命令为 redis-...

程序羊 ⋅ 49分钟前 ⋅ 0

比特币现金开发者提出新的交易订单规则

本周,四位比特币现金的四位开发者和研究员:Joannes Vermorel(Lokad),AmaurySéchet(比特币ABC),Shammah Chancellor(比特币ABC)和Tomas van der Wansem(Bitcrust)共同发表了一篇关...

lpy411 ⋅ 52分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部