说说课外班那些事儿

花生上小学以前几乎也从来不达标了什么课外班,不是休思量报,主要是真的没有钱。

一、web标准

外父亲的说话说,那么小能学明白什么什么?我对这态度意味着嗤之为鼻子。

web标准-网页制作的正规,它是出于同密密麻麻专业结合的,主要包含三只地方:结构(html,xhtml),表现(css),行为(javascript)

原先一个总人口了之早晚怎么都吓说,一个人数吃饱全家不馁。

篮球 1

来矣孩子当了母亲就不那么想了,总想将最好好之叫子女,我不了解别人怎样,反正我不怕这么。

 

急忙小学的早晚发现小孩们还见面轮滑,于是叫他也回报个班学学,这同回报不要紧,报至了规范的速滑队。

注:布局及表现的业内由w3c(万维网联盟)制定,行为正式由ECMA(欧洲电脑厂商联合会)制定

被了短道速滑的生,我思念当花生心里应该是同样集市噩梦。因为极度辛苦了,半小时以上的体能训练,一个半钟头的轮滑训练。


假设自己这样说公切莫晓得,你看看冬奥会的比赛,那些选手怎么滑的,他们不怕怎么滑,只不过是轮子的那种鞋。

老二、html相关概念

是因为场地的案由,我们只能去国家体育场训练,开车要四十分钟左右,地铁也得一样钟头。

1.html—超文本标记语言

每周也不能够保证训练日,所以总是提升非了有点。

2.xhtml—可扩大的超文本标记语言

咱当下报班的时呢从不给他滑的怎么样,可是长日子的教练没有作用,不管是父母亲还是亲骨肉都好泄气,因为一波又同样波的男女开始追了公,那种感觉并无顺眼。

3.html5—html的第五不成重大修改

加上三年级作业猛增,于是自己同他大果断决定放弃,改了篮球。  

注:html和xhtml的区别:

花生妈妈拍照

XHTML规范:必须小写,有始了标签,属性也因此对引号。

坚持不懈了三年以转移了绝对不行可惜,但无道,重点是要是练,并且他早已到了厌烦期。

HTML规范:不分轻重缓急写,有开始与了标签,也可拿收标签放在开始标签里,如:<input
type=’text’ /> 。属性可用双引号、单引号(必须放对运用)。

自我同花生说,妈妈被您变一个走,你瞧您喜不喜欢?他相同听,一下来了振奋头,表示特别乐于打篮球。

xhtml相对于html并无多新的价签,只是语法要求更严峻,比如:标签须关闭,标记名称必须小写等

我对客说若坚持到底,不可知放弃,不然你过年还要回来练轮滑,他坚决的说,我便设由篮球。


则事先的动没坚持下来,但是于他来说,都是生取的,他的下肢力量特别高。

 

篮球对从环节,他得满场带球跑,你说说就精力,不挪窝能行么?

其三、html基本结构

咱得知花生的倒细胞几乎无,但是未能够以不谐和就放弃。

1.文档声明

假如无走,他周末就是手机,派,宅在老伴作妖。

html5的文档声明语法: <!DOCTYPE
html>

今日每周二五六日犹设训练两时,我一旦做的就算是陪伴。

企图:告知浏览器文档使用啊种 HTML 或 XHTML
规范

这里要提陪伴了,每个孩子的课余班实际上就是于考验家长的耐力,家长一放松,孩子比较你松的尚厉害。

2.html凡是网页的根元素或根本标签,所有的网页内容和标签还位居html标签中

因而,家长就算是比孩子还累的赶脚,没有好学,你想展示剑谁来拘禁?

语法: <html></html>

当斯过程被花生爸虽然不过问我们,但是他总会放冷箭,一到周六虽说,歇歇吧,孩子好麻烦的,得,好人他召开了,我作的与出强迫证似的。

3.html涵盖了零星分外有:head部分和body部分

想不到孩子看父母都未小心,你以为他还会生出多坚定?所以能够不请假绝对免放任课,坚持充分麻烦,习惯就是好哪!找个车轱辘滑训练图看看

