起名HTML5效了便错过浪迹天涯的我…

初涉H5的就学,完全萌新一枚,每天虽然累却着实前所未有的多,不敢出一些懒,真的不思时间白白浪费。到今竣工,会了简易的表单制作,还有一点点微细的引以自豪,多的背了,下面展示下我当时同全面的学习笔记吧!再糊上本身好做的小表单!

起名 1

起名 2

1.

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″>
        <title>打吉祥小游戏</title>
    </head>
    <body>
        <form action=”_05html-表单.html” method=”get”>
            <table>
                <tr>
                    <td>注册手机号</td>
                    <td>
                        <input type=”text” name=”tel” />
                    </td>
                </tr>
                <tr>
                    <td>注册密码</td>
                    <td>
                        <input type=”password” name=”password”
/>
                    </td>
                </tr>
                <tr>
                    <td>备用邮箱</td>
                    <td>
                        <input type=”text” name=”mail”/>
                    </td>
                </tr>
                <tr>
                    <td>上传头像</td>
                    <td>
                        <input type=”file”/>
                        
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type=”submit” value=”提交” />
                    </td>
                    
                </tr>
                <tr>
                    <td>图片点击提交→</td>
                    <td>
                        <input type=”image” src=”../img/icon.png”
/>
                    </td>
                </tr>
                <tr>
                    <td>游戏偏好</td>
                    <td>
                        <input type=”checkbox” name=”hobby”
value=”抽” />抽
                        <input type=”checkbox” name=”hobby”
value=”扇” />删
                        <input type=”checkbox” name=”hobby”
value=”捶” />捶
                        <input type=”checkbox” name=”hobby”
value=”踹” />踹
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

“然然,外边风大,我们回屋吧!”身后传关切之声,把习然从思路中拉回。

 

一个月份前之车祸,让习然身被伤害,她因为在轮椅上,看在花开满园,身体不禁微颤。还吓,她发出苏洋,想到身边还有这个对其未去不丢的好姊妹,习然嘴角勾出了扳平志好看的弧度。

 

“嗯。”习然转身抬头道。阳光明媚了苏洋的头发随风飘起,白皙的脸孔沾染了曙光温润令人微醺,习然回头看看的饶是当时同样幕,突然又忆起了什么来,兴奋道,“洋洋,我们失去踏上青好不好?”

一.meta标签常用性

三月底清早带来在丝丝凉意,苏洋站在习然身后不声不响的有助于轮椅往屋里走去,“我一旦更换衣服。”习然听到苏洋的应对心情又更加快乐起来,因为突然的车祸习然双腿伤,虽然休息了一个月份,却仍亟需依靠轮椅代步,复健的进程更漫长,天喻它在医院闷了即将长蘑菇了。当然,苏洋知道。

1.charset:设置文档的字符集编码格式

起名 3

HTML5备受安装字符集编码:<meta
charset=”UTF-8″>

原创照片,请不转载

 

2.

>>>常见的字符集编码格式:

“洋洋,还记得这里不,你说你当时怎么那么蠢,连个自行车都未会见跨,我就算立在今日这个地方,看在您于那边,你看,就是那里,”,说着习然用手靠着前方的石凳,捧腹大笑说道,“骑到沙堆上,哈哈……”苏洋一路有助于着习然来到生态园,听在习然开怀的说着他俩以联合这样多年的趣事,还有苏洋的囧事。

a.GB-2312:国际码,简体中文

“11年了。”苏洋往习然所据方向为去,原来荒废的院校后山如今已成了生态园的同一有些,叉枝横生的梨树修剪的千姿百态优雅,梨花如轻纱细绸的盛开,在青春里增添了过多舒服。杂草横生的抽已铺就上绿意盎然的绿地,不失为春游野餐的好去处。旧亭台已于修葺一新,坑坑洼洼的泥泞路铺设上了整的石板。

b.GBK:扩展的国标码

