Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习。
示例代码:https://github.com/wanliwang/Bjork.Demo htmlDemo
最近胡乱删除坑了自己一把吗,永远记得windows的卸载一定要用:Windows Install Clean Up Setup,安装要用KMSpico Install
文本块
对于HTML中的块级元素来说,可以通过text-align:xxx对齐其中文本(<section>,<article>,<p>,<h1等>)。
列表
包含三类列表:无序列表<ul>,列表项为<li>;有序列表<ol>,列表项为<li>和定义列表<dl>,列表项包括,<dt>定义术语,<dd>定义术语的解释。此外,可以通过list-style-type来设置列表的数字类型或项目符号类型图标,前者包括decimal,lower-roman,upper-roman,lower-alpha,upper-alpha和none,后者包括disc,circle,square和none。
字体
在HTML中,可以更改字体的视觉显示,包括字体系列、大小和粗细,以及如何把粗体字、斜体字、上标、下标和加删除线的文本纳入到页面中。常见的特殊字符在HTML中的编码如下所示:"引号,&与符号,<小号,>大于号,©版权,®注册商标。为了满足社交理解需要,需要使用粗体blodface和斜体italic,可以使用样式font-style:italic,font-weight:bold进行设置。与此先关的变迁包括:<sup>上标文本,<sub>下标文本,<em>强调的斜体文本,<strong>强调的粗体文本,<pre>预先格式化的文本,保留空格和换行符,非常赞。字体的调整可以通过,font-family设置字体系列,font-size设置字体大小,color设置字体颜色。
此外,还可以@font-face来使用Web字体,即本地系统没有安装的字体,通常可以到https://fonts.google.com/查找,相关例子如下所示。
@font-face { font-family: 'xionger'; src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf');}
边框--圆角设置:border-radius: 20px, 等价于border-top-left-radius:20px; border-top-right-radius:20px; border-bottom-left-radius:20px; border- bottom -left-radius:20px;这个属性在IE6中不支持。
Tip:在代码中经常可以看到<a href="javascript:void(0)">的情况,其目的是点击后不回到页面头,并且不进行默认的事件操作。
表格和栏
表格由信息行组成,其中包含单独的单元格,其相关的标签包括:<table>、<thread>、<tbody>、<tfoot>、<tr>、<th>、<td>等。由于不同浏览器默认的样式不同,因此需要自定义设置表格边框的样式,如下所示。可以通过将border-collapse属性设置为collapse来折叠边框,设置为separate独立边框。表格的宽度可以使用width,此外还可以通过CSS伪类选择器来根据不同行或列来设置样式。更多的CSS选择器,可以查看http://www.w3school.com.cn/cssref/css_selectors.asp。
table, tr, th, td { border: 1px solid black; border-collapse: collapse; padding: 3px; } th:first-child,td:first-child { width: 200px; } th:not(first-child), td:not(first-child) { width: 40px; }
在表格内,可以通过text-align和vertical-align样式属性水平和垂直的对其表格单元格的内容,其中vertical-align的常见值有top、middle、bottom、text-top、text-bottom和baseline等。使用rowspan和colspan来合并单元格,使用background-image和background-color来设置背景,使用border-spacing来设置边框的水平和垂直留白的大小。
对于传统媒体来说,通常使用分栏显示来使读者获得较好的阅读感受,这个概念和bootstrap的12栅格设计思路一致,可以通过如下代码达到该效果,注意浏览器的兼容性。
article { -webkit-column-count: 3; -webkit-column-gap: 21px; -webkit-column-rule-width: 1px; -webkit-column-rule-style: solid; -webkit-column-rule-color: #000; -moz-column-count: 3; -moz-column-gap: 21px; -moz-column-rule-width: 1px; -moz-column-rule-style: solid; -moz-column-rule-color: #000; column-count: 3; column-gap: 21px; column-rule-width: 1px; column-rule-style: solid; column-rule-color: #000; }
多媒体
在HTML页面中,插入多媒体文件方式包括:链接到多媒体文件,嵌入和到多媒体文件和HTML5中提供的video,audio标签的方式,推荐使用HTML标签的方式,由于相关内容已经在之前的学习中介绍过,这儿只选取HTML5标签方式进行介绍,其他内容请见链接javascript学习下的扩展知识部分。
标签元素/属性 |
诠释 |
<audio>, <video> |
|
src="mediaurl" |
给出要嵌入的文件的URL |
preload="preloadtype" |
指示是否预加载媒体文件,选项有none,auto和metadata |
controls |
指示浏览器显示音频/视频播放器控件 |
autoplay |
指示完成加载时是否自动播放 |
loop |
指示浏览器播放文件, 直到明确停止它 |
此外,在使用多媒体时,需要注意以下几点:不要在页面直接包含多媒体,且不要设置为自动播放,让客户来选择是否播放;在提供多媒体文件下载时,最好允许用户选择文件类型;利用免费的视频,图片托管系统,可以大大减少成本。
常见的图片处理软件包括高大上的photoshop和免费的GIMP等,此外,Google的Picasa(好像下线了)和Pixlr都是不错的选择,这部分内容将选用GIMP。
图像的分辨率是构成图像的单个点或像素的数量(通常为72点/英寸或72dpi),与较小的低分辨率图像相比,较大的高分辨率图像一般要花较长的时间进行传输和显示。分辨率并不是决定图片文件存储尺寸的最重要因素,这是由于Web页面上的图像都是以压缩的形式存储和传输的,图像压缩是对图像进行数学处理,以挤压出重复的模式。此外,图像的分辨率除了像素外,还包括空间、光谱、时间和辐射等。
对于web图形来说,最常见的如下4种:人、产品和地理位置的照片;图形横幅和标志;用于指示动作和提供链接的按钮和图标;用于容器元素的背景纹理。
在GIMP中,通常可以使用如下操作来完善图片,包括剪裁图像、调整图像大小、调整图像颜色(包括平滑和去红眼等),控制JPEG压缩(通过导出)、创建横幅和按钮以及减少或删除图像中颜色、创建动画式Web图像。需要注意的是,在创建横幅时,通常会使用800*600,1024*768等标准格式,以适应大部分用户,可以使用GIF这种颜色数量有限的图像格式来保存简单的的图像(例如横幅,而不是人物图片),同时PNG也是很好的一种形式,用于保存多种透明度的图片。在GIMP中,还可以通过在一幅图像内创建多个图层,然后保存为Animated GIF的形式来生成动态的GIF图片。
图片的使用非常简单,如<img src='test.gif' alt='测试图片' width='200px' height='100px'>,需要注意的是,在实际使用中,推荐使用图床,包括imgur、flickr等,国内的暂时还没弄清那些比较靠谱(可以使用百度云等)。水平的图片对齐使用float:left/right,而垂直对齐使用vertical-align:text-top/bottom/middle/baseline等。使用背景图像可以使用如下属性:background-color指定元素的背景色,background-image:url(xxx)指定背景图片,background-repeat来设置重复(repeat,repeat-x,repeat-y,no-repeat),background-position指定图像相对于它容器的位置(top-left,center-left,bottom-right等)。
在有些场景下,需要使用图像映射来达到目标需求,比如使用图像来作为迪斯尼的地图系统,点击指定区域会弹出相关的介绍的场景。在创建任何类型的图像映射时,首先需要弄清楚图像内想要转为成可单击链接的每个区域的数字像素坐标,你可以借助工具mapedit进行图片映射(提供HTML代码),也可以自己手工设置,一个简单的例子如下所示。
<head> <meta charset="utf-8"> <title>图片应用</title> <style type="text/css"> div.imageleft { float: left; clear: all; text-align: center; font-size: 10px; font-style: italic; } body{ background: #ffffff url("..\\public\\images\\mn002.jpg") no-repeat top right; } </style> </head> <body> <div class="imageleft"> <a href="http://www.ctrip.com"> <img src='..\public\images\mn001.jpg' alt='测试图片'></a> </div> <section> <header>测试地图映射</header> <div style="text-align:center">点选地区获取更多信息 <br/> <img src="..\public\images\timezonemap.png" usemap="#timezonemap" style="border:none; width:977px;height:498px " alt="世界时区地图"></div> <map name="timezonemap"> <area shape="poly" coords="233,0,233,20,225,22,225,101,216,121,212,154,212,167,212,181,222,195,220,209,226,214,226,234,232,252,224,253" href="http://en.wikipedia.org/wiki/eastern_time_zone" alt="Eastern" title="Eastern"> <area shape="rect" coords="1,73,74,163" href="http://en.wikipedia.org/wiki/Alaska" alt="Alaska" title="Alaska"> </map> </section> </body>
Tip:红眼,red—eye phenomenon,用频闪光,在室内或夜间对人物进行彩色摄影时,瞳孔被拍成红色的现象。"红眼"现象的产生是由于闪光灯的闪光轴与镜头的光轴距离过近,在外界光线很暗的条件下人的瞳孔会相应变大,当闪光灯的闪光透过瞳孔照在眼底时,密密麻麻的微细血管在灯光照应下显现出鲜艳的红色所反射回来,在眼睛上形象"红点"的自然现象,就是"红眼"。
颜色
这部分内容比较多,因为涉及简单的颜色搭配和选择,提高一下艺术素养,也是必须的哦。通常来说,颜色选择的最佳实践如下所示:
使用自然的调色板,这并不以为着使用土色调,而是要使用在生活中(如逛街)自然看到的颜色,而不是会导致眼睛受损的超亮颜色。
使用较小的调色板,不需要使用15种不同的颜色,通常只需要3,4种主色,和几个补色即可。
考虑访问者的统计数据,通过统计数据,了解目标群体,比如年轻人、老年人、女性等。
Web设计中常见的配色方案为:
类似色,使用色轮上彼此相邻的颜色,比如黄色和绿色,其中一种是主色,其相邻的颜色可以丰富显示效果。
补色,使用色轮上彼此相对的颜色,比如暖色(红色)和冷色(绿色)。
三色,使用色轮上间隔相等的三种颜色,可以提供平衡感。
在CSS中,通常的颜色包括如下17种:浅绿色、黑色、蓝色、紫红色、灰色、绿色、石灰色、茶色、深蓝色、橄榄色、橙色、紫色、红色、银色、凫蓝色、白色和黄色。英文表述的有,azure,bisque,cornflowerblue,darksalmon.firebrick,honeydew,lemonchiffon,papayawhip,peachpuff,saddlebrown,thistle,tomato,wheat,whitesmoke。十六进制代码可以产生1600万种可能的颜色,即RGB(255,255,255),其颜色格式#rrggbb,其中ff表示完全亮度,cc表示80%亮度,99表示60%亮度,66表示40%亮度,33表示20%亮度,00表示不包含该颜色成分。
参考资料:
- 版) [M]. 北京:人民邮电出版社, 2014.
Html与CSS快速入门02-HTML基础应用的更多相关文章
- Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...
- 快速入门系列--WebAPI--01基础
ASP.NET MVC和WebAPI已经是.NET Web部分的主流,刚开始时两个公用同一个管道,之后为了更加的轻量化(WebAPI是对WCF Restful的轻量化),WebAPI使用了新的管道,因 ...
- [转]快速入门系列--WebAPI--01基础
本文转自:http://www.cnblogs.com/wanliwang01/p/aspnet_webapi_base01.html ASP.NET MVC和WebAPI已经是.NET Web部分的 ...
- C#快速入门笔记(1)——基础语法
C#快速入门笔记(1)——基础语法 总体框架:
- CSS快速入门(四)
目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...
- CSS+DIV入门第一天基础视频 CSS选择器层叠性和继承性
大家好,我是小强老师, 现在网上的CSS+DIV视频,要么讲的太深,要么太浅,很多初学的同学们总是遇到困难,今天小强老师专门给大家准备了css课程的视频.带你从零基础学习CSS+DIV一直到能独立完成 ...
- HTML/CSS快速入门
Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...
随机推荐
- Excel公式设置单元格颜色
Excel2010 “条件格式"-"新建规则"-"使用公式确定要设置格式的单元格" 公式如下: =OR(H2<=-20%,H2>=20%, ...
- ORA-12705问题解决过程
最近开发C#加ORACLE的程序,就有一台电脑连接的时候报错误 ORA-12705: Cannot access NLS data files or invalid environment speci ...
- 运维自动化工具---Puppet
案例环境:-----------------------------------------------------------------主机 操作系统 IP地址 主要软件--------- ...
- leetcode sort List
Sort a linked list in O(n log n) time using constant space complexity. /** * Definition for singly-l ...
- LINQ LINQ Operators and Lambda Expression - Syntax & Examples
LINQ is a cool feature in C# 3.0. Most of the developers are struggling for the syntax and examples. ...
- TypeScript之基本数据类型
前言 最近项目很急,所以没有什么时间回答关于Xamarin.Android方面的问题,也有一段时间没有更新.主要是手头很缺人,如果有谁有兴趣加入我们的话,可以私聊我,这样我就能继续造福社区了,同时还有 ...
- 关于最近的CSRF攻击
摘要 最近公司内部爆出一大波页面没有加token校验,然后各路大神就开始进行CSRF攻击了.CSRF攻击:攻击者盗用了你的身份,以你的名义发送恶意请求.CSRF能够做的事情包括:以你名义发送邮件,发消 ...
- 关于CAP定理的个人理解
CAP定理简介 在理论计算机科学中,CAP定理(CAP theorem),又被称作布鲁尔定理(Brewer's theorem),它指出对于一个分布式计算系统来说,不可能同时满足以下三点: 一致性(C ...
- 两种include方式及filter中的dispatcher解析
两种include方式 我自己写了一个original.jsp,另外有一个includedPage.jsp,我想在original.jsp中把includedPage.jsp引进来有两种方式: 1.& ...
- Mockito自定义verify参数Matcher
在TDD开发中,也许我们会遇见对一些重要的无返回值的行为测试,比如在用户的积分DB中增加用户的积分,这个行为对于我们的业务具有重要的价值,所以我们也希望能测试覆盖这部分业务价值.这个时候我们就得使用m ...