做android开发也有两三年了,技术呢也就一般般吧,感觉做Android好累,要适配各种定制机,不管是适配像素图片兼容文字大小,还是功能性适配,Android的版本更新也比较频繁,从android5.0以后到现在Android7.0,感觉5.0的虽多技术都还没掌握呢,6.0也懂一点点皮毛,还要不断学习心知识,RXJava、RXAndroid 等多种流行技术框架与Android的实践,真心感觉累的不要不要的,而且感觉技术一直停留在表面,只是会用并不懂为什么要这么用?自己为什么写不出来这样的东西让别人用呢?目前个人对Android的激情也就那么一点点了,保留了对View模块源码探索的激情和动画特效的爱好,我想XX年以后进入创业公司,应该不会在做Android编码工作了吧!真心感觉IOS开发比之Android轻松多了,薪资也不错,不过就个人而言IOS开发虽在我计划之内,但不再短期计划里,我的理想规划是先玩转了前端,再转战后台,接着了解Linux和运维,最后才会考虑IOS开发,职场巅峰时期目标规划:玩转后台、前端、移动端(window phone需要看市场),以后各方面的学习都会写blog成文纪录知识要点,学习内容主要来自书籍、慕课网、极客学院、麦子学院
先看看HTML的大概结构图
便签的含义稍后会有介绍,做前端开发必须会HTML、CSS和JavaScript(对接java后台开发而言),关于这三样技能在慕课网是这样描述的:
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如,标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如:鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻(新闻图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的。
标签由英文尖括号 < 和 > 括起来,如 < html > 就是一个标签。html中的标签一般都是成对出现的,分开始标签和结束标签。结束标签比开始标签多了一个 / .先来简单的认识几个标签: <h1 > 表示标题标签, < p > 表示段落标签, < img > 图片标签.....................................................................HTML标签不区分大小写,可嵌套。HTML文件是有自己固定的结构的。 < html > <head > ... < /head>
<body>...</body > </html>
.......................................................................
1. <html></html > 称为根标签,所有的网页标签都在 < html > </html>中。
2. <head> 标签用于定义文档的头部,它是所有头部元素的容器。头部元素有
<title>、<script>、 <style>、<link>、 <meta>等标签。
3. 在<body>和</body > 标签之间的内容是网页的主要内容,如 < h1 > 、 < p > 、 < a > 、 < img > 等网页内容标签在这里的标签中的内容会在浏览器中显示出来。
下面这些标签可用在 head 部分:
<head>
<title>
...
</title>
<meta>
<link>
<style>
...
</style>
<script>
...
</script>
</head>
...........................................
<title>
和
</title>
标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。 网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,
迅速的判断出网页的主题。每个网页的内容都是不同的,每个网页都应该有一个独一无二的title。
代码注释语法(与Android开发的xml文件的注释一样)
<!--注释文字 -->
语义化:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中,在文章中有想强调的文本,就可以使用 em 标签表示强调等等。语义化可以给我们带来的好处:
更容易被搜索引擎收录。
更容易让屏幕阅读器读出网页内容。
还记得上面提到过的标签可以嵌套么?老规矩看图说话
title标签定义了html文件的显示名称,body标签内嵌套了标题标签和段落标签等,此处em标签用于强调文本。strong标签也表示强调文本。
标题标签的样式都会加粗,h1标签字号最大,h2标签字号相对h1要小,以此类推h6标签的字号最小。
span标签是没有语义的,它的作用就是为了设置单独的样式用的。显示一个span的标签实例效果
q标签引用别人的话,浏览器会自动识别为这段话添加上“ ”,q标签的真正关键点不是它的默认样式双引号(如果这样我们不如自己在键盘上输入双引号就行了),而是它的语义:引用别人的话。引用一句话就用到q标签。但是如想引用文本比较长,使用blockquote标签。浏览器对blockquote标签的解析是缩进样式.
<br />
标签作用相当于word文档中的回车。这里的写法不再是一对开始标签-结束标签。 xhtml1.0写法:
<br />
html4.01写法:
<br>
................................ 当我们要想输入空格,直接敲空格是没有用的,必须写入 。
加一些用于分隔的横线可以使用hr标签,hr标签和br标签一样也是一个空标签,所以只有一个开始标签,没有结束标签。语法与br标签一样
一般网页中会有一些网站的联系地址信息需要在网页中展示出来,这些联系地址信息如公司的地址就可以address标签。也可以定义一个地址(比如电子邮件地址)、签名或者文档的作者身份。语法
<address>
地址
</address>
在网页上也可以显示我们编程的代码块,当代码为一行代码时,你就可以使用code标签,如果多行可以使用pre标签,代码中的空格,换行符都会保留下来,如果你多行还想用code标签,需要自己添加br标签换行以及一些样式定义,下面是一个实例
在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表、图片列表,如下图所示
列表分为无序列表(ul、li标签)和有序列表(ol、li标签)对应标签和效果图如下
<ul>
<li>
精彩少年
</li>
<li>
美丽突然出现
</li>
<li>
触动心灵的旋律
</li>
<li>
精彩少年
</li>
<li>
美丽突然出现
</li>
<li>
触动心灵的旋律
</li>
</ul>
<ol>
<li>
我的第一个列表信息。
</li>
<li>
我的第一个列表信息。
</li>
</ol>
触动心灵的旋律
美丽突然出现
精彩少年
触动心灵的旋律
美丽突然出现
精彩少年
我的第一个列表信息。
我的第一个列表信息。
在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个div标签中,这个div标签的作用就相当于一个容器,前面代码示例有用到。什么时候能用到div标签呢?如网页中的独立的栏目版块。用id属性来为div提供唯一的名称,后面学习css会用到,到时再细谈。
1、 < table > … < /table>:整个表格以<table>标记开始、</table > 标记结束。2、 < tbody > … < /tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示。
3、<tr>…</tr > :表格的一行,所以有几对tr表格就有几行。4、 < td > … < /td>:表格的一个单元格,一行中包含几对<td>...</td > ,说明一行中就有几列。5、 < th > … < /th>:表格的头部的一个单元格,表格表头。
6、表格中列的个数,取决于一行中数据单元格的个数。/
下面是表格的代码示例和效果图,然而并没有想象那么完美,进一步优化需要用到css来配合美化啦
下面将使用高大上的css为表格镀金,让表格具有边框(Table默认没有边框的)
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
caption标签,为表格添加标题和摘要。摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好的帮助特殊用户读取表格内容,语法
<table summary="表格简介文本">
标题用以描述表格内容,标题的显示位置:表格上方。下面是语法实践
<table summary="">
<caption>
标题文本
</caption>
<tr>
<td>
…
</td>
<td>
…
</td>
…
</tr>
…
</table>
使用a标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。
下面是慕课讲师准备email使用相关详解,我很无耻的盗图了(本篇blog知识基本源自慕课网),图片由于压缩可能看不太清楚还是那句老话,缩放页面或者打开新页面浏览。
在网页的制作中为使网页炫丽美观,肯定是缺少不了图片,可以使用img标签来插入图片。语法: < img src = "图片地址"alt = "下载失败时的替换文本"title = "提示文本" > 举例: < img src = "myimage.gif"alt = "My Image"title = "My Image" / >讲解:1、src:标识图像的位置;2、alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;3、title:提供在图像可见时对图像的描述 (鼠标滑过图片时显示的文本);4、图像可以是GIF,PNG,JPEG格式的图像文件。与浏览者交互,表单标签HTML表单 (form)。表单是可以把浏览者输入的数据传送到服务器端,这样服务器端程序就可以处理表单传过来的数据。语法: < form method = "传送方式:get post"action = "服务器文件" > 1. < form > : < form > 标签是成对出现的,以 < form > 开始,以 < /form>结束。
2.action :浏览者输入的数据被传送到的地方,比如一个java页面(login.java)。
3.method : 数据传送的方式(get/post)。 < form method = "post"action = "login.java" > <label
for = "username" > 用户名: </label>
<input type="text" name="username" / > <label
for = "pass" > 密码: </label>
<input type="password" name="pass" / > </form>
注意:
1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form > 标签之间(否则用户输入的信息可提交不到服务器上哦!)。2、method: post / get的区别:post的数据以密文的形式提交,不可见,get是通过拼接的方式组装到url可见参数,为了安全很多请求都用post.当用户要在表单中键入字母、数字等内容时,就会用到文本输入框。文本框也可以转化为密码输入框。这就和Android开发的layout布局文件使用的EditText控件类似了。
语法: < form > <input type = "text/password"name = "名称"value = "文本" / ></form>
1、type:
当type="text"时,输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name:为文本框命名,以备后台程序使用。
3、value:为文本输入框设置默认值。(一般起到提示作用)
举例:
<form>
姓名:
<input type="text" name="myName">
<br/ > 密码: < input type = "password"name = "pass" > </form>
当用户需要在表单中输入大段文字时,需要用到文本输入域。
语法:
<textarea rows="行数" cols="列数">文本</textarea > 1、 < textarea > 标签是成对出现的,以 < textarea > 开始,以 < /textarea>结束。
2、cols :多行输入域的列数。
3、rows :多行输入域的行数。
4、在<textarea></textarea > 标签之间可以输入默认值。举例: < form method = "post"action = "save.php" > <label > 联系我们 < /label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea > </form>
这里的默认输入值很让人蛋碎,不想Android开发直接hint属性输入内容了hint内容就没了,在html这里面还需要css样式配合才行。细心的你一定会发现textarea一般在评论回复会用到,正对it领域的blog回复直接用textarea是不行的,回复设计到文字代码块小图标等,具体怎么做待以后学到了再来细解。
在使用表单设计调查表时,为了减少用户的操作,使用选择框是一个好主意,html中有两种选择框,即单选框和复选框,两者的区别是单选框中的选项用户只能选择一项,而复选框中用户可以任意选择多项,甚至全选。这就类似于Android的Checkbox、RadioButton类似的控件
语法:
<input type="radio/checkbox " value="值" name="名称" checked="checked "/>
1、type:
当 type="radio " 时,控件为单选框
当 type="checkbox " 时,控件为复选框
2、value:提交数据到服务器的值(后台程序使用)
3、name:为控件命名,以备后台程序使用
4、checked:当设置 checked="checked " 时,该选项被默认选中
下拉列表在网页中也常会用到,也就是Android开发中的Spinner控件,可以默认下拉选项选中项。
讲解:
1、<option value="看书">看书</option>
value用于提交到服务器,标签间的值用于显示
2、selected="true / false ":
设置selected="selected "属性,则该选项就被默认选中。
下面是一个简单的实例和运行结果
下拉列表也可以进行多选操作,在<select>标签中设置multiple="multiple "属性,就可以实现多选功能,在 widows 操作系统下,进行多选时按下Ctrl键同时进行单击(在 Mac下使用 Command +单击),可以选择多个选项。如下代码:
在表单中有两种按钮可以使用,分别为:提交按钮、重置。上面已有实例用到了提交重置按钮,提交按钮:当用户需要提交表单信息到服务器时,需要用到提交按钮。
语法:
<input type="submit " value="提交">
type:只有当type值设置为submit时,按钮才有提交作用
value:按钮上显示的文字
举例:
<form method="post " action="save.php ">
<label for="myName ">姓名:</label>
<input type="text " value="" name="myName " />
<input type="submit " value="提交" name="submitBtn " />
</form>
当用户需要重置表单信息到初始时的状态时,比如用户输入“用户名”后,发现书写有误,可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为”reset”就可以。
语法:
<input type="reset " value="重置">
type:只有当type值设置为reset时,按钮才有重置作用
value:按钮上显示的文字
label标签不会向用户呈现任何特殊效果,它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本,就会触发此控件。就是说,当用户单击选中该label标签时,浏览器就会自动将焦点转到和标签相关的表单控件上(就自动选中和该label标签相关连的表单控件上)。
语法:
<label for="控件id名称">
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
例子:
<form>
<label for="male ">男</label>
<input type="radio " name="gender " id="male " />
<br />
<label for="female ">女</label>
<input type="radio " name="gender " id="female " />
<label for="email ">输入你的邮箱地址</label>
<input type="email " id="email " placeholder="Enter email ">
</form>
建议有兴趣的朋友看完之后慕课网对照学习一下,可以在线编辑html和预览效果
下篇CSS…"
来源: