前端学习Html篇(一)
2016-07-29 12:04
225 查看
Idea的独白
做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的大概结构图便签的含义稍后会有介绍,做前端开发必须会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标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签。
语法: <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> 例如: <a href="http://www.imooc.com" title="点击进入慕课网">click here!</a> <a>标签在默认情况下,链接的网页是在当前浏览器窗口中打开,有时我们需要在新的浏览器窗口中打开。 如下代码: <a href="目标网址" target="_blank">click here!</a> <a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件 <a href="mailto:xxx@xxx.xx">click</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…
相关文章推荐
- 前端学习笔录--1--HTML篇
- 前端学习笔录--2--HTML篇--有点麻烦的加载图片
- 前端开发者应该关注的JavaScript学习资源
- 一起学习前端开发技术
- 转一篇前端开发人员总结的《JavaScript 学习资源推荐》
- D2前端技术论坛之网页无障碍学习笔记
- 前端开发学习三——Javascript基础,变量提升(hosting)
- 前端学习-好的学习网站
- 从下周一开始学习网页前端设计方面的知识
- 前端学习,找到一下一些问题的答案
- 前端开发者应该关注的JavaScript学习资源
- 计划学习的前端效果列表
- 前端CSS学习笔记
- 前端学习书籍推荐
- Cognos学习之五:前端与服务器参数传递
- 个人学习笔记:WordPress 管理界面前端技术
- 前端学习,优化,安全
- 一些不能订阅的前端学习资源
- 8个前端技术学习网站
- 前端开发者应该关注的JavaScript学习资源