HTM5新手学习的一对平常计算,互相交换和互相学习。

二月份恰恰入手Kindle,趁那股新鲜劲还未过去,选取了《浪潮之巅》作为本次读书之旅的发端。我本不是一个爱看书的人,但又是个爱好买书的“假文邹”,期望能通过那短小刺激鼓励我去读书,目的简单,每个月1本就够了。​

      第一天

要是说这些世界上有一件事,只要你做了就必然会有收获,那干什么不读书呢?回到《浪潮之巅》那本书,二〇一一年就已经问世了,而自我接触那本书也在几年前,也只是偶发翻翻,并从未去静下心仔细翻阅。那为何日期至今天又重拾那本书呢?我想是一种变更。

一、HTML–网页的源码(超文本标签语言)

身处在互联网行业,每一日耳濡目染,不检点或是刻意地想要了然部分消息。刚好《浪潮之巅》就是这么一部科技(science and technology)简史,围绕分裂商家的兴衰来举行。作者的文笔很实在,却又有很好的代入感,令人就像是置身于高纬度的长空,看各种科学和技术集团的起起落落,又或时代的成形。时而回到现实,自己作为正史的见证者,看苹果、谷歌、IBM、黑莓等店铺是怎么影响到大家的生存。

  1. HTML标签
  2. 标签式是HTML最基本单位和最重点的咬合。
  3. 使<和>扩起来
  4. 标签都是密闭的(规范)
  5. HTML标签属性
  6. 是标签的一部分,用于包蕴额外的新闻。
  7. 可以有五个特性
  8. 性能和属性值成对现身
  9. 语法
  10. HTML文档注释
  11. <!– 这是HTML注释–>

事业有成的阅历不足复制,而破产的屡屡有规律可循。​作者在叙述哪些突出一时的营业所时,都有两样的传奇,或是抓住了空子、或是有一个力挽狂澜的负责人,又或许集团内在的基因所致。但那么些成功者的骨子里,大家找到了原因,却又是不足复制,什么人也不可以鲁人持竿地改成下一个谷歌。

二、书写规范

而败北者的阅历往往可以为新兴铺面所借鉴和警告的。本书由两大定律贯穿,大多数的IT公司都是不能幸免那两大定律的钳制。​

开头<!DOCTYPE
html>

1、穆尔定理

扬言文档类型为HTML5文件

Moore定理给持有的处理器消费者带来一个希望,即使自己前日嫌总结机太贵买不起,那么大家十7个月就可以用一半的标价来买。由此衍生出的“反穆尔(Moore)定理”​真正公布着这一个行当,逆水行舟,不进则退的真相。假使你扭曲看穆尔定律,一个IT公司只要后天和1七个月前卖掉同样多的、同样的成品,它的营业额就要降一半。由于这么些定律,揭露着一些铺面破产的缘故。

文档申明,在HTML文档必不可少。且必须放在文档第一行。

2、诺威格定理

1、Head标签内的音讯用于描述网页,即元数据

当一个铺面的市场占有指导先50%后,就不可能再使得市场占有率翻番了。这大约就是个大实话,但又是成百上千民有集团兴衰的发源。寻找新的成长点将是涵养公司稳步发展的来源于。

动用title:网页的标题,即网页选项卡上的文字

书中还讲述了一个幽默的气象:

使用link :

穆尔与安迪(Andy)比尔(比尔(Bill))定理

1、作用:用于为网页连接各个文件。

Andy-比尔定理 (Andy and 比尔’s
Law)是对IT产业中软件和硬件升级关系的一个席卷。原话是 “安迪(Andy) gives,
比尔 takes away.(Andy提供什么样,比尔(比尔(Bill))拿走怎么着。)”
Andy指AMD前总裁安迪(Andy)·格鲁夫,比尔(比尔)指微软前任主管比尔·盖茨,那句话的意味是,硬件进步的习性,很快被软件消耗掉了。​

2、常用属性:

即便用户在动用软件的同时,一向都是极度便捷稳定的情事,那么肯定其立异硬件的要求就会下落。只有软件去消耗掉硬件的资源,让任何行业可不止的升华下去。
所以,就算硬件技术每隔1五个月就翻番,但与往年 相比较,软件体验上并从未快了过多。而用户得到的只是不断丰裕的功用。所以在摸底这么些未来就绝不抱怨你的无绳电话机为什么越用越慢,是该换了的时候呀。

rel:用于标明被接连文件与近来文件的涉及。此处选icon,声明被链接图片
是眼下网页的icon图标

本书的末梢,试问下一个谷歌在哪儿?作者大胆地做了预测,或许是崛起的互联网2.0社交产品,又或许像阿里巴巴那样不断融入生活的电子商务公司。下一个浪潮在哪儿?
不得而知, 一切拭目以待吧!

type:评释被一连文件时怎么样品种。可以大概。

href:声明连接文件的地点

引进书籍:《浪潮之巅》​;推荐指数:强烈推荐​​​​​

 

【meta标签】

1、charset属性:单独使用。设置文档字符集编码格式。

>>>写法:<meta charset=”utf8″>

>>>常见的汉语编码格式:

GB-2312:国标码,简体汉语

GBK:扩充的国际码,简体粤语

UTF-8:万国码 Unicode码 基本万分各国语言

 

2、http-equiv属性:需合作content属性使用。紧要评释浏览器怎么着解释编译文件

>>>写法:<meta
http-equiv=”属性值”content=”属性值详细内容”>

>>>常用属性值:Content-Type HTML4.01事先的文档内容编码内容

refresh 网页刷新 set-库克ie设置浏览器cookie缓存

 

3、name属性:需同盟content属性使用。主要用以给寻找引擎提供必需音信。

>>>写法:<meta name=”属性值” content=”属性值详细内容”>

>>>紧要属性值: author 小编,注明网站小编,常用公司网址表示

keywords 网站关键字,四个至关首要字,用英文逗号分隔

description 网页描述,搜索引擎突显在title下的叙说内容

 

