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基础应用

最新文章

热门文章