HTML帮助文档重点筛选

 

  帮助文档测试:

一:a标签:

  target属性:

    1.._blank   <a href="document.html" target="_blank">my document</a> 
?          浏览器会另开一个新窗口显示document.html文档  
?   2._parent   <a href="document.html" target="_parent">my document</a>   
?          指向父frameset文档  
?   3._self    <a href="document.html" target="_self">my document</a>      
?          把文档调入当前页框 
?   4._top     <a href="document.html" target="_top">my document</a>     
?          去掉所有页框并用document.html取代frameset文档  

 

rel属性:没啥用

<a> 标签的 rel 属性用于指定当前文档与被链接文档的关系。
用于 <a> 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系,而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 <a> 标签中同时使用。
    
<a href="part_12.html" rel="next" rev="prev">
chapter 文档的章。
section 文档的节。
prev 集合中的前一个文档。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。

 

二:img属性:

alt text 定义有关图形的短的描述。
src URL 要显示的图像的 URL。
align top bottom middle left right 规定如何根据周围的文本来对齐图像。不支持。请使用 CSS 代替。
border pixels 定义图像周围的边框。不支持。请使用 CSS 代替。
height pixels % 定义图像的高度。
ismap URL 把图像定义为服务器端的图像映射。
longdesc URL 一个 URL,指向了描述该图像的文档。不支持。
usemap URL 定义作为客户端图像映射的一幅图像。请参阅 <map><area> 标签,了解其工作原理。
width pixels % 设置图像的宽度。

附加:base:(可以设置两个参数,一个是href,一个是target)

<!--在head头中附加base约束,<base> 标签,规定页面中所有链接的基准 url-->
<head>
    <base href="http://www.w3school.com.cn/i/" />
</head>
?
<body><img src="pic.gif" /></body>

 

三:area属性:(用到再说吧)

<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />
?
<map id ="planetmap">
    <area shape ="rect" coords ="0,0,82,126" href ="sun.htm" alt="Sun" />
    <area shape ="circle" coords ="90,58,3" href ="mercur.htm" alt="Mercury" />
    <area shape ="circle" coords ="124,58,8" href ="venus.htm" alt="Venus" />
</map>

 

三点五TextArea属性

定义一个文本区域 (text-area) (一个多行的文本输入区域)。用户可在此文本区域中写文本。在一个文本区中,您可输入无限数量的文本。文本区中的默认字体是等宽字体 (fixed pitch)。

<textarea rows="3" cols="30">
这里是文本域中的文本 ... ... ... ...
</textarea>
属性 描述
autofocus true false 在页面加载时,使这个 textarea 获得焦点。
cols number 规定文本区内可见的列数。
disabled true false 当此文本区首次加载时禁用此文本区。
form true false 定义该 textarea 所属的一个或多个表单。
inputmode inputmode 定义该 textarea 所期望的输入类型。
name name_of_textarea 为此文本区规定的一个名称。
readonly true false 指示用户无法修改文本区内的内容。
required true false 定义为了提交该表单,该 textarea 的值是否是必需的。
rows number 规定文本区内可见的行数。

 

四:aside

<aside>Aside 的内容是独立的内容,但应与文档内容相关。</aside>

 

五:audio和video(播放音频或者视频)

<audio src="../audio/生番(刘悦spam) - I Can Find Love (Live).mp3" autoplay controls onplay="this.currentTime=5">开始按钮</audio>
?
<video src="..hanxiao.xizao"></video>
属性 描述
autoplay true | false 如果是 true,则音频在就绪后马上播放。
controls true | false 如果是 true,则向用户显示控件,比如播放按钮。
end numeric value 定义播放器在音频流中的何处停止播放。默认地,声音会播放到结尾。
loopend numeric value 定义在音频流中循环播放停止的位置,默认是 end 属性的值。
loopstart numeric value 定义在音频流中循环播放的开始位置。默认是 start 属性的值。
playcount numeric value 定义音频片断播放多少次。默认是 1。
src url 所播放音频的 url。
start numeric value 定义播放器在音频流中开始播放的位置。默认地,声音在开头进行播放。

重点注意:为了解决浏览器匹配问题:使用source来进行浏览器匹配,将同意生源的两种适配都填入到audio

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

 

六:bdo从右往左输出文本(dir)

<bdo dir="rtl">Here is some text</bdo>
属性 描述 4 5
dir ltr rtl 必需。定义文本方向。 4 5

 

七:blockquote使用引用