那年,生态园还尚无,面前的石凳也远非,也是这般个风和日丽的清晨,一个通过在清灰棉麻连衣裙的女孩,独自站在塑造下笑的比方梨花灿烂,清丽可人。柔软的青丝倾泻而下,如丝绸般散落于肩头上,江南女人独有的缓静美被冷落之笺注清明。而继它们因在杂草横生的地上,低头专心于画板上涂涂画画,绿影婆娑,梨花飘落,星星点点的光斑透过花间洒在它们底身上。

c.UTF-8:万国码,Unicode

那么时候正因为远看这样一合乎如出尘画卷般的景致,苏洋才会去了神撞上了泥泞路旁的沙堆,让习然笑话了十几年。感恩上帝,让他俩生极端美的撞。习然不会见懂得,身后的苏洋这目光有差不多和气,宠溺的温存了抚习然被风吹乱的发,一如那年。苏洋回想起初见习然的场景。

2.http-equiv属性:将我们的信写于浏览器看,让浏览器按照这间的要求执行,

3.

然而选属性值:Content-Type(文档类型)refresh(网页定时刷新)set-cookie(设置浏览

“嘿,你没事吧?”在收看苏洋片下面踩在沙堆达标,自行车车轮深陷其中,习然禁不住“噗呲”的欢笑了出声,幸灾乐祸的掩面问道。

器cookie缓存)

“这个,那个,我,”苏洋前所未有的尴尬,舌头像打了结似的游说勿起一致句完整的话语来,而后甩了甩脑袋,看向习然认真介绍道,“你好,我是苏洋。”,望在眼前的习然,心里柔软的一模一样倾糊涂。

要相当content属性使用。(http-equiv属性只是表明要安装哪有,具体的设置情节吧,

思及至此,苏洋嘴角扬起了同等抹明媚的微笑。

放到content属性中)

“洋洋,在惦记啊啊?笑的这样开心。”习然仰头眯着眼睛问道。

3.name属性:使用方法和“http-equiv”,将我们的音讯写于找引擎

“想你。”苏洋低头宠溺的看正在习然白皙的粗颜说道。

常用都需控制的性质:author(作者)

“嘿,我哪怕在这也!”倏尔习然的耳垂红了起来,心里莫名的悸动,泛起了扳平丝甜意。苏洋看在眼里,却不道破。

keywords(网页根本字)description(网页描述)这点儿独特性设置,网页必不可少

苏洋今天越过正同等拟浅灰运动套装,三千漆黑丝扎成马尾,看起活泼俏皮又带来可靠和庄严,远远望去,便看到沐浴在曙光下的亚总人口冷静之并行对应,低头注视的宠溺与仰面享受春风拂起额间发丝的眷恋在花的反衬与阳光之投下泛起光晕,如同清酒般熊熊,浅尝已微醺。仿佛时间定格于这儿,整个世界就剩余她们。

–>

“洋洋,我们错过放风筝好不好?”习然回喽头手获得在苏洋手臂撒娇哀求道。

<!–作者–>

扣押在习然的双腿,苏洋有同样丝迟疑,却又无可奈何回道,“好。”

<meta
name=”author”content=”http://www.jredu100.com"/&gt;

苏洋推着习然从生态园里的小卖部买来了一致单独风筝,习然就比如只吃到糖果的男女一样,笑声不决,如霜铃般动听。

<!–网页关键字,多独关键字用英文符号分割–>

起名 4

<meta
name=”keywords”content=”HTML5,网页,web前端开发”/>

原创照片,请无转载

<!–网页描述:搜索网站时,title下面的说明文字.至关重要!–>

4.

<meta
name=”description”content=”这是自个儿的首先独网页”>

“洋洋,高点,再飞高点!”习然扬起灿烂的笑脸,看正在苏洋拖曳的风筝越飞越强,与风依偎,点缀安静的晴空。

<meta charset=”UTF-8″>

“然然,风筝其实不是实在含义及之纸鸢。”苏洋将线缠绕在手中,细细牵扯自顾自说道。习然一脸疑惑看在苏洋,“那风筝是什么?”

二.title标签:网页的题,即网页选项卡及之契

