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中的编码如下所示:&quot;引号,&amp;与符号,&lt;小号,&gt;大于号,&copy;版权,&reg;注册商标。为了满足社交理解需要,需要使用粗体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

 1 table, tr, th, td {
 2 border: 1px solid black;
 3 border-collapse: collapse;
 4 padding: 3px;
 5 }
 6 th:first-child,td:first-child {
 7 width: 200px;
 8 }
 9 th:not(first-child), td:not(first-child) {
10 width: 40px;
11 }

在表格内,可以通过text-align和vertical-align样式属性水平和垂直的对其表格单元格的内容,其中vertical-align的常见值有top、middle、bottom、text-top、text-bottom和baseline等。使用rowspan和colspan来合并单元格,使用background-image和background-color来设置背景,使用border-spacing来设置边框的水平和垂直留白的大小。

对于传统媒体来说,通常使用分栏显示来使读者获得较好的阅读感受,这个概念和bootstrap的12栅格设计思路一致,可以通过如下代码达到该效果,注意浏览器的兼容性。

 1 article {
 2 -webkit-column-count: 3;
 3 -webkit-column-gap: 21px;
 4 -webkit-column-rule-width: 1px;
 5 -webkit-column-rule-style: solid;
 6 -webkit-column-rule-color: #000;
 7 -moz-column-count: 3;
 8 -moz-column-gap: 21px;
 9 -moz-column-rule-width: 1px;
10 -moz-column-rule-style: solid;
11 -moz-column-rule-color: #000;
12 column-count: 3;
13 column-gap: 21px;
14 column-rule-width: 1px;
15 column-rule-style: solid;
16 column-rule-color: #000;
17 }

多媒体

在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代码),也可以自己手工设置,一个简单的例子如下所示。

 1 <head>
 2 <meta charset="utf-8">
 3 <title>图片应用</title>
 4 <style type="text/css">
 5 div.imageleft {
 6 float: left;
 7 clear: all;
 8 text-align: center;
 9 font-size: 10px;
10 font-style: italic;
11 }
12 body{ background: #ffffff url("..\\public\\images\\mn002.jpg") no-repeat top right; }
13 </style>
14 </head>
15 <body>
16 <div class="imageleft">
17 <a href="http://www.ctrip.com"> <img src='..\public\images\mn001.jpg' alt='测试图片'></a>
18 </div>
19 <section>
20 <header>测试地图映射</header>
21 <div style="text-align:center">点选地区获取更多信息
22 <br/>
23 <img src="..\public\images\timezonemap.png" usemap="#timezonemap" style="border:none; width:977px;height:498px " alt="世界时区地图"></div>
24 <map name="timezonemap">
25 <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"
26 href="http://en.wikipedia.org/wiki/eastern_time_zone" alt="Eastern" title="Eastern">
27 <area shape="rect" coords="1,73,74,163" href="http://en.wikipedia.org/wiki/Alaska" alt="Alaska" title="Alaska">
28 </map>
29 </section>
30 </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表示不包含该颜色成分。

参考资料:

  1. 梅洛尼. HTML与CSS入门经典(第9版) [M]. 北京:人民邮电出版社, 2014.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【答疑释惑第十六讲】屏幕上的图片是如何显示出来的?

疑惑一 什么是点阵字库? 点阵字库主要用于简单的嵌入式设备,字体大小一旦选定,就不能变化。比如以前老式手机上的字,一旦选定点阵字库就不能再变化。点阵字库是一个二...

3236
来自专栏非著名程序员

目标:双向拖动的自定义View

国际惯例先预览后实现 ? 我们要实现的就是一个段位样式的拖动条,用来做筛选条件用的, 细心的朋友可能会发现微信设置里面有个一个通用字体的设置, 拖动然后改变字...

2346
来自专栏我分享我快乐

响应式jquery小效果实现思路

有很多同学在实现jquery效果时,不知道怎样符合响应式布局。我写了个小案例,帮大家找找思路,希望能帮到你。 效果如下: ? 代码如下: <!doct...

38911
来自专栏非著名程序员

Android中图片大小和屏幕密度的关系讲解

Android手机适配是非常让人头疼的一件事,尤其是图片,android为了做到是适配提供了很多文件夹来存放不同大小的图片,比如:drawable-ldpi、d...

2126
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:开发APP时,如何快速地实现屏幕自适应

当AutoHeight属性为“True”时,Mobile Form的Scrollable属性将失去效果,以GridView控件的下面两种情况为例(以下两种情况的...

972
来自专栏小樱的经验随笔

关于前端的photoshop初探的学习笔记

写在前边 这还是高三的时候暑假的时候学习这个软件时记的笔记呢,今天又在电脑上找到了它,总觉得不应该让他尘封在我的硬盘上,于是挂了出来。 温馨提示:比较乱,写给自...

3016
来自专栏生信宝典

一分钟绘制磷脂双分子层:AI零基础入门和基本图形绘制

Adobe illustrator是一种应用于出版、多媒体和在线图像的工业标准矢量插画的软件,是一款非常好的图片处理工具,简称AI。

1.5K3
来自专栏Coco的专栏

【BOOM】一款有趣的Javascript动画效果

1995
来自专栏前端新视界

有趣的 CSS 像素艺术

原文:fun-times-css-pixel-art 译者:nzbin 友情提示:由于国内网络的原因,CodePen可能会打不开或者非常慢,请耐心等待! ...

2277
来自专栏Android机器圈

Android之MaterialDesign应用技术2-仿支付宝上滑搜索框缓慢消失

PS:在这之前也就是上一篇介绍了MaterialDesign一些滑动删除、标题栏的悬浮效果等,如果没看过第一篇的小火鸡可以看一下,因为这篇是接着上一篇写的,有一...

40710

扫码关注云+社区

领取腾讯云代金券