*http-equiv和name属性,必须与content属性协作使用。前双方只是用于注解即将修改那个属性值,而事实上的性质内容,在content中讲述

 

 

<!–作者–>

<meta name=”author” content=”http://www.jredu100.com” />

<!–网页关键字–>

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

<!–网页描述–>

<meta name=”description” content=”那是自身在杰里(Jerry)教育开销的首先个网页”
/>

 

图表如下:

图片 1

 

2、标签分类

<!–[HTML的竹签分类]

1、块级标签:自动换行,前后隔一行。

2、行级标签:按行逐一突显。

(是或不是自动换行使我们看清块级标签的严重性目标)

–>

<!– [周边的块级标签]

题目标签<h1></h1>……<h6></h6>

水平线<hr/>

段落<p></p>

换行<br/>

引用<blockquote></blockquote >

预格式<pre></pre>

–>

<!–

题目标签<1><2><3><4><5><6>:默许加粗,H1最大,H6最小

–>

 

<h1>超级标签</h1>

<h2>超级标签</h2>

<h3>顶尖标签</h3>

<h4>一流标签</h4>

<h5>一流标签</h5>

<h6>一级标签</h6>

 

<!–水平线标签<hr
/>–>

<hr />

 

<!–段落<p></p>–> <!–换行<br/>–>

<p>这么些是段子那一个是段子这些是段子这一个是段子那几个是段子这些是段子那个是段子那么些是段子这几个是段子这些是段子那个是段子

本条是段子这么些是段子那个是段子那么些是段子那几个是段子那一个是段子这几个是段子这么些是段落</p>

 

<p>这几个是段子这几个是段子那个是段子那几个是段子那些是段子这几个是段子那几个是段子这几个是段子那个是段子这些是段子那几个是段子

<br/>这几个是段子这些是段子这么些是段子那些是段子那几个是段子那一个是段子那一个是段子那几个是段子那几个是段子这几个是段落</p>

 

<!–引用<blockquote></blockquote>

1标明标签中的文字,为因用户的始末。浏览器展现为段落缩进

2cite属性,申明引用的源点,一般为引用的网址URL

–>

 

<blockquote
cite=”http.baidu.com”>那一个是段子这些是段子那几个是段子那么些是段子这一个是段子这几个是段子那几个是段子那个是段子那一个是段子这么些是段子这么些是段子

那一个是段子这一个是段子这些是段子这些是段子那一个是段子这么些是段子那个是段子那个是段落</blockquote>

 

<!–预格式<pre></pre>

预格式:在浏览器解析式,会遵守等宽字体突显,并且保留标签内的空格和回车。常用来保留代码格式。

–>

<pre>

what are you from?

i am from china </pre>

<p>

what are you from?

i am from china </p>

<p>what are you from?</p>

<p> i am from china </p>

案例-唐诗

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title></title>

</head>

<h1>唐诗三百首</h1>

<hr />

<h2>目录</h2>

<hr />

<p>第一首:静夜思</p>

<p>第二首:忆江南</p>

<p>第三首:长恨歌</p>

<hr />

<h3>静夜思</h3>

<p>作者:李白</p>

<p>床前明月光,疑是地上霜。举头望明月,低头思故乡。</p>

<hr />

<h3>【李拾遗简介】</h3>

<p>李白,字太白,号李太白,自称与李堂皇室同宗,祖籍陇西成纪(今江西汉中附近),生于中亚碎叶。据野史记载,幼时随父迁居绵州昌隆(今黑龙江江油)青莲乡……</p>

<pre> ↖↑↗

←㊣→

↙↓↘</pre>

<body>

</body>

</html>

 

图片如下:

图片 2

 

列表锻炼:

</head>

<!–[有连串表ol order list]–>

<ol>

<li>列表第一项</li>

<li>列表第二项</li>

<li>列表第三项</li>

<li>列表第四项</li>

</ol>

<!–[无种类表ul unorder list]–>

<ul>

<li>列表第一项</li>

<li>列表第二项</li>

<li>列表第三项</li>

<li>列表第四项</li>

</ul>

图形如下:

 

 

图片 3

<!–[概念描述列表]

<dl>

<dt>标题</dt>

<dd>描述项</dd>

</dl>

 

相似情况下,标题dt唯有一项。描述项dd可以有N多项。

浏览器呈现时,标题顶格显示,dd会缩进呈现。

 

–>

<dl>

<dt>那是dl列表的标题</dt>

<dd>列表第一项</dd>

<dd>列表第二项</dd>

<dd>列表第三项</dd>

<dd>列表第四项</dd>

</dl>

 

图片如下:

图片 4

列表训练:

<h1>商品音讯</h1>

<h3>产品序列</h3>

<hr />

<ul>

<li>笔记本</li>

<ul>

<li>笔记本</li>

<li>手机</li>

<li>家电</li>

</ul>

</ul>

<hr />

<dl>

<dt>联想电脑</dt>

<dd>产品型号: 联想IdeaPad Y450A-TFU(NBA回忆版)</dd>

<dd>价格:4999元</dd>

<dd>所在地:北京</dd>

</dl>

<hr />

<h3>购物流程</h3>

<ol>

<li>确认购买音讯</li>

<li>付款到贵美</li>

<li>确认收货</li>

<li>付款给公司</li>

<li>双方评价</li>

</ol>

图表如下:

 

图片 5

图形组合标签(块级)

<!–[图表组合标签figure]

1、<figure></figure>标签有多个子标签

<img src>””>:一幅图片,表示图片的路径。

<figcaption></figcaption>:图片的标题

2、浏览器彰显为:图片与标题上线排列,且完全向后缩进一个单位。

–>

<figure>

<img src=”img/logo.png” />

<figcaption>折是图表的题目</figcaption>

</figure>

图片如下:

图片 6

 

分区标签(块级)

 

<!–[分区标签div]

常合营CSS使用,为网页中的常用分区标签,常用于网页布局使用

–>

 

<div style=”width: 100%;height: 100px;”>