<blockquote>帝国主义都是纸老虎 ... </blockquote>

 

八:canvas(画图工具)在js当中重点学习

属性 描述
height pixels 设置 canvas 的高度。
width pixels 设置 canvas 的宽度。
<script type="text/javascript">
function drawCanvas()
{
var canvas=document.getElementById(myCanvas);
var ctx=canvas.getContext(2d);
ctx.fillStyle=#FF0000;
ctx.fillRect(0,0,80,100);
}
</script>
...


<canvas id="myCanvas">
your browser does not support the canvas tag
</canvas>

 

 

九:表格:table(th,tr,td)

th:头行,tr:行,td:单元格的内容

  <col style="color:blue" />
  <col span="2" style="color:yellow" />
<colgroup span="3" style="color:blue"></colgroup>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>

  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>

 

col和colgroup的一些用法:

属性 描述 4 5
align right left center justify char 定义列中的单元格内容的水平对齐方式。 4  
char character 定义一个字符,按照该字符对齐文本。 与 align="char" 使用。 4  
charoff pixels % 规定第一个对齐字符的偏移量。 4  
span number 定义 <col> 应当横跨的列数。 4 5
valign top middle bottom baseline 定义列中的单元格内容的垂直对齐方式。 4  
width % pixels relative_length 定义列的宽度。 4  

 

十:短语记录:

以下元素都是短语元素。并不返回使用它们,但是通过使用样式表,可能取得更丰富的效果。

<em> 呈现为被强调的文本。
<strong> 定义重要的文本。
<dfn> 定义一个定义项目。
<code> 定义计算机代码文本。
<samp> 定义样本文本。
<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var> 定义变量。您可以将此标签与 <pre><code> 标签配合使用。
<cite> 定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。

 

十一:<embed>标签:嵌入插件等内容

?
标签必须有 src 属性。
?

提示:您无法在开始标签和结束标签之间写文本,来说明旧式的浏览器不支持该标签,就像 <audio><video>

<embed src="horse.wav" />
属性 描述
height pixels 设置嵌入内容的高度。
src url 嵌入内容的 URL。
type type 定义嵌入内容的类型。
width pixels 设置嵌入内容的宽度。

 

扩展:<event-source>:由服务器发送事件的来源

 

十二:表单内容:form

1.基础语法:

      <form action="demo1.html" method="POST">
        <p>姓名:<input type="text" name="name" ></p>
        <p>密码:<input type="password" name="password"></p>
        <p>
            <input type=
                   "button" value="想提交嘛">
            <input type="reset" value="信不信让你重新填写">
        </p>
        <p>
            <input type="radio"(单选按钮框) name="无所谓" value="男"(值)  checked/><br/>
            <input type="checkbox" name="checkbox"><input type="checkbox" name="checkbox" checked><input type="checkbox" name="checkbox"></p>

        <!--单选列表(这个感觉会经常用)-->
        <select name="like" id="like_range" >
            
            <option value="2">十分的一般喜欢</option>
            <option value="1" selected>十分喜欢</option><!--注意这里是selected-->
            <option value="3">不喜欢才怪呢</option>
        </select>

        <!--文本域(有很多文字需要提交或者书写的时候这样子搞)-->
        <div id="area">
            <TextArea rows="20" cols="30">
                填入信息:
            </TextArea>
        </div>

        <!--更加高级的一些操作-->
        <div>
            <p>邮箱:<input type="email"(邮箱)  name="email"/></p>
            <p>请输入你的网址:<input type="url"(网址)  name="userUrl"/></p>
            <p>请输入数字:<input type="number"(数字)  name="num" min="0"(允许的最小值) max="100"(允许的最大值) step(合法的数字间隔)="10"/></p>
        </div>

 

