从零伊始学习前端开发 — 1、HTML基础篮球

 

人生就是打怪升级,深扎才是合格秘籍

经文的游艺总是模拟了人生最主旨的精神:沿着时间线刷剧情、涨经验,通关之后,直辖平淡。从菜鸟新手到反复陶冶,从组团打怪、升职加薪到跳槽创业,一路走来,崔涛的人生更像是一场频频打怪升级的进程。

在软件外包公司,因项目不一致,使用的技术也差距,那让崔涛磨练了长足学习的力量,在VB、Delphi、Powerbuilder、Java等编程语言中切换;在观念软件集团担任技术副总,经历了从须求分析到线上有限支撑、从0到1搭建技术公司;在蘑菇街,通晓了飞快发展中的互连网公司的技巧系统和管理连串;在阿里,学习了特大型成熟网络商家的架构……

千千次的刻意磨炼,那是崔涛回看多年技能生涯得出的终端总计。

有的是技艺的法则,上网查找就能自在得到,但具体是怎么落实?最底部的代码是何等的?他拔取重复写代码,把不懂的地方再重复写一遍,发现写不下来,辅之看看官方源码文档。数十次的苦心训练,一是足以操练自己写代码的快慢及思维能力,二是尖锐精通其规律及达成细节。

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

能进阿里必有着一级高校学历;

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

在她随身,一些想象中的“不可能”都成了具体中的任天由命。

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

崔涛

b)将提示新闻放置在label标签中可以设置大家想要的样式

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

“当时没什么想法,就是找一份工作,好好干!”

虽说软件外包对技术深度并从未太高的须要,但对此初入软件行业的新娘来说,也是个不小的搦战。为了火速成长,那段日子里,崔涛阅读了汪洋的技能书籍,例如《Java与形式》、《Red
Hat Linux 9
宝典》等等。在累积理论知识的还要,崔涛编写了种种实例代码以练手

13年搬家时整理出来的图书

在谈到映像最深的一本书时,崔涛的第一反应就是那本仅有340页的《Contributing
to
Eclipse》。
即使该书只是对Eclipse的插件开发做了大致的牵线,却对他很有启迪。也就是从那个时候初步,崔涛对技术有了较为深层次的思念和想象力。

“既然你也不晓得自己该做什么,那就把当下的事情办好。”恍如很鸡汤的一句话,却成了崔涛15年技术生涯最具烙印的指向标。

想都是题材,做才是答案。“技术底子弱,那就做”。崔涛就像跳水般,一猛子深扎在技术海洋里,乐此不疲。

  target=”_self”
默许值,在本窗口打开

· 36岁的他,依然黑发稠密,体态卓绝,丝毫从未中年男人的油腻,谈吐间可知他的儒雅与温柔;

· 专科出身,曾是地点国税局的一名小小音信员,软件外包公司的码农,十几年后,却进入菜鸟,负责集团主题业务服务器端技术架构;

· 现是世上黑卡CTO的她,有着13年社团管理经验,却时常与一线同学探讨技术细节,并每一天坚定不移写代码;

……

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

例如:

 浏览器突显效果:

想都是难题,做才是答案

龙骨里不安分的崔涛,不愿只在地点国税局当一名技术员。2002年,他一身从江西老家来到坎帕拉找到了第一份软件外包的劳作。这一干,就干了六年多。

14.图像域

程序员必然是千年格子衫喇叭裤;

注:get和post的区别

唯独,他,就像与这个结论大相径庭。

 

除非卖力了,才知道自己可以仍然不可以。

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

Q&A环节

问:阿里招贤一定要211、985的学历吗?

答:哈哈,没有啊,你看自己,我就是个例证。

 提问人的具体意况: 

本年结束学业进去了一家传统软件公司,负责后台开发。现在入职7个月了,由于并未前辈给予系统学习的提出,所以觉得自己上学的不系统,不深远,还会相比较盲目。并且公司是2B的,项目支付跟2C如故有为数不少差异。