那是div里面的文字

<h1>那是div里面的题目</h1>

</div>

图表如下:

图片 7

 

<!– [广泛的行级标签]

  1. span(文本)
  2. img(图片)
  3. em(强调)
  4. strong(强调)
  5. q(短引用)
  6. a(超链接)
  7. i(倾斜)
  8. b(加粗)
  9. small(减弱字体)

–>

 

<!–

span(文本):用于包裹一部分文字,进行一定样式的改动。

–>

我<span style=”color: red;font-size: 36px;”>爱</span>我家

<!–

em(强调):浏览器会彰显为倾斜

strong(强调):浏览器会突显为加粗

i(倾斜)

b(加粗)

[斯特朗/em/i/b标签的区分]

1、em和strong都意味着强调,而strong的
强调品位要大于em,strong和em标签均可多层嵌套,表示强调品位的雨后春笋。

2、em和i都能切斜,斯特朗(Strong)和b都能加粗。可是斯特朗和em多了一层强调的语义。可以协理查找引擎火速抓取网络重大。而且HTML5须要开发者,尽可能地贯彻代码的语义化。

–>

<em>我被em标签强调了!!!!!</em><br />

 

<strong>我被strong标签强调了!!! </strong><br />

 

<i>我被i标签倾斜了。</i><br />

 

<b>我被b标签加粗了。</b><br />

<!–

q(短引用):常用来一句话的引用,cite属性表示援引来源

浏览器解析时,会在内容的前后插入双引号

–>

<q
cite=”http:www.baidu.com”>我是被q标签注解的一句引用的话</q>

<br />

<!–

smll(裁减字体):smll标签可以多层嵌套,表示比默许字体小一号,直到字号小到最小号截止。

big(放大字体):同small能够多层嵌套,直到字号最大甘休。

 

只是,在新式规范中,small和big标签,不被倜傥使用。提倡使用style=”font-size:11px;”CSS样式替代。

 

–>

 

<small>我被small缩小了</small><br />

 

<small><small>我被small缩小了</small></small><br
/>

 

<big>我被big放大了</big> <br />

 

图片如下:

图片 8

 

 

 

<!– [img 图片标签]

1、src属性:表示图片引用路径

>>>常见路径的法门:

① 相对路径:

·当图片在如今文件下一层时:文件夹名/图片名 img/logo.png

·当图片在当下文件一律层时:图片名 src=logo.png

·当图片在现阶段文件前一层时:../img/logo.png

② 相对路径:写法file:///E:/aaa。png 不过严禁动用


网络路径:直接动用图片的网络地址,可是出于图片在旁人服务器,不可控。(所以不指出选拔)

–>

 

<!–①案例–>

<img src=”img/logo.png” />

<img src=”logo.png” />

<img src=”../img/logo.png” />

 

<!–③案例–>

 

<img
src=”https://ss0.baidu.com/73F1bjeh1BF3odCf/it/u=3225200470,3369676538&fm=73

图表如下:

图片 9

 

 

 

          第二天的学习

一、超链接

<!–[超链接a]

 

1.href:超链接的跳转地址。可以写网络连接,或当地html文件的相对路径,确定格局同img的src路径

 

2.title:鼠标指上后显得的文字

 

3.target:设置超链接打开窗口的岗位。-slef 自身页面打开(默认)
-blank新页面打开、

 

[成效性链接]

mailto://jianghao@jerei.com 发邮箱

tencent://message/?uin=2831705549 与QQ聊天

 

[锚链接]

1、本页面锚链接

①设置一个锚点:<a name=”top”></a>用name属性表示锚点名称

②在朝链接的href属性中,使用#name 跳转到制定的锚点地方:

<a href=”#top”>跳转到锚点

 

2、其余页面锚链接

①徐跳转的页面设置锚链接

②在超链接的href属性,文件名.html#name

<a href=aaaa.html#其次节锚点>

 

注:由于谷歌(Google)/ie的包容问题,必要在锚点中,插入一个空格  才能一蹴而就:

<a name=”top”> </a>

 

–>

 

 

<a href=”http://www.baidu.com” title=”鼠标指上后显得的文字”
target=”_blank”>那是一个超链接</a>

 

<a href=”#top” title=”鼠标指上后突显的文字”
target=”_self”>这些一个锚点</a>

 

<a href=”02广大的块级标签.html# ”
target=”_blank”>转到首个图</a>

 

W3C= word wide web consortium-万维网联盟

 

1、内容与表现分离,内容与表现分别

2、内容的语义化

 

挥洒规范:

标签名和总体性名必须小写

HTML标签必须关闭

属性值必须引号括起来

标签必须科学嵌套

 

二、行级标签

图片 10

图片 11

 

<!– [科普的行级标签]

  1. span(文本)
  2. img(图片)
  3. em(强调)
  4. strong(强调)
  5. q(短引用)
  6. a(超链接)
  7. i(倾斜)
  8. b(加粗)
  9. small(收缩字体)

–>

 

<!–

span(文本):用于包裹一部分文字,举办一定样式的改动。

–>

我<span style=”color: red;font-size: 36px;”>爱</span>我家

<!–

em(强调):浏览器会彰显为倾斜

strong(强调):浏览器会突显为加粗

i(倾斜)

b(加粗)

[斯特朗/em/i/b标签的界别]

1、em和strong都代表强调,而strong的
强调品位要大于em,strong和em标签均可多层嵌套,表示强调品位的一日千里。

2、em和i都能切斜,斯特朗和b都能加粗。但是斯特朗和em多了一层强调的语义。可以协助寻找引擎飞快抓取网络重大。而且HTML5渴求开发者,尽可能地贯彻代码的语义化。

–>

<em>我被em标签强调了!!!!!</em><br />

 

<strong>我被strong标签强调了!!! </strong><br />

 

<i>我被i标签倾斜了。</i><br />

 

<b>我被b标签加粗了。</b><br />

<!–

q(短引用):常用来一句话的引用,cite属性表示援引来源