head部分:一般设置meta头元素或引入一些表面的css文件,js文件等与重点词,描述

花生集训照片

安装字符编码:

今时就是雾霾,所以除了防御以外,也使增进自身体质提升!好发劲头斗争,花生的多同龄儿童还来运动类,有足球,乒乓球,羽毛球,游泳,跆拳道,武术,击剑,田径等等等等,都格外强,只要坚持都见面产生取,提升了体能,磨练了定性,爱上了移动,长大肯定会招女孩子喜,这就是是自我的目的!体育篇告一段得到!

<meta charset=”utf-8″/>
防止网页出现乱码

上传中,请稍候…

任何编码格式:gb2312,gbk

body部分:所有设于网页中形的情以及放置内容之竹签都位居body部分

HTML5 基本结构 (新建一个html文件时默认有那些代码)
<!DOCTYPE html>命名文档类型
<html></html>说明我们写的是标记语言
<head></head>文件头部
<title></title>文件标题(显示在状态栏上的内容)
<meta charset="utf-8" />编码格式
<body></body>文件主体(所有要写的内容)

  


 

 季、html基本语法

1.正常标记

语法: <标记 属性=”属性值”
属性=”属性值”></标记>

eg: <div class=”box”
id=”main”></div>

2.空标记

语法: <标记 属性=”属性值” />

eg: <img src=”1.jpg”/>

注:a)属性和性质值用等号连接,属性值要放在双引号中(所有标点符号都要是英文状态下之)

  b)标记名称全部运小写(标准)

  c)
属性和总体性之间因此空格隔开,不分开先后顺序


五**、html常因此标记**

1.网页题名**语法:** <hx>网页标题内容</hx>
(x为1-6)

eg: <h3>我是标题</h3>

2.段落文本**语法:**
<p>段落文本内容</p>

3.空格**html转义字符:**  

流动:常用其他转义字符:

“>” =>             “<” =<     
          版权声明=&copy

HTML转义字符表

4.要挟换行**语法:** <br/> (空标记)

5.加粗语法:

   <strong>加粗文本内容</strong>

   
<b>加粗文本内容</b>

6.倾斜语法:

   
 <em>倾斜文本内容</em>

   
 <i>倾斜文本内容</i>

7.水平分隔线**语法:** <hr/>

   <hr align="left" size="3" width="50%"/><!--水平线,起到分割的作用-->
    <hr align="center" size="3" width="50%"/>
    <hr align="right" size="3" width="50%"/>
    <hr noshade/>
    <!--align 左对齐 右对齐 居中-->
    <!--size 粗细 单位像素-->
    <!--color颜色-->
    <!--width宽度(就是这条线有多长) 50%表示的是父层宽度的50%-->
    <!--noshade (没有属性值的属性) 不要阴影 -->

 

篮球 2

 

8.齐标明和下标**语法:** <sup></sup>
上标      <sub></sub>
下标

9.无序列表语法:

     <ul>

     
  <li>aaa</li>
      
 <li>bbb</li>
      …
   </ul>

ul:type 有:circle 空心圆,disc
实心圆,square 实心正方形, none :前面无符号;

10.有序列表**语法:**

   <ol type=”a” start=”2″>

     <li>aaa</li>
     
 <li>bbb</li>
     …
   </ol>

:type用来安序号的花色,可以设置A,a,i,I,1

  start用来设置于几上马

eg:代码:

    <ol type="a" start="2">
        <li>今天天气不错,阳光明媚!适合敲代码!</li>
        <li>今天天气不错,阳光明媚!适合敲代码!</li>
        <li>今天天气不错,阳光明媚!适合敲代码!</li>
        <li>今天天气不错,阳光明媚!适合敲代码!</li>
        <li>今天天气不错,阳光明媚!适合敲代码!</li>
        <li>今天天气不错,阳光明媚!适合敲代码!</li>
    </ol>

 

  效果:(默认序号类型是数值
,设置属性type=“a”起作用,是于b开始  start属性作用)

  篮球 3

