Html基础学习(足球基于W3school网络教程)

   
足球,在分水妙笔小镇,就是一群心理男人业余生活的常态。某个早晨,或是周末,他们会在那些的呼唤下,自觉地聚到篮球馆上,分组对抗,挥洒汗水,全力以赴。这多少个汉子为人真诚,责任承担,笃信兄弟情。秋的灿烂与浓烈,正是五云雄风强劲、激荡的注释与证人!

//避免乱码

足球 1

head中加入

   
那是秋末,整整几天,县城都浸在阴雨中,2014年“红牛杯”足球赛正如火如荼地展开着。

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>

   
去科伦坡足球锻炼基地的旅途,空调开着,都认为不舒适。原本领队老方不能成行,接连几天的胸闷,弄得人晕乎乎的,浑身上下不舒坦。陈教练因为前晚应酬,搞了点空气,还未从疲惫中还原过来。倒是饶先生、郭老师、斌斌很兴奋,一路聊球,排兵布阵,很期待的榜样。

 

   
阴湿的空气在特大的篮球场弥漫开去,这里一度聚集了诸多球友,认识的,不认识的,都很谦虚,互相打着照看,寒暄着,说着天气冷这类的无所谓的话,比赛的浮动氛围却一点也不少。

//在head中利用外部样式表举行格式化

   
这边老桐青和水工厂已经汇聚,开头练球了。他们是足协杯的常客,都有主场的觉得,不生疏,一向实力蛮强,不可轻视。

<link rel=”stylesheet” type=”text/css” href=”xxxxx.css”/> 

   
分水五云,这一次出征,倒是有些底气在的。自二〇一二年来说,主场不败。海宁、临安、新安江、西湖等业余球队来研商,均难撼五云。

 

   
球队近年来结构合理,主力队员均是80后,业余的当打之年。经过这几年的跑龙套,主力队伍容貌渐趋成型,三条线上均有领军人物——锋线攻击群,有重炮手焘哥领衔,他暴发力强,脚头硬,过人动作小,转身快,速度惊人,杀伤力强,进球如同草芥,是后卫线难缠的对手与噩梦。

//使用html样式表举办格式化

足球 2

<style type=”text/css”>  

   
边路突击手小白,速度快,趟球过人,动作花哨美妙,下底传中,零角度打门,神速回防,都是他的保留剧目。

         xxxx

   
得分后卫夏支文,摔跤手出身,体格强壮,护球自如,转身突进能力强,屡有斩获。

</style>

    小蓝的跑动令人奇怪,他总会冒出在最相宜的地方,拿球,突击,进球。

 

   
中场由卢晓与魏蕾坐镇。卢盘带出色,突击迅捷,走位飘忽,前场极具胁迫,并擅长把握传球时机。

//bgcolor定义背景颜色;background=”xxxx”指定背景图片,如图片小于页面,图片会再一次显示

   
魏大局观强,调度合理,前后场串联及时,策应准确到位,加之一脚传球常可助攻,形成单刀,绝杀对手。

 

   
风尚小谢,技术出神入化,拿球、盘带、传球均有模有样,精准传球令人表扬。看似节奏稍慢,却常暗藏杀机,回防也很积极。

//<p>标签</p>

   
后场由张先生与鑫龙领衔。张内敛敦实,防守稳健,出击补位及时,是后防线的定海神针。

段落标签。浏览器会忽略源代码中的排版,会简单多余的空格和换行等。

   
鑫龙掐位补位准确,贴身防铲凶狠,突击前插连忙,常盯防对手强锋,让挑衅者无功而返。

要想换行,可用<br/>来实现。

   
守门员小董,兼边后卫,微胖,但身手最连忙,出击及时,触球稳健,常抓住时机,发入手抛球进攻,与后防的呼应极好。

 

   
啸公子(队长),球队最青春,可打四个岗位,边后卫防守到位,触球果断,对手几乎一直不什么机会。他拿手头球,也再三为球队建功。面对强队,他得以客串守门员,分外稳健。