浏览器解析时,会在情节的左右插入双引号

–>

<q
cite=”http:www.baidu.com”>我是被q标签申明的一句引用的话</q>

<br />

<!–

smll(减少字体):smll标签可以多层嵌套,表示比默许字体小一号,直到字号小到最中号停止。

big(放大字体):同small可以多层嵌套,直到字号最大截至。

 

而是,在风靡规范中,small和big标签,不被倜傥使用。提倡使用style=”font-size:11px;”CSS样式替代。

 

–>

 

<small>我被small缩小了</small><br />

 

<small><small>我被small缩小了</small></small><br
/>

 

<big>我被big放大了</big> <br />

 

图表如下:

图片 12

三、表格table

 

<!–[表格table]

表格 <table>

报表的行 <tr></tr>

报表的列 <td></td>

报表的表头列 <th></th>
(将tr中的td,替换为th,表示本行的表头)

–>

<table width=”500″ border=”1″>

<tr>

<th>第一行</th>

<th>第二行</th>

<th>第三行</th>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr></table>

图如下:

图片 13

案例训练:

<table>

<tr>

<th>学号</th>

<th>姓名</th>

<th>数学成就</th>

<th>语文战绩</th>

<th>西班牙王国(The Kingdom of Spain)语战表</th>

</tr>

<tr>

<td>1001</td>

<td>张三</td>

<td>100分</td>

<td>120分</td>

<td>120分</td>

</tr>

<tr>

<td>1002</td>

<td>李四</td>

<td>110分</td>

<td>123分</td>

<td>124分</td>

</tr>

<tr>

<td>1003</td>

<td>王五</td>

<td>150分</td>

<td>120分</td>

<td>120分</td>

</tr></table>

 

图如下:

 

图片 14

报表课程:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>表格table</title>

</head>

<body>

<!–[表格table]

表格 <table>

报表的行 <tr></tr>

报表的列 <td></td>

报表的表头列 <th></th>
(将tr中的td,替换为th,表示本行的表头)

–>

<!– 【表格table】

表格<table></table>

报表的行<tr></tr>

报表的列<td></td>

报表的表头列<th></th> (将tr中的td,替换为th,表示本作为表头)

th 默许加粗,且在单元格居中呈现

 

【table的常用属性】

1、Border:
表格的边框属性;当使用border=’1’设置边框时,会所有的td以及table上嵌套边框,当border加大时,唯有table最外层框线加粗,td单元格上的框线不会扭转。

 

2、Cellspacing:单元格与单元格之间的间隙。当cellspacomg=0时,单元格之间间隙为0,但边框线并从未统一(边框线照旧两条线的宽度)

[集合边框的写法]
“style=’border-collapse:collapse;”使用边框合并后,无需设置Cellspacing

 

3、Cellpadding:段远隔内编剧,段远隔中文字与单元格边框之间的距离

 

4、Width/Height:表格的宽窄中度

5、Align:
设置表格在父容其中的对齐方式;left/居左 center/居中 right/居右

【注意】當表格使用align屬性石,相當于使表格浮動,可能會導致表格后边的因素受表格浮動印象,导致布局散乱。

 

6、Bgcolor: 背景色

Background:
背景图片,后接相对路径。当背景图和背景色同时生效时,背景图覆盖背景象

Bordercolor: 边框颜色

 

–>

<!–

[tr td 属性标签]

当表格属性与行列属性争论时以行列属性为主

属性设置优先级:td>tr>table

① Width、Height:给单个的行、列,设置宽度中度;

② bgcolor:背景色

③ Align:设置单元格中的文字,在单元格中的水平对其方法 left/ceter/right

④ Valign:设置单元格中的文字,在单元格中的水平对其艺术 top/centr/bottom

⑤ Nowrap:nowrap=nowrap 设置单元格文字行末不断行。

–>

 

<!– [报表的跨行与跨列]

1、跨列:colspan,某单元格跨N列,则该单元格左边的N-1个td就不要求了。

2、跨行:rowspan,某段远隔跨N行,则该单元格上面的N-1个td就不必要了。

–>

 

<table width=”500″ border=”1″>

<tr>

<th colspan=”2″>第一行</th>

 

</tr>

<tr>

<td rowspan=”3″>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

 

<td>2-2</td>

<td>2-3</td>

</tr></table>

<hr />

<br />

<table>

<tr>

<th>第一行</th>

<th>第二行</th>

<th>第三行</th>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr></table>

<table width=”500″ border=”1″>

<tr>

<th>第一行</th>

<th>第二行</th>

<th>第三行</th>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr></table>

<table width=”500″ border=”1″ cellspacing=’10’ >

<tr>

<th”>第一行</th>

<th>第二行</th>

<th>第三行</th>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr></table>

<table width=”500″ border=”1″ cellspacing=’10’
style=”border-collapse: collapse;” bgcolor=”aqua” >

<tr>

<th>第一行</th>

<th>第二行</th>

<th>第三行</th>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr></table>

<table width=”500″ border=”1″ cellspacing=’10’ align=”left”
bgcolor=”aqua”>

<tr>

<th>第一行</th>

<th>第二行</th>

<th>第三行</th>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr> </table>

<table width=”500″ border=”1″ cellspacing=’10’ bgcolor=”aqua”
style=”border-collapse: collapse;

<tr>

<th>第一行</th>

<th>第二行</th>

<th>第三行</th>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td>

</tr></table>

<table width=”500″ border=”1″ style=”border-collapse: collapse; ”
background=”../img/15062610214111_0.jpg” >

<tr>

<th>第一行</th>

<th>第二行</th>

<th>第三行</th>

</tr>

<tr>

<td>1-1</td>

<td>1-2</td>

<td>1-3</td>

</tr>

<tr>

<td>2-1</td>

<td>2-2</td>

<td>2-3</td></tr>

 

 

 

 

</body>

</html>

图表如下:

图片 15

 

 

案例磨练:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title></title>

</head>

<body>