问:技术的上学,有没有相比较好的统筹,或者学习方法?

答:首先是并非太浮躁,假设你还不亮堂前面要做什么业务的话,你安下心来把当下的事情办好,你的路就会逐步逐渐进行起来。若你连当前的台阶都卡住的话,那其余的坎儿你就更碰不到,就类似爬楼梯一样。

第二就是看书,自家及时的情状和她大概,技术相比弱,很多事物不大明白,那就看书,钻研,让投机的理论知识不断丰硕起来,那时候就会有部分谈资,与外人有交集。

其三就是在场一些世界的移位,多写写代码,在Github上多找找大家参预的类型,看看能无法参预进去。我以为你会找到乐趣的。

问:在to B的商店办事,未来想去to C公司,不难吗?

答:那两者,在我看来没有太大的区分。To
B相对来说相比较严刻一些,它的流程化可能做的会更好有的,因为事先在做传统软件的时候,都是一步步如约模型来做,安分守己。To
C,比如网络的to
C,这就对人的渴求比较健全,相对传统的来说,是差距倾向的,那边更健全,那边更小心。

To B照旧to C并不首要,紧要的是为和谐做一些累积,to C里面其实也在做to
B的事务,两者有相通之处。

  c)
属性和属性之间用空格隔开,不分先后顺序

确实没有何样近便的小路,认准了就干。

一度34岁的崔涛,还想再奋斗一回。满世界黑卡,就是他的连年技能及管理经验积累暴发的地点。

刚搭建技术团队时,时常须要冲在一线,手把手带公司敲代码,天天基本上都要忙到凌晨一两点。崔涛戏谑地说,创业集团的CTO就不算是CTO,就是一个Team
Leader。可就是那段披星戴月的经验,让她栽培了一批可以的技巧人,搭建起了大地黑卡的骨干。

她非凡鼓励技术小伙伴走出去,多插足类似QCon那样的技术峰会;有时光逛逛Github、技术论坛,找一些温馨感兴趣的开源项目,参预并全心全意投入。

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

技术界流传着广大未经证实的“定论”

篮球 1

因坚信而坚持不渝,因热爱而越来越独立

还记得这颗体育馆上最亮的星,阿伦·艾弗森吗?183cm、黑皮肤、街头背景、嘻哈作风,与数不胜数篮球球星格格不入的她,被大千世界不看好的他,屏住呼吸,用三遍次让人惊艳的crossover,成了NBA史上最矮得分王,两次三番三届的NBA抢断王。

“影像最深的是,艾弗森就像是小鹿般不停在巨人丛林中,体无完肤,却依旧锲而不舍。”从小就喜好艾弗森的她,提到艾弗森时眼中闪过一束光。

艾弗森每四次奋力出击

在技术路上,崔涛并没有把自己受制在某个世界,而是没完没了地向上和品味。已经在传统软件行业积累沉淀了10年经历,崔涛却一往直前地投身网络行业,拿着仅原先一半不到的薪俸,加盟了正处在PHP向JAVA转型、高速发展中的蘑菇街,和公司伙伴一起搭建了蘑菇街底层的底蕴支撑系列。

“半夜线上有一些题材,须要立时起来解决。”在回顾整个技术生涯中,崔涛极度的安静,那一个看似痛苦的点,就在一遍次crossover中克制消失,最后融进生活,淡如烟云。

正坐在办公室的崔涛

当问到何为杰出的开发人士时,崔涛细想了下,提到了三个字:巧匠精神。开发人士,要能沉得住气,会深挖,能够丰盛利用现有的资源和技巧,快捷获得最好的结果。“那工作无聊啊?真的无聊,但假若您当真喜欢,就能在里边找到乐趣与价值。

就像是艾弗森,十年后梦回蒙特利尔,含泪轻吻地板。即便疲倦又全身鳞伤,但你也能通晓,在与生活的这一场对战中,他俨然已经算是通关的得主。

语法: <div></div>

普普通通脱发,大腹便便;

 

   <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 (没有属性值的属性) 不要阴影 -->

