投稿
  1. 首页
  2. 随笔

html之document

百度英文翻译器 • 2023-4-4 • 随笔 • 阅读 9

html之document,第1张

document.all是指文档内部的所有标签，从html开始 document.anchors指的是页面中所有的锚点，页面中锚点跳转的方法目前总结2种： 1.采用name的形式：<a href="#top"></a>在要跳往的位置设置<a name="top"></a>(记得一定要是a标签) 2.采用id的形式:<a href ="#bottom"></a>在要跳往的位置设置<div id="bottom"></div>(任意标签都可以) 小结:经过测试id的这种在document.anchors并不能获取，且document.anchors.length的个数是由有几个<a name="***"></a>决定的 document.forms指获取页面中的所有的表单form(有多少个form标签document.forms,length就是多少) 关于form表单上面常用的一些属性: 1.action:请求的地址，即表单的值发往的地址 2.method:请求的方式，值有post和get 3.enctype:请求的值怎样编码，值: application/x-www-form-urlencoded(默认，编码，将空格转换成"+",其它特殊字符转换成ASCII-HEX值) multipart/form-data(不编码，但是上传文件等必须用这种格式) text/plain(将空格转换成"+") 4.name:表单的名字 5.novalidate:值为novalidate,当有此值得时候，对表单里面的值不做校验，如特殊类型email,number等 6.target:规定在何种窗口打开action的url(还可以指定窗口名字哦) 7.accept_charset:服务器端可处理的字符集（可以规定一个或者多个，用逗号隔开） document.images指文档中的img的个数，注意通过js appendChild进去的也算 document.links指文档中间Area和link对象的个数，目前测试来说，只有area和a标签计算在其中 关于area标签的使用:(点击图像的某一块区域跳转到哪里) area标签是和map标签配套使用的，主要使用方法和锚点的有点像，在要映射的图片(img标签)上面加入usemap的属性(usemap="#***")然后在map标签上面加入id或者name等于usemap属性的值(建议id和name都加，各浏览器不同，Google的支持name),然后用map包裹area标签 area标签的属性如下: alt:计算此区域失败时，显示的文字 shape:此区域的形状,值有:rect或者rectangle(矩形),circle或者circ(圆形)，poly或者polygon(多边形) href:跳转的链接，绝对连接，相对连接，锚链接(和a连接中的锚链接比较像"#***") coords:画图形的时候的坐标,和shape配合使用，当时圆形的时候，为(x,y,r)当时矩形的时候为(x1,y1,x2,y2)两对角坐标，当是多边形的时候，为(x1,y1...xn,yn)为每个坐标点 target:规定在何种窗口下打开href,有如下几种值(href为锚链接也适用) 1._blank:在新窗口中打开 2._self:在当前窗口中打开(默认) 3._parent:在父窗口中打开 4._top：在整个窗口中打开 5.还可以自定义窗口 document.body直接拿文档中的body元素(并没有获取iframe的元素) document.cookie直接拿文档中的所有的cookie，注意遵循cookie的原则，例如，在别的页面设置的cookie，但是在当前页面下是拿的到的，document.cookie是获取的到该值的，如果是同源的用iframe引入的，也是获取的到的 document.domain是指文档当前的服务器域名 document.lastModified是指文档被修改的最后日期 document.referrer是指载入当前文档的文档的url,有点绕是不是，对的，他并不是指当前文档的url噢，例如，当前文档是直接打开的，那么document,referrer为空，如果是通过a链接跳转过去的，则是上一个页面的url，如果是iframe载入进来的，则是承载这个iframe的父文档 document.title是指返回当前文档的标题 document.URL是指返回当前文档的url(记得url是大写的URL,小写的是获取不到的) document.getElementById是指获取指定id的第一个元素 document.getElementsByName是指获取指定的name元素的集合，注意，name元素可能不止一个哦 document.getElementsByTagName是指获取指定元素标签的聚合，注意当输入的为‘*’，则为所有的元素，元素的排列顺序按照html的顺序来（传给document.getElementsByTagName的字符串可以不区分大小写，即div可以写成Div） 其实两者含义是差不多的，都是在文档里面写入html或者脚本，需要注意的是如果有延时等，在页面加载完了写入的时候，会重新加载文档流，导致页面之前的内容会没有了，他们的区别是用writeln的时候，文本后面会有一个换行符，在页面上面的体现是有一个空格，注意如果没有加document.open()和document.close(),会自动加上这两个，不过建议每次使用的时候手动加上 document.open(参数一，参数二)是指打开新的文档流，参数一是指打开新的文档编写的类型，参数二是指是否继承父文档的条目(测试了很多遍，不知道咋回事) document.close（）是指关闭文档流

SVG 即 Scalable Vector Graphics，是一种用来绘制矢量图的 HTML5 标签。你只需定义好XML属性，就能获得一致的图像元素。