<table width=”500″ border=”1″ bordercolor=”red”>

<tr>

<td colspan=”9″ align=”center”>杰里(Jerry)教育</td>

</tr>

<tr>

<td colspan=”3″>HTML5</td>

<td colspan=”4″ rowspan=”2″>Android</td>

<td colspan=”2″>ios</td>

</tr>

<tr>

<td colspan=”3″>java</td>

<td colspan=”2″>PHP</td>

</tr>

 

</table>

 

<table width=”1000″ height=”600″ bordercolor=”red” border=”10″
cellspacing=”0″>

<tr>

<td rowspan=”6″ background=”../img/f5_banner.png”></td>

<td rowspan=”3″></td>

<td rowspan=”2″></td>

<td></td>

</tr>

<tr>

<td></td>

</tr>

<tr>

<td rowspan=”2″></td>

<td></td>

</tr>

<tr>

<td rowspan=”3″></td>

<td></td>

</tr>

<tr>

<td rowspan=”2″></td>

<td></td>

</tr>

<tr>

<td></td>

</tr>

 

</table>

</body>

</html>

图表如下:

 

图片 16

        第三天

 

一、表单元素

 

图片 17

 

 

要素内容:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>表单</title>

</head>

<body>

 

<!–[form表单]

1.五个根本性质:

action:表单需求提交的服务器地址

method:表单提交数据运用的办法:get/post

>>>

[get与post的区别]

①get传参数使用URL传递,所有参数在地方栏可知,不安全,get传参数据量有限;

②post传参使用http请求传递,相比较安全;post可以传递大量数码;

可是,get请求的传输速率要比post快。

 

>>>URL传参的花样:链接URL地址?name1=value1&name2=value2

 

2.input的常用属性:

①type:设置input的输入类型

②name:给input输入框起名。一般意况下,name属性必不可少。因为,传递数据时,使用那么=value(输入内容)的样式传递

③value:input输入框的默许值

④placeholder:输入框的唤醒内容。当input有默许的value或者输入值时,placehoder消失。

 

3.input-type属性的常用属性值:

①.text:文本输入框

②.password:密码输入框,输入内容默许展现小黑点。

③.radio:单选项

>>>
使用radio时,value属性必填。提交时,提交的为value中的默认值。

>>>
radio凭借name属性,确定是或不是属于同一组,那么相同为同组,智能选一个。

>>> 使用checked=’checked’属性,设置默认选中项

④.file:文件上传