11.打定义列表

语法: <dl>
    <dt>A</dt>
    <dd>a1</dd>
    <dd>a2</dd>
    …
    <dt>B</dt>
    <dd>b1</dd>
    <dd>b2</dd>
    …
   </dl>

注:dt和dd是一视同仁关系

  在dl中可以在多组dt,dd,每组中不得不有一个dt,可以有多独dd

12.图片**语法:** <img src=”图片路径” width=”数值”
height=”数值” alt=”替换文本” title=”提示文本”/>

注:alt和title的区别

  title是当鼠标悬停在图纸上不时如来得的提示信息

  alt是当图片由某些原因无法正常加载时只要显示的轮换信息

     <img src="images/picture.jpg" border="2" width="200">

        <!--
          图片路径        src(相对路径)
          宽度            width
          高度            height
          边框粗细        border  
          水平对齐方式    align   left/center/right
          -->
        <!--如果想要等比例缩放,就只能给宽或高,二者中的一个-->

        <!--img align="center" 不可以实现图片居中的-->
        <!--div做桥,将图片放在div中,然后设置div中的内容居中-->
        <div style="text-align:center;">
            <img src="images/picture.jpg" align="left"/>
        </div>

 


相对路径的老三种写法:

1.当手上文件以及目标文件于同一目录下,写法如下:
目标文件名+扩展名

2.当即文件以及目标文件所处文件夹在相同目录下,写法如下:
目标文件所处文件夹名/目标文件名+扩展名

3.当手上文件所处文件夹和目标文件所处文件夹在平目录下,写法如下:../目标文件所处文件夹名/目标文件名+扩展名

流淌:../是乘返回到齐一级目录


 13.超链接**语法:**<a href=”http://链接地址或链接文件”
target=”_blank” title=”提示信息”>链接文本或图表</a>

注:
target属性用来安过链接是否以初窗口打开

  target=”_blank”
链接在新窗口打开

  target=”_self”
默认值,在遵照窗口打开

注:空链接 <a
href=”#”>新闻资讯</a> (跳反到页面的顶部)

14.表格**作用:**显示数据(多用于后台管理)

签释义:<caption></caption>:表头信息。

     <tr></tr>
:定义一个表格行;

     <th></th>
:定义一个表格头;自带位于中成效,若是纯文字,默认会以粗体的体制表现。

       <tbody></tbody>
:可以领略呢表的始末区域,在Chrome、FF浏览器通过DOM进行表格动态插入行的上,要动这。如果无进行DOM操作,可不要添加。

     <td></td>
:定义一个单元格;

语法: 

<table border=0 title="测试">
    <caption> 表格标题</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>22</td>
    </tr>
    <tr>
        <td><input type=text /></td>
        <td><input type=text /></td>
    </tr>
</table>

 

注:*报表相关属性:

(1)border 设置边框的小幅

(2)cellspacing
设置单元格之间的距离

(3)cellpadding
设置情节和单元格之间的当儿

(4)align=”left|center|right”
设置单元格内容的针对性齐方式

(5)width 设置单元格的大幅度

(6)height
设置单元格的万丈要tr的万丈

(7)colspan=”数值” 合并列(给td加)☆

(8)rowspan=”数值” 合并行(给td加)☆

   高级属性

(1)合并相邻单元格边框☆

  语法:
border-collapse:collapse(合并相邻单元格边框)|separate(边框分别);

  注: border-collapse给table加

eg:

不设置border-collapse
属性,默认值separate

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格高级属性</title>
    <style type="text/css">
    .tab{
        /*border: 1px solid black;*/
    }
    .tab td{
    border:1px solid black;
    padding:5px 10px;
    text-align: center;
}
    </style>
</head>
<body>
    <table class="tab" cellpadding="0" cellspacing="5" >
        <caption>测试数据</caption>
        <tr>
            <td>测试数据</td>
            <td>测试数据</td>
            <td>测试数据</td>
            <td>测试数据</td>
        </tr>
        <tr>
            <td>测试数据</td>
            <td>测试数据</td>
            <td>测试数据</td>
            <td>测试数据</td>
        </tr>
        <tr>
            <td>测试数据</td>
            <td>测试数据</td>
            <td>测试数据</td>
            <td>测试数据</td>
        </tr>
    </table>