管理层基本不写代码;

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

现环球黑卡CTO


经常按钮默许value值为空,可以重复设置value属性

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

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

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

2.1 格式

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

3.提交按钮

 

3.html涵盖了两大一些:head部分和body部分

相对路径的二种写法:


     <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>

(6)height
设置单元格的中度或者tr的莫大

篮球 2


 

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

12.上传文件

HTML规范:不区分轻重缓急写,有始发和了结标签,也可把截止标签放在起先标签里,如:<input
type=’text’ /> 。属性可用双引号、单引号(必须配对应用)。

2.当当前文件和目的文件所处文件夹在同等目录下,写法如下:
目的文件所处文件夹名/目的文件名+伸张名

注:动用单选按钮时,一组中的单选按钮必须添加相同的name属性值,才能落成多选一的功能

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


注:html和xhtml的区别:

  注: border-collapse给table加

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

注:所有的表单控件都要放在form标签之间

注:dt和dd是不分厚薄关系

1.文本框

注:value用来安装默许值

注:selected用来设置下拉列表的默许选中项

eg:代码:

align=”left|center|right”

注:
target属性用来安装超链接是不是在新窗口打开

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

     <th></th>
:定义一个表格头;自带居中效果,假设纯文字,默许会以粗体的体制表现。

标签释义:<caption></caption>:表头新闻。

13.隐藏字段

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

<span>标签被用来整合文档中的行内元素。在行内定义一个区域,也就是单排内可以被<span>划分成好几个区域,从而落成某种特定功效。<span>本身并未其余性质。

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

注:span没有固定的展现格式,只有在对它应用样式时,才会发生视觉上的出入

七、div


2.空标记

eg:

重中之重释义:

<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>

name属性主要供后端获取输入的内容或新闻

1.method
用来安装数据传送格局,一般为get和post格局

c) label标签是内联元素

       <tbody></tbody>
:可以驾驭为表格的始末区域,在Chrome、FF浏览器通过DOM进行表格动态插入行的时候,要利用那些。如果不开展DOM操作,可不用添加。

(1)border 设置边框的大幅度

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

disabled属性用来设置input控件的剥夺状态

  效果:(默许序号类型是数值
,设置属性type=“a”起功效,是从b初叶  start属性作用)

7.下拉列表

1.文档评释

篮球 3

HTML转义字符表

注:alt和title的区别

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

效益:将form中的表单控件举办分组,
并添加一个题名

2.frameset 定义一个框架集,包含三个框架,每个框架都有单独的文档。

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

 

注:一般按钮不负有提交的职能,常常结合js使用

2.xhtml—可增添的超文本标记语言

效能:告知浏览器文档使用哪一类 HTML 或 XHTML
规范

注:当设置为fixed的时候,单元格宽度固定,不随内容有点暴发变化

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

注:布局和显示的业内由w3c(万维网联盟)制定,行为正式由ECMA(澳大利亚联邦(Commonwealth of Australia)电脑厂商联合会)制定

1.html—超文本标记语言

注:*报表相关属性:

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

1.正规标记

注:../是指重临到上一流目录

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

 

成效:在布局网页时用来划分板块

 四、html基本语法

语法: <select>

web标准-网页制作的专业,它是由一层层正式结合的,主要包含几个地方:结构(html,xhtml),表现(css),行为(javascript)

 

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

(3)cellpadding
设置情节和单元格之间的空子

1.当当前文件和对象文件在相同目录下,写法如下:
目的文件名+扩充名

注:付出按钮的默认value值为付出或提交查询,可再度设置必要的value值

2.密码框

五**、html常用标记**

form标签上的有关属性解释:

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

 

5.单选按钮

8.文本域

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

     <ul>

注:width:iframe框架的肥瘦

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

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

frameset 属性:

(5)width 设置单元格的升幅

 2.2 子项表达

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

   高级属性

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

注:常用其他转义字符:

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

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

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

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

  title是当鼠标悬停在图纸上时要来得的提示音讯