“在五代的时刻,人们在风筝前面绑着竹子作为笛子,风筝飞从的当儿风灌入竹子中,声音像筝鸣乐,所以起名风筝。”苏洋看正在风中扬尘的纸鸢说道。“可是咱们放的风筝不见面作也?”习然看在苏洋说道。

<title>培训第一上</title>

“嗯,所以它们并无是确实意义上之纸鸢,它发出另外一个美妙的讳,叫纸鸢。”苏洋就说道,“静默的随机飞翔在碧空上,鸢也。”

三.使用link标签:链接网页图标(title前之稍logo)

掌故蝴蝶样式的纸鸢与空清澈的天蓝相融合,一尘不染的飘过湖面掠过花田,起起伏伏如打中孩子,苏洋蹲坐于习然身旁的石凳上,两人数把相偎看正在模糊的云彩渐行渐远,“洋洋,我们见面直接好下也?”习然装作不上心的发问。“嗯,有您当的地方便时有发生己。”苏洋抽出手来拥在习然肩膀,看正在马拉松的纸鸢与春风共舞,突然想起网上说的一致词话,世间有的撞都是久别重逢,有些人刚刚被上了,再为非分离了。然然,我会见为此尽余生护你安然。苏洋眯着对眼不动声息的想道。

rel属性:声明连接文件的种类,此处选icon

“洋洋,我思还散步。”习然报为苏洋一个大妈的笑脸道。

type属性:可以概括

“小调皮,身体吃得败为?”苏洋蹙眉担心道,“出来一天了,过会该归了,太阳下山温差大。”

bref属性:表示图片的门道地址

“我们便摸个地方看日落,看了日落就回到,可以吧?”习然试探道。

<link rel=”icon”
href=”../img/icon.png”/>

“走吧,我们到大一点底地方去。”说着,苏洋推着习然往小山坡上之四角亭走去。

四.常用块级标签

联合直达栽满了多绿植。习然今天特地快乐,一路发问了好多题目,苏洋没有一丝不耐烦的顺序作出回应。

<h1></h1>……<h6></h6>

“洋洋,这黄色的是啊花?”习然指在挺久中开始起的微黄花。

<!–h标签:标题标签,自动加多少,h1最老,h6最小–>

“迎春花,百花之中开花最早,它放后虽迎来鼎盛的青春。”不等习然问道,苏洋就说,“这是紫玉兰,这是腊梅,”腊梅已经过季了,只留零星的桃色花儿挂于方。“这是郁金香,这是月季,这是……”直到走及亭子苏洋才不再讲解。

<hr/>:水平线标签(哪里需要拓宽哪就是一律长达水平线)

“洋洋!你最强了,怎么能够明了这么多东西!”习然讶异的张大嘴巴,苏洋看正在应该会作下一个鸡蛋。

<p></p>:段落标签(如果漏写结束标签,到下一个html标签了)

“你的浮游生物是体育老师教的吧?”苏洋笑道。

<br/>:换行标签(换行符,打回车只见面翻成一个空格)>

高中的时刻坐常常翘课不知道吃老师训了多少顿,生物又怎可能记得那基本上。习然腹诽道。

<blockquote></blockquote>

“哼,可恶。”习然扭过头看在山坡下的波光粼粼,在夕阳底映照下别来一番好好。生态园的基本发生只清澈的人工湖,杨柳随风飘荡,倒影在水中的翠绿及空之晚霞编织成了同一配合柔美的丝绸,她们在亭子中一览无余几近只生态园的景,习然看到前方的美景都将生气的事抛诸脑后了。

<!–引用标签,cite属性,表明引用的发源,一般表明引用网址,浏览器默认显示为首行缩进–>

“傻瓜。”苏洋抚摸着习然的头顶,抚顺了丝丝墨发,顺势把习然额间被风吹乱的头发用指尖轻轻绕到耳后。

起名 5

习然的小颜在晚霞映照下而苹果一般红晕,甚是滋生人同情疼爱。“春天,是个美好的季。”在这美好的时令遇见最美的若,是自我今生极度要命的托福。苏洋望着夕阳在湖面处渐渐取得下,心有所想的疏忽。

<pre></pre>:预格式标签(承载代码)

“谁说勿是吗,我是因祸得福了。”洋洋,谢谢您的陪,谢谢君的不离不弃。习然抱在苏洋手臂靠在了它的腰身间。

浏览器默认显示样式:1,显示也当极富字体 2,代码中的换行,空格等元素而于浏览器直接展示。

晚年把她们的背影拉的死丰富深丰富,直至消失于晚上中。

填补:HTML文件被“&nbsp;”表空格(不同浏览器对长解析不等同)

“回家吧。”苏洋低头说道。

<ol></ol>:有序列表

“嗯。”习然满足的回应道。

<ul></ul>:无序列表(网页布局好要紧)

暮色渐深,苏洋小心翼翼的递进着习然往回走,在路灯的照射下,习然已无意识进入了甜蜜的梦境,苏洋微微一笑,停了下去,把以在习然腿上之毛毯往上拉了牵连,在墨色中持续提高。

其中,<li></li>列表项都好生N多宗

<dl></dl>:定义描述列表:<dl></dl>

列表标题:<dt>一般才出雷同项</dt> 标题顶格显示

列表描述项<dd>可以有N多宗</dd> 描述项相对标题进行缩进显示

*顾嵌套时列表不可知陆续*

<div></div>:分区标签

五.常用行级标签

span(文本):无实际意义,用于包裹有有些文字,修改特定样式

q(短引用):语法:<q
cite=”http:baidu.com”>这是紧缺引用标签q中之契</q>

small(缩小字体):可以基本上又嵌套直到字体最小

big(放大字体):可嵌套直到最老

em(强调)

strong(强调)

a(超链接)

i(倾斜)

b(加粗)

***strong,em,b,i标签的分***:

1、strong和em都意味强调,strong显示也粗体,em显示为倾斜。而且,

strong的强调品位比em更强

2、strong和b都能够加多少,em和i都能斜,但是,strong和em多了相同重叠强调的语义,HTML5言语,要求标签尽可能的贯彻语义化。

 

  img(图片)
       1、src:表示援引图片的地址
            路径地址之写法:
            ①相对路径:以手上文件为依照,去寻找图片地址
                    a、与公事处于同一层的图形,直接写图片名
                    b、图片在时文件下一样层:文件夹名/图片名
                    c、图片以眼前文件及等同叠:../图片名
            ②绝对路径:file:///盘符:/文件夹/图片.后缀名    
但是严禁使用!
            ③网络地址:网络直达之图片链接。但是一般不下,因为来不测。
          
 2、height=””width=””图片的幅度高度。可以据此ccs样式(style=”width:;height:;”)代替
            3、title:图片标题,鼠标指上后显示的字。
            4、alt:当图片无法显示的时段,显示的仿。
          
 5、align:设置图片周围文字相对于图片的岗位。top,center,bottom

 

  a(超链接):

    1、href:超链接的路子,可以是网链接,也可是当地文件(路径确定和img)

    2、target:用越链接打开的职位。_self自身页面(默认),_blank新页面

    3、title:鼠标指上后显得的亲笔

    4、(了解)rel:用于表明被链接文档与目前文档的关联;

      
rel=“prev”被链接文档是前方一模一样首文档 rel=”next”被链接文档是后一致篇文档

    
  (记住)rel=“icon”被链接图片是时文档的图标
rel=“stylesheet”被链接文档是现阶段文档的样式表

      rel=“prefetch”预加载,在时下文档加载成功后,用空余时间预加载即将链接的文档

   5、锚链接:

     ①.本页面锚链接:a.设置锚点:<a
name=”top”></a>

            
b.在超链接上,使用name跳反至对应锚点

           <a href=”#top”
target=”_self”>这是一个锚点</a>

      
②.页面间锚链接:a.以快要跳转的页面的指定位置,设置锚点

            
b.在超链接的href中属性,使用”页面地址.html#name”

            <a
href=”t.html#hip”>跳反到新页面的岗位</a>

6.功能性链接: mailto://jianghao@jerei.com
用于被指定邮箱发送邮件

           file:///e:/a.jpg
打开当地文件(只能以该地文件被开拓)

          tencent://message/?uin=qq号