属性 描述
accept list_of_mime_types 一个逗号分隔的 MIME 类型列表,指示文件传输的 MIME 类型。注释:仅可与 type="file" 配合使用。
align left right top texttop middle absmiddle baseline bottom absbottom 定义图像之后的文本对齐方式。 不支持,请使用 CSS 代替。
alt text 定义图像的替代文本。 注释:仅可与 type="image" 配合使用。
autocomplete    
autofocus true false 当页面加载时,使输入字段获得焦点。 注释:type="hidden" 时,无法使用。
checked true false 指示此 input 元素首次加载时应当被选中。 注释:请与 type="checkbox" 及 type="radio" 配合使用。
disabled true false 当 input 元素首次加载时禁用此元素,这样用户就无法在其中写文本,或选定它。 注释:不能与 type="hidden" 一同使用。
form true false 定义输入字段属于一个或多个表单。
inputmode inputmode 定义预期的输入类型。
list id of a datalist 引用 datalist 元素。如果定义,则一个下拉列表可用于向输入字段插入值。
max number 输入字段的最大值。
maxlength number 定义文本域中所允许的字符最大数目。
min number 输入字段的最小值。
name field_name 为 input 元素定义唯一的名称。
pattern    
readonly readonly 指示是否可修改该字段的值。
replace text 定义当表单提交时如何处理该输入字段。
required true false 定义输入字段的值是否是必需的。 当使用下列类型时无法使用:hidden, image, button, submit, reset
size number_of_char 定义 input 元素的大小。不再支持。
src URL 定义要显示的图像的 URL。 仅用于 type="image" 时。
step    
template template 定义一个或多个模板。
type button checkbox date datetime datetime-local email file hidden image month number password radio range reset submit text time url week 指示 input 元素的类型。 默认值是 "text" 注释:该属性不是必需的。但是我们认为应该使用它。
value value 对于按钮、重置按钮和确认按钮:定义按钮上的文本。 对于图像按钮:定义传递向某个脚本的此域的符号结果。 对于复选框和单选按钮:定义 input 元素被点击时的结果。 对于隐藏域、密码域以及文本域:定义元素的默认值。 注释:不能与 type="file" 一同使用。 注释:与 type="checkbox" 和 type="radio" 一同使用时,此元素是必需的。

2.一些高级用法:

<input type="hidden"(隐藏域) value="666" name="userid"><!--隐藏域-语法-->
<input name="name" type="text" value="张三"  readonly(只读文本框)><!--只读和禁用-语法-->
<input type="submit "  disabled (禁用)  value="保存" >

<!--表单元素的标注
1.增强鼠标的可用性
2.自动将焦点转移到与该标注相关的表单元素上-->
<label for="id"(表单元素的id)>标注的文本</label>
<input type="radio" name="gender" id="male"/(表单元素id)>

 

 

3.表单的一些初级验证:

表单初级验证的方 :1.placeholder、2.required、3.pattern

        <!--简单初步验证-->
        <div>
            <!--placeholder验证:
                        1.input类型的文本框提供一种提示(hint)
                        2.可以描述文本框期待用户输入何种内容
                        3.提示语默认显示,当文本框中输入内容时提示语消失
                        4.适合于input标签:text、search、url、email和password等类型
                        5.解释:也就是在框内有灰暗的字,一旦输入九没有了
            -->
            <input type="search" name="search1" placeholder="X"/>

            <!--required:必须要填写-->
            <input type="text" required value="必须填写"/>
            <!--pattern:正则表达式匹配-->
            <input type="text" required pattern="^1[358]\d{9}"/>
        </div>

 

 

十三:一个划分神器:hr(是个单标签,和br一样)

HTML帮助文档重点筛选HTML帮助文档重点筛选

 

 

十四:Label元素

label标签的for属性的效果就是,鼠标点击“女”实现radio选中的效果,主要 归功于for=nv 而且必须要求input文本框的id也等于nv,男这个radio作对比,没有这个效果

  <div>
                <label for="nan1"></label>
                <input type="checkbox" id="nan" />
                 <label for="nv"></label>
                <input type="checkbox" id="nv" />
            </div>

 

注意:也就是点击范围变成Label+id指向的值了

 

十五:重点::::iframe网页嵌套

<!--iframe常用属性:
1.frameborder:是否显示边框,1(yes),0(no)
2.height:框架作为一个普通元素的高度,建议在使用css设置。
3.width:框架作为一个普通元素的宽度,建议使用css设置。
4.name:框架的名称,window.frames[name]时专用的属性。
5.scrolling:框架的是否滚动。yes,no,auto。
6.src:内框架的地址,可以使页面地址,也可以是图片的地址。
7.srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
8.sandbox: 对iframe进行一些列限制,IE10+支持-->

<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>

 

具体操作请看:https://www.cnblogs.com/hq233/p/9849939.html

 

十六:menu菜单(简单列表)

<!--
    li:列表每行元素
    ol:有序列表:ol必须包含li,否则无效果
    ul:无序列表,ul必须包含li,否则无效果
-->