</body>
</html>

 

浏览器显示:

篮球 4  

当我们设置border-collapse
:collapse时浏览器显示的机能:

篮球 5

  

 

2.定义表格标题的位置(给table加)**语法:**caption-side:top|bottom|left|right;

注:left和right只来火狐识别

  caption是一个块状元素

3.装单元格的距离(给table加)***语法:*border-spacing:数值+单位;

流淌:当装了border-collapse:collapse;时,border-spacing会失效

4.隐身或显示无内容单元格(给table加)***语法:*empty-cells:show(显示)|hide(隐藏);

5.表格搭架子算法(给table加)***语法:* table-layout:fixed|auto;

横流:当装也fixed的时节,单元格宽度固定,不依照内容稍发生变化

.tab3{
    table-layout: fixed;
}


    <table class="tab3" width="400" border="1" cellspacing="0" cellpadding="0">
        <tr height="30">
            <td width="300">jkfdjkdsjfkdsjfkdsjfkjdsfkjdskfjdskfjdskfjdskfjdskfjdskfjdskjfdsjfdsfds</td>
            <td width="100">1010101020030020303030004004</td>
        </tr>
    </table>

 浏览器显示力量:

篮球 6

表相关html属性

1.安装单元格内容水平对齐方式

align=”left|center|right”

2.装置单元格内容垂直对齐方式

valign=”top|middle|bottom”

3.设置表格分隔线

rules=”rows|cols|all|groups|none”

rows 行分隔线  cols 列分隔线  all
行分隔线和列分隔线  groups 组分隔线  none 没有分隔线

4.表格行分组

<thead></thead>
<tbody></tbody> <tfoot></tfoot>

5.表格列分组

<colgroup
span=”数值”></colgroup>

<col span=”数值”/>

流动:推荐应用colgroup进行列分组

span的默认属性值为1,一列为一组,设置为几即为几排列为同样组

最主要释义:

  colspan : 表示横向联合单元格
(篮球 7 )              rowspan :表示纵向合并单元格
篮球 8 )


 

六、表单

打算:用来采访用户信息

语法:<form method=””
action=””></form>

横流:所有的表单控件都如在form标签内

1.文本框

语法: <input type=”text” value=”admin”
name=”username”/>

注:value用来设置默认值

name属性主要供后端取输入的始末篮球还是信息

2.密码框

语法:<input
type=”password”/>

3.交付按钮

语法: <input type=”submit”
value=”登录”/>

注:交给按钮的默认value值为付出或交查询,可还安需要之value值

4.重置按钮

语法: <input type=”reset”/>

5.单选按钮

语法:<input type=”radio” name=”***”
checked=”checked”/>

注:下单选按钮时,一组吃之单选按钮必须补偿加相同的name属性值,才能够兑现多选同底成效

  设置checked属性可以兑现页面加载成功后补偿加默认选中状态

  当属性与性能值相同时,可以略属性值,如checked=”checked”
可以简写为checked

6.复选框(复选按钮)

语法:<input type=”checkbox” checked
disabled/>

流淌:checked属性主要利用在单选和复选按钮上

disabled属性用来装input控件的夺状态

7.下拉列表

语法: <select>

    <option>a</option>
    <option
selected>b</option>
    …
   </select>

注:selected用来设置下拉列表的默认选中起

8.文本域

语法:<textarea cols=”字符宽度”
rows=”行数”></textarea>

扩张:禁止用户通过拖拽改变文本域的轻重

textarea{resize:none;}

9.平淡无奇按钮

语法:<input type=”button”
value=”***”/>

注:寻常按钮无拥有提交的意义,通常结合js使用

日常按钮默认value值为空,可以重新设置value属性

10.提示信息:

a)可以用单选或复选按钮和文字进行关联,点击文字也可选中单选,复选按钮