给指定qq发消息

    s有误文本

    <s>这是s标签中文字</s>

    起名 6

    cite标签:浏览器显示为斜体,常用于书、画作

    起名 7

    <!–mark:高亮或标志文本,浏览器显示也黄色背景–>

    <mark>aaaa</mark>起名 8

 

  六.表格

起名 9

[table常用属性]:

1、border:给表格添加边框,当border属性增大时,只有外围框线增加,单元格的边框始终为1px

2、cellspacing:单元格与单元格之间的茶余饭后距离,当cellspacing=“0”,只会使单元格间隙为0,但不会见合并边框线。

【表格边框合并】style=“border-collapse:collapse;”,无需再写cellspacing

3、cellpadding:每个单元格中之情,与边框线的离开。

4、width,height:表格的宽高

5、align:表格在屏幕的失实中右位置显示,left,center,right

>>>注意:给表格加上align属性,相当给吃表格浮动,会直接打破表格后的素的本来面目的排方式

6、bgcolor:背景色,等同于style=“background-color”

7、background:

background=”../img/gx.jpg”

背景图片
等同于style=“background-image”且背景图片会挂背景颜色

8、bordercolor=“blue” 边框颜色

 

【tr和td相关的性能】

1、width/height: 单元格的宽高

2、bgcolor: 单元格的背景颜色

3、align:left center right
单元格中之文,水平对齐方式

4、valign:top center bottom
垂直对齐方式

5、nowrap:nowrap=”nowrap”
单元格中文字不换行

 

小心:1、当表格属性与行列属性冲突时,以行属性为准.(作用范围更加聊优先级更强,近者优先)

2、表格的align属性,是决定表自身以浏览器的显得位置

行和列的align属性,是控制单元格中文字在单元格中的对齐方式

3、表格中的align属性,并无影响表格内文字的水平对齐方式

tr的align属性,可以决定一行中颇具单元格的档次对齐方式

 

[表的跨行与跨列]

colspan
跨列,当某个格跨N列时,其右手N-1个单元格需删除

rowspan
跨行,当有格跨N行时,其江湖N-1独单元格需删除

七.表单

        语法:<form>…</form>

        一般和table配合使用,table负责页面架构,起实际付出作用的凡form,互不影响

        <form
action=”表单提交地址” method=”提交方法”>…</form>

        form表单

        1.零星独重大性质:action-表单提交的服务器地址
method-表单提交数据的方式(get/post)

         2.get和post的区别:

        ①get:使用url传参:http://服务器地址?name1=value1&name2=value2(?表示传递参数,?后面采用name=value的形式传递,多个参数之间,用&链接)

         url传参不安全,所有信息但每当地址栏看到。并且可以透过地方栏随意传递其他数据。

        
url传递数据有限,只能传递少量数码。

②post:使用http请求传递数据,url地址不可见,比较安全,且传输数据没有范围。

综上,常用post传输数据

3.【input标签以及性能】

①type:input输入框的种

②name:input输入框的别名,一般景象下得填。因为传递数据时以
name=value的样式传递

③value:input输入框的默认值。

④placehold:input的提拔内容,当输入框来value时,提示内容没有。

⑤(了解)tabindex=”1″控制点击tab键时的跳转顺序,从最小之开,逐个往雅之数值越反得焦点。

【input特殊属性值】

①checked=“checked”默认选中

②disabled=“disabled”设置控件不可知采取,用当按钮上无克点击,用当输入框上未可知修改。而且一旦输入框disabled,则输入框信息用未克为后高传递。

③hidden=“hidden” 隐藏。等同于<input
type=”hidden”/>

时常用来配合disabled,或因其它需要,使用隐藏域传递数据。

起名 10

 

4.【input-type属性详解】

①text:文本输入框

②password:密码输入框,输入内容时展示为小黑点

③radio:单选按钮,

checkbox:复选按钮

>>>name和value属性需同时存在,提交时,提交的是value中之属于性值。

像:<input type=”radio” name=”sex”
value=”男”/>提交时展示也”sex=男”

>>>radio凭借name属性区分是否为同一组,name相同,为同组,同组中不过会选择一个。