XHTML规范:必须小写,有早先终结标签,属性也用双引号。

 

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

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

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

 

1.
get是从服务器上获取数据,post是向服务器传送数据。
2.
get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各类字段一一对应,在URL中可以观察。post是经过HTTP
post机制,将表单内相继字段与其内容放置在HTML
HEADER内一起传送到ACTION属性所指的URL地址。用户看不到那么些历程。

10.提醒音讯:


 

4.表格行分组

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

注:推荐使用colgroup进行列分组

注:checked属性首要使用在单选和复选按钮上

成效:使用图像作为提交按钮,具备提交功用

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

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

  篮球 7

10.有种类表**语法:**

5.加粗语法:

1.装置单元格内容水平对齐格局

 

当我们设置border-collapse
:collapse时浏览器展现的意义:

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

篮球 8  

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

 

14.表格**作用:**展现数据(多用来后台管理)

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

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

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

  b)标记名称整体接纳小写(标准)

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

二、html相关概念


语法: 

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

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

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

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

在IE6下,span元素浮动时一定要把span元素放在a标签以前,不然,会油可是生浏览器包容难点,IE6下,浮动过后的span元素会向下错位一行。

  

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

语法: <html></html>

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


报表相关html属性

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

valign=”top|middle|bottom”

3.html5—html的第五遍紧要修改

9.无体系表语法:

<!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>

安装字符编码:

篮球 9

十、html注释

11.自定义列表

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

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

任何编码格式:gb2312,gbk

<col span=”数值”/>

textarea{resize:none;}


body部分:所有要在网页中显示的情节及放置内容的价签都放在body部分

9.平日按钮

3.当当下文件所处文件夹和目的文件所处文件夹在同样目录下,写法如下:../目的文件所处文件夹名/目的文件名+伸张名

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

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

六、表单

span可以兑现将文件的某一部分单独出来

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

注:left和right唯有火狐识别

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

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

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

6.复选框(复选按钮)

  

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

浏览器突显:

.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>

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

唤醒和注释:

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

一、web标准

成效:用来收集用户新闻

<noframes></noframes>:浏览器不支持此框架的时,突显的始末。

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

语法: 

xhtml相对于html并从未增添新的竹签,只是语法须求进一步残忍,比如:标签必须关闭,标记名称必须小写等

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

     height:iframe框架的可观


 

  rows :表示子框架按行的体制布局(篮球 10)。以2个子框架为例:rows=”30%,*”
,表示第二个框架占全体页面30%的万丈,第一个占剩下的;

7.档次分隔线**语法:** <hr/>

  start用来设置从几从头

4.重置按钮

推而广之:禁止用户通过拖拽改变文本域的大小

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

2.action
用来设置数据要发送到的岗位,一般为后端文件

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

1.iframe框架

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

三、html基本构造

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

八、span

  1. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
    4.
    get传送的数据量较小,无法压倒2KB。post传送的数据量较大,一般被默认为不受限制。但辩解上,IIS4中最大量为80KB,IIS5中为100KB。
    5.
    get安全性分外低,post安全性较高。不过执行功能却比Post方法好。

6.倾斜语法:

注:当设置了border-collapse:collapse;时,border-spacing会失效

2.html是网页的根元素或根标签,所有的网页内容和标签都置身html标签之间

       frameborder 
设置iframe框架的边框


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

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

  当属性和性质值相同时,可以省略属性值,如checked=”checked”
可以简写为checked

 2.3 属性

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

语法:<fieldset>

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

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

3.安装表格分隔线

 

 

 

 

frame 属性:

 

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

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

  caption是一个块探花素


  alt是当图片由于某些原因不能正常加载时要出示的交替新闻

注: 首要供后端修改数据时选拔

  name :指定框架的称谓,以便进行框架间的操作。

5.表格列分组

 

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

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

 

  在dl中可以存在多组dt,dd,每组中不得不存在一个dt,可以存在五个dd

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

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