>>> 使用accept=”类型”,设置智能上传的文件类型, imge/*
任一格式图片

⑤.submit: 提交按钮。将有所表单数据,提交至后台服务器

⑥.reset:重置表单数据按钮。将表单数据恢复生机到默认状态。

⑦.image:图形提交按钮。跟submit一样享有提交功效。

>>> 使用src属性,选择图片路径

⑧.button:普通按钮,没有其余卵用。

 

 

4.属性名等于属性值的事态:

①checked=”checked”属性,设置默radio或checkbox认选中项

②multiple=”multiple” 设置select控件,为多选控件

③selected=”selected” 设置select控件,默许选中的option选项

 

5、【下拉精选控件 select】

① 写法:<select>

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

</select>

② name属性,应该写在<select>上,所有选项只有一个 name

③ multiple=”multiple”
设置select控件为多选,可在界面使用Ctrl+鼠标,举行多选。一般不用。

④ option 常用属性:

value=””:当option没有value属性时,未来台传递的是<option></option>标签中的文字;

当option有value属性时,将来台传递的是value属性的值。

title=””:鼠标指上后显示的文字。

selected=”selected”:默认选中。

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

 

6、 【文本域 textarea】

① 写法:<textarea></textarea>

② 设置宽高style=”width: 200px; height: 150px;” 自身有cols=””
rows=””七个特性,但不常用

③ readonly=”readonly” 设置为只读形式,不容许编辑。

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

 

⑤ style=”overflow: ;” 设置当文字超出区域时,如何处理。

>>>
也得以因而overflow-x/overflow-y分别设置水平垂直方向的展现格局。

>>> 常用属性值:hidden 超出区域的文字,隐藏不能出示

scroll 无随想字多少,均会显得滚动

auto 自动,根据文字多少活动决定是或不是出示滚动条(默许样式)

 

7.表格的边框与标题

<form>

<fieldset>表格的边框

<legend>联系情势</legend>表格标题

…..N两个表单元素(input/select/textarea)

</fieldset>

</form>

 

 

–>

 

<!–[HTML5智能表单]

①H5新增input的form属性,用于指向特定form表单的id,落成input无需放在form标签之中,即可通过表单举行提交。

<FORM id=too>

….

</FORM>

<input…form=”foo”>

②新增N多个TYPE新属性,详见表格。

③ 新增input的属性:

Autocomplete:自动达成功效.回忆之前输入国的始末,在下次输入时,根据以前的内容提醒,自动落成。

>>> 绝超过半数浏览器自动开启

>>>个属性:off/on

>>>可以在<form>标签设置Autocomplete,控制整张表单的自发性完成开关。但可以在个别input上单独设置,覆盖form的共同体安装。

 

Autofocus:自动获取焦点 Autofocus=Autofocus

Form:所属表单 通过form表单的id,指向特定表单。

Required:必填 Required=Required 设置input为必填

Pattern:验证input的模式

Placeholder:提示

 

 

–>

 

 

源代码:

 

<form action=”” method=”get”>

<table>

<tr>

<td>用户名</td>

<td><input type=”text” name=”username01″ / value=”123″
placeholder=”请输入账号”></td>

</tr>

<tr>

<td>密码:</td>

<td><input type=”password” name=”password01″
placeholder=”请输入密码”/></td>

</tr>

<tr>

<td>性别</td>

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

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

 

</td>

</tr>

<tr>

<td>爱好</td>

<td><input type=”checkbox” name=”爱好” value=”男”/>男

<td><input type=”checkbox” name=”爱好” value=”女”/
checked=”checked”>女

 

</td>

</tr>

</tr>

<tr>

<td><input type=”image”
src=”../img/f2_img1.jpg”/></td>

<td></td>

</tr>

<tr>

<td><input type=”submit”/></td>

<td></td>

</tr>

<tr>

<td><input type=”reset”/></td>

<td></td>

</tr>

</tr>

<tr>

<td><input type=”button” value=”我就是看看”/></td>

<td></td>

</tr>

</table>

</form>

 

</body>

</html>

图形如下:

图片 18

 

 

图片 19

 

图片 20

 

案例操练:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>贵美商城注册页</title>

</head>

 

 

<body>

<form action=”” method=”get”>

<table>

<tr>

<td>用户名:</td>

<td>

<input type=”text” />

(可包含1-0,2-2,02 等)

</td>

<td rowspan=”9″>

<h3>

<img src=”../1_HTML基本标签/img/icon.png” />

开卷贵美服务协议

</h3>

<textarea style=”width: 300px; height: 300px; resize: none;
overflow-y: scroll;” readonly=”readonly”>

贵美商城服务协议

</textarea>

</td>

</tr>

<tr>

<td>密码:</td>

<td>

<input type=”password” />

(可包含1-0,2-2,02 等)

</td>

</tr>

<tr>

<td>再一次输入密码:</td>

<td>

<input type=”password” />

</td>

</tr>

<tr>

<td>电子邮箱:</td>

<td>

<input type=”email” />

(可包含1-0,2-2,02 等)

</td>

</tr>

<tr>

<td>性别:</td>

<td>

<input type=”radio” />

<img src=”../1_HTML基本标签/img/icon.png” />

<input type=”radio” />

<img src=”../1_HTML基本标签/img/icon.png” />

</td>

</tr>

<tr>

<td>头像:</td>

<td>

<input type=”file”/>

</td>

</tr>

<tr>

<td>爱好:</td>

<td>

<input type=”checkbox” />运动

<input type=”checkbox” />聊天

<input type=”checkbox” />玩游戏

</td>

</tr>

<tr>

<td>喜欢的城市:</td>

<td>

<select name=”city”>

<option selected=”selected”>[请选择]</option>

<option>青岛</option>

<option>烟台</option>

<option>济南</option>

</select>

</td>

</tr>

<tr>

<td></td>

<td>

<input type=”submit” value=”同意左侧服务协议,提交登记新闻”
disabled=”disabled” />

<input type=”reset” value=”重置” />

</td>

</tr>

</table>

</form>

 

 

 

</body>

</html>

图如下:

图片 21

 

第三天

课后陶冶复习。

如图:

图片 22

 

 

代码如下:

<!DOCTYPE html>

<html>

 

<head>

<meta charset=”utf-8″>

<title>表单作业</title>

</head>

 

<body>

 

<form>

<h1><span style=”color: #F39900;”>
合作</span>意向书</h1>

<p><span style=”color:
#F39900;”>大家在吸纳你的须求后,会第一时间与您获得联络。</span></p>

<table>

<tr>

<td><b>集团名称:</b></td>

<td>

<input type=”text” name=”com name” style=”width: 420px;” />

</td>

</tr>

<tr>

<td><b>姓名:</b></td>

<td>

<input type=”text” name=”name” style=”width: 420px;” />

</td>

</tr>

<tr>

<td><b>电话:</b></td>

<td>

<input type=”text” name=”phone” style=”width: 420px;” />

</td>

</tr>

 

</table>

 

<table width=”600px”>

 

<p><span
style=”color:#F39900;”><big>您需求的劳动</big></span></p>

<tr>

<td>

<input type=”checkbox” name=”1″ value=”网络建设”>网站建设与传播

</td>

<td>

<input type=”checkbox” name=”1″ value=”电子商务”>电子商务

</td>

</tr>

<tr>

<td>

<input type=”checkbox” name=”1″ value=”数字化展馆”>数字化展馆

</td>

<td>

<input type=”checkbox” name=”1″ value=”多媒体互动”>多媒体互动

</td>

</tr>

<tr>

<td>

<input type=”checkbox” name=”1″ value=”软件服务”>软件服务

</td>

<td>

<input type=”checkbox” name=”1″ value=”移动支付”>移动支付

</td>

</tr>

</table>

<br />

<table>

<tr>

 

<td width=”600px” height=”110px” align=”center” valign=”center”>

<input type=”submit” name=”submit” value=”提交+” style=”color:
white;height: 37px;width: 110px; border:hidden;”>

</td>

</tr>

 

</table>

 

</form>

<hr />

<hr />

<hr /><br /> <br /> <br /> <br /> <br
/>

 

<form>

<table width=”600px”>

<tr>

<td align=”right”>用户名:</td>

<td>

<input type=”text” name=”username” />

</td>

<td></td>

<td></td>

</tr>

<tr>

<td align=”right”>密 码:</td>

<td>

<input type=”password” name=”password” />

</td>

<td align=”right”>真实姓名:</td>

<td>

<input type=”text” name=”name” />

</td>

</tr>

<tr>

<td align=”right”>确认密码:</td>

<td>

<input type=”password” name=”password” />

</td>

<td align=”right”>性别:</td>

<td>

<select name=”sex” style=”color:darkgray;”>

<option value=”男” selected=”selected”;”>男</option>

<option value=”女”>女</option>

</select>

</td>

</tr>

<tr>

<td align=”right”>证件类型:</td>

<td>

<select name=”zheng”>

<option value=”shenfenzheng”
selected=”selected”>身份证</option>

<option value=”xueshengzheng”>学生证</option>

</select>

</td>

<td align=”right”>出生日期:</td>

<td>

<input type=”text” name=”day” />

</td>

</tr>

<tr>

<td align=”right”>证件号码:</td>

<td>

<input type=”text” name=”haoma” />

</td>

<td align=”right”>国家:</td>

<td>

<input type=”text” name=”country” />

</td>

</tr>

<tr>

<td align=”right”>联系号码:</td>

<td>

<input type=”text” name=”phone” />

</td>

<td align=”right”>城市:</td>

<td>

<input type=”text” name=”city” />

</td>

</tr>

<tr>

<td align=”right”>手机号码:</td>

<td>

<input type=”text” name=”telephone” />

</td>

<td></td>

<td>

 

</td>

</tr>

<tr>

<td align=”right”>E-mail:</td>

<td>

<input type=”text” />

</td>

<td align=”right”>邮编:</td>

<td><input type=”text” name=”youbian” /></td>

</tr>

<tr>

<td align=”right”>联系地址:</td>

<td colspan=”3″>

<input type=”text” name=”dizhi” style=”width: 460px;” />

</td>

 

</tr>

<tr>

<td colspan=”4″ align=”center”>

<input type=”reset” value=”重 置” />
        

<input type=”submit” value=”注册” style=”color: white; border:
hidden;”/>

</td>

 

</tr>

</table>

 

</form>

</body>

 

</html>

 

新内容:

CSS样式表(一)

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>Css常用选取器</title>

<!–HTML注释–>

<style type=”text/css”>

/*CSS语法必须卸载<style>标签中*/