使用SVG之前先将标签加入到HTML body中。就像其他的HTML标签一样，可以为SVG标签为之添加ID属性。也可以为之添加css样式，例如“border-style:solidborder-width:2px”。SVG标签跟其它的HTML标签有通用的属性。将SVG元素加入到HTML代码中，SVG提供很多绘图形状，例如线条、圆、多边形等。

SVG线条：

SVG线条用标签定义，在此标签内你还可以定义其他的属性。

该标签包括像起点坐标(x1,y1)和终点坐标(x2,y2)这样的属性。指定x1,y1,x2,y2值来设定起点终点坐标。在指定好坐标后，可以为之添加一些样式，在style属性中使用“stroke:Green”为线条指定颜色。同样也可以用stroke-width:2为线条设置宽度。

代码1：使用SVG画线

<!DOCTYPE html>

<head>

<title>Mrbool.com - HTML5 Tutorials</title>

</head>

<body>

<h2>HTML5 SVG Line Example</h2>

<svg id="svgLineTutorial" style="border-style:solidborder-width:2px" height="200px" width="200px" xmlns="http://www.w3.org/2000/svg">

<!--<line x1="0" y1="0" x2="50" y2="200" style="stroke:rgb(100,100,0)stroke-width:5"/>-->

<line x1="10" y1="20" x2="100" y2="200" style="stroke:Greenstroke-width:2"/>

</svg>

</body>

</html>

SVG画圆：

SVG提供了一种不同的标签来画圆。正如你看到的下面代码，circle有个id为myCircle。为了定义圆的中心以及半径，使用cx="55" cy="55"以及r="50"属性分别定义。使用fill="#219E3E"为圆填充颜色。同样你可以用stroke="#17301D" stroke-width="2"定义圆周线条颜色和宽度。

代码2:使用SVG画圆

<!DOCTYPE html>

<head>

<title>Mrbool.com - HTML5 Tutorials</title>

</head>

<body>

<h2>HTML5 SVG Circle Example</h2>

<svg id="svgCircleTutorial" height="250" xmlns="http://www.w3.org/2000/svg">

<circle id="myCircle" cx="55" cy="55" r="50" fill="#219E3E" stroke="#17301D" stroke-width="2" />

</svg>

</body>

</html>

SVG矩形:

同样的使用标签来画矩形，我们同样设置了 id 属性 “myRectangle” ,用 width="300" height="100" 定义高宽，使用 fills 属性定义填充颜色。用 strock 定义边框。还有一点需要注意，我用 fill-opacity="0.5" stroke-opacity="0.5" 为 stroke 和 filling 都添加了透明度。

代码3:SVG画矩形

<!DOCTYPE html>

<head>

<title>Mrbool.com - HTML5 Tutorials</title>

<meta charset="utf-8" />

</head>

<body>

<h2>HTML5 SVG Rectangle Example</h2>

<svg id="svgRectangleTutorial" height="200" xmlns="http://www.w3.org/2000/svg">

<rect id="myRectangle" width="300" height="100" stroke="#17301D" stroke-width="2" fill="#0E4E75" fill-opacity="0.5" stroke-opacity="0.5"/>

</svg>

</body>

</html>

SVG椭圆：

同样是用标签来绘制椭圆。设置其 id="myEllipse" ，给定起中心坐标 cx="120"cy="60"，长轴短轴半径 rx="100" ry="50",并用设置填充颜色、边框宽度以及边框颜色style="fill:#3F5208stroke:blackstroke-width:3"。

代码4:SVG画椭圆

<!DOCTYPE html>

<head>

<title>Mrbool.com - HTML5 Tutorials</title>

<meta charset="utf-8" />

</head>

<body>

<h2>HTML5 SVG Ellipse Example</h2>

<svg id="svgEllipseTutorial" height="150" xmlns="http://www.w3.org/2000/svg">

<ellipse id="myEllipse" cx="120" cy="60" rx="100" ry="50" style="fill:#3F5208stroke:blackstroke-width:3"/>

</svg>

</body>

</html>

SVG多边形：

使用特定标签绘制多边形,points属性用来定义多边形的几个顶点，用左边对来定义，形如 points="10,10 75,150 150,60" ，这里定义了三个顶点(10,10),(75,150),(150,60)。同上面一样，用 style="fill:#63BCF7stroke:blackstroke-width:3" 定义多边形填充颜色、边框以及边框宽度。

代码5：SVG画多边形

<!DOCTYPE html>

<head>

<title>Mrbool.com - HTML5 Tutorials</title>

<meta charset="utf-8" />

</head>

<body>

<h2>HTML5 SVG Polygon Example</h2>

<svg id="svgPolygonTutorial" height="200" xmlns="http://www.w3.org/2000/svg">

<polygon id="myPolygon" points="10,10 75,150 150,60" style="fill:#63BCF7stroke:blackstroke-width:3"/>

</svg>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7345006.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
百度英文翻译器 百度英文翻译器 一级用户组
0 0
上一篇 2023-04-04
下一篇 2023-04-04

发表评论

登录后才能评论

评论列表（0条）

保存