>>>checked=”checked”默认选中(radio只能选择一个,checkbox可以选多个)

④file:文件上传按钮

⑤submit:提交按钮,提交表单数据。

⑥reset:重置按钮,将表单数据重置为始发状态

⑦image:图形提交按钮,功能同submit,可以交到数据

⑧button:普通按钮,没有其余企图。

 

<input type=”submit” value=”注册”/>

起名 11

<input type=”submit”/>

起名 12

<input type=”text” name=”username” placeholder=”请输入用户名” />

起名 13

<input type=”radio” name=”sex” value=”男” checked=”checked”/>男

<input type=”radio” name=”sex” value=”女”/>女

起名 14

<input type=”text” name=”username” value=123 disabled=”disabled”
/>

起名 15

5.【下拉框控件select】

①写法: <select>

<option></option> //可以有N多个

</select>

②name属性:写于select上,所有选项才生一个name

③multiple=”multiple”设置select控件为多选择。可当安界面按停ctrl进行多选。一般不用

起名 16

 

④option常用属性:

value=””:当option没有value属性时,往后台传递的是<option></option>标签中的亲笔;

当option有value属性时,往后台传递的是value属性的价

示例:<td>

<select name=”city” >

<option value=”1″>青岛</option>

<option value=”2″>湖北</option>

<option value=”3″>济南</option>

<option value=”4″>烟台</option>

</select>

</td>

http://127.0.0.1:8020/A%E6%9C%80%E9%87%8D%E8%A6%81%E7%9A%84H5/%E4%BD%A0%E7%AE%A1%E6%88%91%E8%B5%B7%E4%BB%80%E4%B9%88%E5%90%8D/HTML–/\_01html–head.html111?city=3

title=””鼠标指上后出示的契

selected=”selceted”:默认选中

⑤<optgroup
label=”山东省”></optgroup>:用于将option标签进行分组,label属性表示分组名。

起名 17横流:name起名叫时,不克坐数字开,不可知用中文,不能够来除下划线以外的任何突出封号,不可知发空格。

 

 

 

6.【文本域textarea】

①写法:<textarea></textarea>

②装置富有高style=”width:200px;height:100px;”
自身出cols=””rows=””两单特性但是不常用

③readonly=”readonly”设置也就读模式不可知修。

④style=”resize:none;”设置为从容高不允许修改

⑤style=”overflow:
;”设置当文字超出区域时,如何处理(不是textarea专属,div也得安装)

>>>也可通过overflow-x/overflow-y分别设置水平垂直方向的显示方式

>>>常因此属性值:hidden 超出区域之契,隐藏无法显示

scroll 无论多少字,均会显得滚动(默认样式)

7.【表单的边框以及标题】

<fieldset> //表单边框

<legend></legend> //表单标题

</fieldset>

>>>如果想只要受标题嵌入到边框中,需以题目标签写及尽头框标签里。

>>>一个表单,可以起差不多组边框+标题的做。

起名 18

 

8.【HTML5
智能表单】

①H5初添input的form属性,用于因为特定form表单的id,实现input无需在form标签中,即可通过表单进行付出。

<form id=foo>…</form>

<input …form=”foo”/>

②初增属性查看表格

起名 19

③input元素的新增属性:

Autocomplete:自动完成功能:记录用户之前输入的内容,并在下次输入时,自动提示到位输入。

>>>属性值:on/off

>>>可以在form表单上使,对整张表单的保有控件进行机动完成的开关。也可以input上使用,对特定输入框进行改动。

>>>绝大部分浏览器,默认开启。

 

Autofocus:自动获取焦点:autofocus=“autofocus”,只能设置input元素自动取焦点。

Form:所属表单:通过form表单额id,确定是input输入哪张表单

Required:必填:required=“required”设置input必填,否则阻止提交

Pattern:使用正则表达式验证input的模式

Placeholder:提示内容,当有value时,提示内容没有。

 

 

 

哼了差不多就是这些吧,还希望多多指教,有荒唐的地方也求大神们指出。

Time is simply how you
live your life

 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图