eg: <input type=”radio” name=”sex”
id=”boy”/><label for=”boy”>男</label>

<input type=”checkbox” id=”ball”/>
<label for=”ball”>篮球</label>

b)将提示信息放置于label标签中好安装我们怀念使的体

c) label标签是外联元素

11.表单字段集及表单字段集标题

语法:<fieldset>

      <legend>用户注册</legend>
      …
   </fieldset>

打算:将form中之表单控件进行分组,
并添加一个标题

12.达到污染文书

语法: <input type=”file”/>

13.隐藏字段

语法:<input type=”hidden”/>

注: 主要供后端修改数据经常用

14.图像域

语法:<input type=”image”
width=”***” height=”***” src=”图片路径”/>

打算:使用图像作为提交按钮,具备提交功能


 

form标签上之系属性解释:

1.method
用来安装数据传送方式,一般也get和post方式

注:get和post的区别

1.
get是于服务器上获取数据,post是通往服务器传送数据。
2.
get是拿参数数据队列加到付表单的ACTION属性所指的URL中,值与表单内相继字段一一对应,在URL中好看看。post是由此HTTP
post机制,将表单内挨家挨户字段与那个内容放置在HTML
HEADER内一起传送至ACTION属性所依的URL地址。用户看不到这个历程。

  1. 对于get方式,劳务器端从而Request.QueryString获取变量的价,对于post方式,劳器端故Request.Form获取提交的多寡。
    4.
    get传送的数据量较小,不能够超越2KB。post传送的数据量较充分,一般被默认为未为限制。但辩解及,IIS4中极度大量也80KB,IIS5遇呢100KB。
    5.
    get安全性非常小,post安全性比较高。但是执行效率却比Post方法好。

2.action
用来安数据如果发送至之职务,一般也后端文件

eg: <form
method=”get/post”
action=”http://www.qfedu.com/index.php"&gt;&lt;/form&gt;


 

七、div

打算:在布局网页时用来分板块

语法: <div></div>


 

八、span

语法: 

<span>标签让用来构成文档中之行内元素。在行内定义一个区域,也就是单排内足以给<span>划分成好几单区域,从而实现某种特定功能。<span>本身没有其他性质。

当IE6下,span元素浮动时一定要将span元素放在a标签之前,不然,会冒出浏览器兼容问题,IE6下,浮动过后底span元素会朝着下错位一行。

唤醒和注释:

提示:请动<span>来组成行内元素,以便通过体制来格式化它们。

流淌:span没有定点的变现格式,只有在针对其利用样式时,才会起视觉及的差异

span可以兑现以文件的有一样片段单独出来


 

九、iframe框架和**<frameset>
标签**

 

1.iframe框架

语法: <iframe src=”3.表单.html”
width=”500″ frameborder=”0″ scrolling=”auto”></iframe>

注:width:iframe框架的增长率

     height:iframe框架的高度

       frameborder 
设置iframe框架的边框

       scrolling = “no” 
隐藏(去丢)iframe的滚条 

2.frameset 定义一个框架集,包含多独框架,每个框架还起独立的文档。

2.1 格式

<frameset >
  <frame src=”a.html” />
  <frame src=”b.html” />

  <noframes>框架无效</noframes>
</frameset>

 2.2 子项说明

<frame src=”a.html”
/> :子框架

<noframes></noframes>:浏览器不支持这个框架的常常,显示的情节。

 2.3 属性

frameset 属性:

  rows :表示子框架按行的体制布局(篮球 9)。以2单分支框架为例:rows=”30%,*”
,表示第一个框架占整个页面30%底惊人,第二单占剩下的;

  cols :表示子框架按列的体布局(篮球 10)。以2单分支框架为例:cols=”30%,*”
,表示第一独框架占整个页面30%的长短,第二单占剩下的;

  noresize=”noresize”
:表示不调整子框架的限量。

frame 属性:

  src :指向一个资源(如页面、图片等)的URI;

  name :指定框架的称呼,以便进行框架之中的操作。

十、html注释


 

语法: <!–注释内容–>