/*CSS注释*/

 

 

/*【选拔器命名规范】

* 1.只能够有字母、数字、下划线组成;

* 2.上马不可以使数字。

*/

 

/*【标签采用器】

*1.写法:HTML标签名{ }

*2.意义:选中所有对应的HTML标签,并修改其样式

*/

li{

color: red;

font-size: 36px;

}

/*【类采取器】

* 1.写法: .接纳器名字{}

* 2.调用:在须要修改样式的HTML标签上,使用class=”选取器名”

* 3.优先级:当作用于同一层时,class选拔器>标签选用器

*/

.list{

color: blue;

font-size: 48px;

}

/*【ID选择器】

* 1.写法:#慎选器名{}

* 2.调用:在需求修改样式的HTML标签上,使用id=”接纳器名”

* 3.优先级:同一层时,id选拔器>class采取器

* 4.ID选用器是绝无仅有的!同一页面严禁出现同名ID!!!

*/

 

#first{

color:darkorange;

font-size: 52px;

}

/*【通用选用器】

* 1.写法: *{}

* 2.效能:拔取页面的享有HTML标签

* 3.优先级:最低

*/

 

/*【后代接纳器】

*1.写法:选择器1 选择器2 …… 选择器N {}

*2.见效规则:选择器2必须是选项器1的子孙……

*/

div li{

background: brown;

}

 

/* *【子代采用器】

* 1.写法:选择器1>选择器2>……>选择器N{}

* 2.生模拟则:选拔器2必须是选项器1的直白子代

*/

 

/*【交集接纳器】

* 1.写法:选择器1选择器2……选择器N{}

* 2.卓有功用规则:必须同时班组所有选拔器才生效

*/

.qq{

font-size: 58px;

}

/*【并集选拔器】

*1.写法:选择器1,选择器2,……,选择器N{}

*2.生效规则:餍足任意一个选拔器,均可生效

*/

 

/*【选用器优先级】

* 1.前后原则:近者优先。

* 2.当意义于同一层时:可由权重总括

* 权重划分:标签接纳器 1

* class选择器 10

* id选择器 100

* 行级样式表stle=”” 1000

*/

 

</style>

</head>

<body>

 

<div>

<ul></ul>

<li>那是列表1</li>

<li class=”list”>那是列表2</li>

<li class=”list” id=”first”>这是列表3</li>

<li class=”qq”>那是列表4</li>

<li>那是列表5</li>

</div>

<div>

<li>那是列表1</li>

<li class=”list”>那是列表2</li>

<li class=”list” id=”first”>那是列表3</li>

<li>那是列表4</li>

<li>那是列表5</li>

</div>

 

</body>

</html>

 

图如下:

图片 23

 

 

CSS常用文本属性

 

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>CSS常用文本属性</title>

<style type=”text/css”>

.div{

width: 200px;

height: 200px;

background: #BCBCBC;

/*[颜色常用单位]

* 十六进制:#ffffff

* 颜色名称:red

* RPG颜色:(255,255,255)

* RPGA:首位数,表示透明度。可选值0~1

* */

/*[CSS常用文本属性]

/* [CSS常用文本属性]

* 1、字体、字号:

font-weight:字体的粗细,可选属性值:bold加粗 lighter细体
100~900数值(400正常,700 bold)

 

font-size:字体大小 **PX
**%(浏览器默许字体大小的百分比,绝半数以上默认16px)

 

font-family:字体族,设置字体。

>>>多个字体样式间用逗号分隔,浏览器解析时,会从左往右依次解析,选用可用字体。

>>>一般前边使用具体字体名称,末了一个用到字体族类名称。

(常用字体族名称:衬线体serif 非衬线体sans-serif(常用) 等宽体Monospace)

>>>例如:font-family:Arial, ‘Microsoft Yahei’, sans-serif;

 

font-style:字体样式,正常(normal) 斜体(italic)

 

* font-variant:small-caps; 将字母转为小型大写字体。

 

(驾驭)font缩写情势:font-style font-variant font-weight font-size
line-height font-family

>>> 使用注意事项 :

① 顺序必须严俊按照上述顺序;

② 三个样式之间用空格分割,而且font-size/line-height 必须作为一对用/分割

③ font-size和font-family必须指定,其余样式不点名将接纳默许样式突显;

>>> 例如:font:italic bold 75%/1.8 ‘Microsoft Yahei’,
sans-serif;

斜体 加粗 字号/行高 字体族(微软雅黑,非衬线字体族)

 

2、字体颜色:

color:字体颜色

opacity:透明度,0~1之间的数字。
调整时控件以及子控件均会透明,而拔取rgba调整时,只会时本控件透明,子控件不会时有发生透明度变化。

 

3、行距、对齐等:

line-height:行高 ① 像素单位 48px ② 不带px 正常行高的翻番 ③百分数 同2

>>>
典型应用,调整控件普通话垂直居中的格局:控件的height=控件的line-height

 

text-align:块级元素普通话字的档次对齐格局 left center right

 

letter-spacing:字符间距,字与字之间的距离

 

text-decoration:文本修饰
下划线underline、删除线line-through、上划拉overline、none

 

overflow:控制超出范围文本的显示格局(auto
依照文字多少活动展现滚动条,scroll始终显示滚动条, hidden
超出范围文本隐藏) 可以通过overflow-x overflow-y分别安装水平垂直方向

 

text-overflow:设置多余文字的显示格局 clip裁剪掉 ellipsis省略号

>>>【重点】让每行多余文字突显省略号:

① white-space: nowrap; 假若是汉语,需安装行末不断行

② overflow: hidden; 设置控件超出范围隐藏

③ text-overflow: ellipsis; 设置多余文外省略号呈现

 

white-space: nowrap; 设置普通话行末不断行突显

 

word-break:
浏览器默许在空格处断行,当一个单词长度超出范围时,会不断行呈现,
break-all 允许在单词内换行。

 

text-shadow:文本阴影,有五个属性值:

①档次阴影距离 必选,数值越大,阴影右移

②垂直阴影距离 必选,数值越大,阴影下移

③投影模糊距离 可选,数值越大,阴影越模糊。默认为0,不模糊

④影子颜色 可选,默许为绿色

 

text-indent:首行缩进,可用像素值调整缩进大小

 

* text-stroke: -webkit-text-stroke: 0.2px #008000;
描边的粗细,描边的颜色

 

*/

 

}