//h1-h6标题标签

   
边后卫斌斌,防守跑动积极,卡位及时规范,死缠对手能力强,常让挑衅者无技可施。

<h1>h1标题标签</h1>

   
边后卫大黑,号称“跑不死”,擅长助攻,过人动作幅度小,技术细腻,防守凶悍,堪称后防铁闸。

<h2>h2标题标签</h2>

   
队长剑剑,能力系数,攻防兼备,可按球队需要,调全场上岗位。踢前场,策应进攻;踢边卫,全职防守。场上指挥睿智,呼应及时,大局观强。

<h3>h3标题标签</h3>

足球 3

<h4>h4标题标签</h4>

   
提高最大的是王云峰,号称“神锋”,从欣赏足球,开头融入球队,到现行施职边潮流,看似简单的动作,往往令人防不胜防,下底,或45度内切,都很有套路。平日锻炼积极,堪称榜样。

<h5>h5标题标签</h5>

   
但就是这一个队员,以往总被住户几比零的虐。个人力量优异,大伙儿一盘散沙,就是融不到一块。自会长方樟林(60后)重组球队,并矢志不渝帮扶球队,号召力与凝聚力非一般,陈先生(70后)也出席到球队管理,球队的磨炼、比赛逐渐正常,一切都在往好的动向前行。 
                                     

<h6>h6标题标签</h6>

   
决赛日,气氛至极浓烈。三四名与五六名比赛截止后,我们都在期待本场决赛。

在意:请只有把题目标签用于标题文本。不要单独为了暴发粗体文本而利用它们。粗体可利用此外标签或
CSS 代替。

   
赛前,科佳咨询(桐青队)是有名劲旅,多届冠军,又坐拥客场之利,被广大看好。而分水五云足球队在小组赛中表现惊艳,6:1胜桐盟,5:0胜财税局,8:0胜老桐青,三战全胜,攻击力惊人,得失球比为19:1。但分水是第一次闯入决赛,经验略显不足,但信念满满,志在争夺冠军。

 

   
果不其然,前10分钟,分水五云队员略显紧张,攻防的有序性未能很好的涵养,被科佳咨询中场队员一脚世界波超过了。场所一下被动起来。助威团大声呐喊,教练极力要求我们过来心理,打出团结的技战术来。

//文字居中

   
几分钟未来,已在前三场竞赛中攻入8球的本届最佳射手许焘,前场神速突击,摆脱对方高大后卫的贴身防守,一脚挑射,1:1,分水五云扳平了。

<h4 align=”center”>用align=”center”将文字居中。</h4>

   
中场休息,我们对场上突显都相比较满足,表示打出团结的风格,五云队必将大败,并对下整场的技战术也做了相应的布置。

 

   
下整场,分水五云持续发力,通过后场坚决的阻挠、前场不断的交叉传球,很快由中场发动机卢晓打进一球,2:1。科佳咨询不甘示弱,先导压上狂攻,这当中分水五云下怀,以高速突破见长的许焘创设点球,并主罚命中,3:1。科佳咨询此时已无力反扑,最终比分定格在3:1。

//hr标签用于加水平线

   
5场球,进22球失2球,分水五云赢得亚军~~欢呼声与震撼的泪水在庞大的球馆弥漫开去,这是分水镇业余足球的狂胜与狂欢。

<hr />

足球 4

 

足球 5

//注释<!–XXXX–>

   
分水五云足球,一群人,一种能力。这支由制笔协会、公司干部、公务员、讲师等整合的业余球队,用心境营造足球氛围,他们是中华小镇业余足球的不二版图。

<!–注释不会在浏览器中显得。–>

   
老郭(50后)除了回老家看看,雷打不动;国鑫除了钓鱼,一如既往;还有神锋王,斌斌,老表,小马,申屠,永明……

 

   
2015年县平民运动会第三名,2016年又赢得前两名,前年,分水五云足球,又在奔跑的中途!