<menu>
    <li><input type="checkbox" />Red</li>
    <li><input type="checkbox" />blue</li>
    
     <ol>
         <li><input type="checkbox" id="cck">1</li>
         <li><input type="checkbox" id="cck">2</li>
     </ol>
     <ol>
         <li><input type="checkbox" id="cck">3</li>
     </ol>
</menu>

 

属性 描述 4 5
autosubmit true false 如果为 true,那么当表单控件改变时会自动提交。   5
compact compact_rendering 不支持。请使用 CSS 代替。 4  
label menulabel 为菜单定义一个可见的标注。   5
type context toolbar list 定义显示那种类型的菜单。默认值是 "list"。   5

 

十七:link:连接外部文件

<link rel="stylesheet" type="text/css" href="c3.css"   />

 

十八:sub、sup上标和下标

这段文本包含 <sub>下标</sub>
    这段文本包含 <sup>上标</sup>

HTML帮助文档重点筛选

 

十九:span标签

<p>This is a paragraph <span style="color:#00ff00;">This is a paragraph</span>
This is a paragraph</p>

 

这个是对文字进行一些修改,之后使用css的过程中也会经常使用

 

二十:section+article(就跟写文档一样)

section目的是区分块, 用来定义文档中特定的区块

HTML帮助文档重点筛选 HTML帮助文档重点筛选

 

 

十一:script使用:(之后等到复习javascript就ok)

<script type="text/javascript">
document.write("Hello World!")
</script>

 

注意:

如果 async 属性为 true,则脚本会相对于文档的其余部分异步执行,这样脚本会可以在页面继续解析的过程中来执行。

如果 async 属性为 false,而 defer 属性为 true,则脚本会在页面完成解析时得到执行。

如果 async 和 defer 属性均为 false,那么脚本会立即执行,页面会在脚本执行完毕继续解析。

 

十二:progress显示进度条:可以是js脚本也可以是加载界面的进度条

<progress><span id="objprogress">85</span>%</progress>
<!--对象下载或者加载的进程-->

 

二十三:nav:用于上一页和下一页切换(那伟)

<nav>
  <a href="index.htm">w3school 在线教程</a>
  <a href="html5_meter.htm">上一页</a>
  <a href="html5_nest.htm">下一页</a>
</nav>

 

注意:如果文档中有“前后”按钮,则应该把它放到 <nav> 元素中。

 

二十四:Map(懒得看了,直接cv了)

图像的影像地图超链接,<map>标签浅谈

在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源。这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。这就是影像地图。要完成地图区域超链接要用到三种标签:<img><map><area>下面分别介绍这些标签的用法:

影像地图(Image Map)标签的使用格式:

    

 

   <!-- 插入图片时要在<img>标记中设置参数usemap="#图的名称" ismap,以表示对图像地图(图的名称)的引用;-->

  <map name="图的名称">

?    <!--用<map>标记设定图像地图的作用区域,并用name属性爲图像起一个名字-->

   <area shape=形状 coords=区域座标列表 href="URL资源地址">

   ......可根据需要定义多少个热点区域

   <area shape=形状 coords=区域座标列表 href="URL资源地址">

  </map>

 

【1】 **shape -- 定义

热点形状**

shape=rect: 矩形

shape=circle:圆形

shape=poly: 多边形

【2】coords -- 定义区域点的坐标

a.矩形:必须使用四个数字,前两个数字为左上角座标,后两个数字为右下角座标

例:<area shape=rect coords=100,50,200,75 href="URL">

b.圆形:必须使用三个数字,前两个数字为圆心的座标,最后一个数字为半径长度

 

  例:<area shape=circle coords=85,155,30 href="URL">

c.任意图形(多边形):将图形之每一转折点座标依序填入

    例:<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

下面是一个例子

 

  <map name="planetmap" id="planetmap">
    <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
    <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
    <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
  </map>

 

在制作本文介绍的效果时应注意的几点:

   1、在<img>标记不要忘记设置usemap、ismap参数,且usemap的参数值必须与<map>标记中的name参数值相同,也就是说,“图像地图名称”要一致;

   2、同一“图像地图”中的所有热点区域都要在图像地图的范围内,即所有<area>标记均要在<map></map>之间;

   3、在<area>标记中的 cords 参数设定的坐标格式要与shape参数设定的作用区域形状配套,避免出现在shape参数设置的矩形作用区域,而在cords 中设置的却是多边形区域顶点坐标的现象出现。

HTML帮助文档重点筛选

上一篇:CSS实现网页背景图片自适应全屏的方法


下一篇:macs 学习