.Q{

font-style: italic;

font-weight: 600;

 

}

</style>

</head>

<body>

<div class=”div”>

那是div里面的文字!

 

</div>

<br />

<div class=”Q”>

那是div里面的文字!

 

</div>

</body>

</html>

案例图:

图片 24

 

第五天

一.复习前日的课后操练

 

图形如下:

 

01-

图片 25

02-

图片 26

03-

图片 27

 

代码如下:

 

01-

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title></title>

<style type=”text/css”>

#table1 td{

color: #818181;

font-size: 12px;

/*height: 40px;*/

line-height: 30px;

}

 

#table1 .col1{

text-align: right;

width: 70px;

}

 

#table1 td input{

width: 250px;

height: 30px;

}

 

#table1 .checkbox{

width: 13px;

height: 13px;

}

 

#table1 td a{

color: #5CC4EE;

}

 

#table1 .submit{

border: hidden;

height: 40px;

 

color: #FFFFFF;

}

 

#table1 td span{

color: #5A5A5A;

}

 

#table1 td span a{

color: #6DBD24;

text-decoration: none;

}

 

</style>

</head>

 

<body>

<h3>注册</h3>

<!–<br/>–>

<table id=”table1″ cellspacing=”10″ >

<tr>

<td class=”col1″>真实姓名</td>

<td>

<input type=”text” placeholder=”用户名(必填)” />

</td>

</tr>

<tr>

<td class=”col1″>手机号/邮箱</td>

<td>

<input type=”text” placeholder=”请输入手机号或邮箱” />

</td>

</tr>

<tr>

<td class=”col1″>密码</td>

<td>

<input type=”password” placeholder=”6-20位字母数字下划线” />

</td>

</tr>

<tr>

<td></td>

<td>

<input type=”checkbox” class=”checkbox” />

本身经受中华英才网的<a href=”#”>用户协商</a>和<a
href=”#”>用户协商</a>

</td>

</tr>

<tr>

<td></td>

<td>

<input type=”submit” value=”立时登记” class=”submit” />

</td>

</tr>

<tr>

<td></td>

<td>

<span>已有账号,<a href=”#”>直接登录</a></span>

</td>

</tr>

<tr>

<td></td>

<td>

<span>使用其余措施登录:</span>

<a href=””><img src=”../1_HTML基本标签/img/icon.png”
/></a>

<img src=”../1_HTML基本标签/img/icon.png” />

<img src=”../1_HTML基本标签/img/icon.png” />

<img src=”../1_HTML基本标签/img/icon.png” />

</td>

</tr>

</table>

</body>

</html>

 

 

02-

 

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title></title>

 

<style type=”text/css”>

#login div{

background-image: url(../2_CSS基础语法/img/icon.gif);

white-space: nowrap;

text-indent: 35px;

line-height: 25px;

width: 30px;

height: 25px;

}

 

/*#login .div1{

width: 30px;

height: 25px;

}*/

 

#login .div2{

background-position: -42px 0px;

/*width: 30px;

height: 25px;*/

}

 

#login .div3{

width: 43px;

height: 20px;

/**/

background-position: 0px -30px ;

text-indent: 0px;

text-align: center;

font-size: 12px;

line-height: 17px;

}

</style>

</head>

 

<body>

 

<div id=”login”>

<div class=”div1″>

购物车

</div>

 

<br /><br />

 

<div class=”div2″>

支援要旨

</div>

 

<br /><br />

 

<div class=”div3″>

登录

</div>

</div>

 

 

 

 

</body>

</html>

 

 

03-

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title></title>

<style type=”text/css”>

#ul li{

background-image: url(../2_CSS基础语法/img/icon1.gif);

list-style: none;

background-repeat: no-repeat;

font-family: “宋体”,sans-serif;

background-position:0px -80px ;

width: 200px;

height: 20px;

text-align: center;

line-height: 30px;

font-size: 14px;

}

 

#ul .first{

width: 200px;

height: 30px;

background-position: 0px -50px;

line-height: 30px;

color: #FF6800;

font-weight: bold;

}

 

#ul .last{

height: 35px;

}

</style>

</head>

 

<body>

 

<ul id=”ul”>

<li class=”first”>商品归类</li>

<li>商品分类1</li>

<li>商品分类2</li>

<li>商品分类3</li>

<li class=”last”>商品分类4</li>

</ul>

 

</body>

</html>

                       ———————–end
(爱读书的小伙儿)

Leave a Comment.