//背景颜色

足球 6

bgcolor=”xxxx”

足球 7

 

足球 8

//背景图像

足球 9

background=”xxxx”

足球 10

 

足球 11

//链接

足球 12

经过a标签href=”xxxx”定义,在新窗口打开用target=”_blank”

<a href=”http://www.baidu.com” target=”_blank”>百度</a>

 

//图像

经过img的src定义,假如不可以呈现图片,则展现alt中的文字

<img src=”xxxx” alt=”xxxx” />

 

//文本格式化

<b>文本格式化,这是粗体文本bold,用b标签</b>

<strong>文本格式化,这是加深语气strong,用strong标签</strong>

<big>文本格式化,这是中号字big,用big标签</big>

<em>文本格式化,那是第一文字emphasized,用em标签</em>

<i>文本格式化,这是斜体文字italic,用i标签</i>

<small>文本格式化,这是大号字small,用small标签</small>

 

//预格式文本用pre标签

<pre>

这是

预格式文本。

它保留了      空格

和换行。

</pre>

 

//链接到同一页面的某地点,用name属性命名“锚”

<a href=”#C4″>查看 Chapter 4。</a>

<h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla</p>

<h2><a name=”C4″>Chapter 4</a></h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>

<p>This chapter explains ba bla bla</p>

 

//表格用table,border为边框宽度,tr-th-td

<table border=”1″>

<tr>

  <th>表头1</th>

  <th>表头2</th>

  <th>表头3</th>

</tr>

<tr>

  <td>100</td>

  <td>200</td>

  <td>300</td>

</tr>

<tr>

  <td>400</td>

  <td>500</td>

  <td>600</td>

</tr>

</table>

 

结果:

足球 13

//横跨两列的单元格:

<table border=”1″>

<tr>

  <th>姓名</th>

  <th colspan=”2″>电话</th>

</tr>

<tr>

  <td>Bill Gates</td>

  <td>55577854</td>

  <td>55577855</td>

</tr>

</table>

结果:

足球 14

//横跨两行的单元格:

<table border=”1″>

<tr>

  <th>姓名</th>

  <td>Bill Gates</td>

</tr>

<tr>

  <th rowspan=”2″>电话</th>

  <td>55577854</td>

</tr>

<tr>

  <td>55577855</td>

</tr>

</table>

结果:

足球 15

//带有 单元格边距cellpadding:

<table border=”1″  cellpadding=”10″>

<tr>

  <td>First</td>

  <td>Row</td>

</tr>  

<tr>

  <td>Second</td>

  <td>Row</td>

</tr>

</table>

结果:

足球 16

//表格中元素的职位

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

 <tr>

  <th align=”center”>消费项目</th>

  <th align=”center”>一月</th>

  <th align=”center”>二月</th>

 </tr>

 <tr>

  <td align=”left”>衣服</td>

  <td align=”right”>$241.10</td>

  <td align=”right”>$50.20</td>

 </tr>

 <tr>

  <td align=”left”>化妆品</td>

  <td align=”right”>$30.00</td>

  <td align=”right”>$44.45</td>

 </tr>

</table>

足球 17

//一个无连串表:

<ul>

  <li>咖啡</li>

  <li>茶</li>

  <li>牛奶</li>

</ul> 

足球 18

//一个一如既往列表,start为始发序号:

<ol start=”50″>

  <li>咖啡</li>

  <li>牛奶</li>

  <li>茶</li>

</ol> <hr />

 足球 19

//Disc 项目的志列表:

<ul type=”disc”>

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ul> 

足球 20

//Circle 项目的志列表:

<ul type=”circle”>

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ul>  

足球 21

//Square 项目的志列表:

<ul type=”square”>

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ul>  

足球 22

//数字列表:

<ol>

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ol> 

足球 23

//字母列表:

<ol type=”A”>

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ol>  

足球 24

//小写字母列表:

<ol type=”a”>

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ol> 

足球 25

//拉各斯字母列表:

<ol type=”I”>

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ol> 

足球 26

//小写布加勒斯特字母列表:

<ol type=”i”>

 <li>苹果</li>

 <li>香蕉</li>

 <li>柠檬</li>

 <li>桔子</li>

</ol> 

足球 27

//一个嵌套列表:

<ul>

  <li>咖啡</li>

  <li>茶

    <ul>

    <li>红茶</li>

    <li>绿茶</li>

    </ul>

  </li>

  <li>牛奶</li>

</ul> 

足球 28

//表单:form-input

         文本域  text fields

         密码域  password,密码在输入时展现*号

         复选框 
checkbox,是个小方块,checked可指定选项是否默认选定,可以通过点击采纳或吊销

        
单选按钮:radio,checked指定默认选项,点击其中一个按钮时,该按钮变为选中状态,其他具有按钮都改成非选中。

         下拉列表:select-option,用selected可指定默认选定的选项。

         文本域 textarea,rows高,cols宽

         按钮 button

         提交 submits

         fieldset 周边带边框的效益

 

<form action=”xxxx”> <!–即便简单 action 属性,则 action
会被安装为当下页面。method规定在付给表单时所用的 HTTP
方法GET或POST–>

        
<!–默认用GET方法。假如表单提交是无所作为的,没有趁机信息,比如寻找引擎查询。用GET时,表单数据在页面地址栏中是可见的。

                  
假使表单正在更新数据,或者隐含敏感音信(例如密码)。POST安全性好,因为页面地址栏中被交给数据是不可见的。–>

         姓:<input type=”text” name=”firstname” /><br />

         名:<input type=”text” name=”lastname”/> <br />

         密码:<input type=”password” name=”password” /><br
/>

         爱好 :篮球<input type=”checkbox” name=”aihao”
value=”basketball” />足球<input type=”checkbox” name=”aihao”
value=”football” /><br />

         性别 :男<input type=”radio” checked=”checked” name=”Sex”
value=”male” />女<input type=”radio”  name=”Sex” value=”female”
/> <br />

         请采用出生地:

         <select name=”place”>

                   <option value=”anhui”>安徽</option>

                   <option value=”jiangsu”>江苏</option>

                   <option value=”hubei”
selected=”selected”>湖北</option>

                   <option value=”jiangxi”>江西</option>

         </select>

         简介:

         <textarea name=”jianjie” rows=”2″ cols=”25″>

                   这个人很懒,什么都没有留下!

         </textarea>

         <input type=”button” value=”Hello world!”>

         <input type=”submit” value=”提交”>  
<!–点击提交按钮后,会将数据交到到action中的页面。假若简单 action
属性,则 action 会被安装为当前页面。–>

         <fieldset>

           <legend>健康消息</legend>

             身高:<input type=”text” />

             体重:<input type=”text” />

   </fieldset>

</form>

 

//排列图片:设置对齐模式的图像

<p>图像 <img
src=”https://www.baidu.com/img/baidu\_jgylogo3.gif” align=”bottom”>
在文书中,文字据下,为默认模式</p>

<p>图像 <img src
=”https://www.baidu.com/img/baidu\_jgylogo3.gif” align=”middle”>
在文书中,文字居中</p>

<p>图像 <img src
=”https://www.baidu.com/img/baidu\_jgylogo3.gif” align=”top”>
在文件中,文字局上</p> <hr />

 

<p>

<img src =”https://www.baidu.com/img/baidu\_jgylogo3.gif” align
=”left”>

涵盖图像的一个段落。图像的 align 属性设置为
“left”。图像将扭转到文本的最左侧。

</p><hr />

 

<p>

<img src =”https://www.baidu.com/img/baidu\_jgylogo3.gif” align
=”right”>

蕴含图像的一个段落。图像的 align 属性设置为
“right”。图像将转变到文本的最右面。

</p>