html标签、元素、属性、样式

源码下载
在线测试显示效果

  通过上一节课学习，大家对html应该有了基本的概念，本节课仍然是通过一个案例给大家引入标签、元素、属性、样式等概念。 对于学习能力强的人而言，一个命令一个命令去学习，非常枯燥无聊，不能体会系统构建、自上而下学习的快乐。下面的案例在上一节的基础上添加了 图片，进一步加深对标签和元素的概念，同时进行了页面视觉效果设计，如果从事过软件开发应该对GUI有概念。 

1    <!DOCTYPE html>
2    <html lang="en">
3    <head>
4        <meta charset="UTF-8">
5        <title>尝试制作一个简单的页面</title>
6    </head>
7    <body>
8    <div style="width: 260px;margin: 100px auto;background:#00B7FF;padding: 20px">
9        <h1 style="width: 140px;margin: 0px auto">过零丁洋</h1>
10       <p>
11           辛苦遭逢起一经，干戈寥落四周星。
12           <br>
13           山河破碎风飘絮，身世浮沉雨打萍。
14           <br>
15           惶恐滩头说惶恐，零丁洋里叹零丁。
16           <br>
17           人生自古谁无死，留取丹心照汗青。
18       </p>
19       <img src="http://www.yanhuangxueyuan.com/HTML5/icon/wen.jpg" alt="文天祥" width="255px" height="400px">
20   </div>
21   </body>
22   </html>

    页面设计过程解析

  1. 插入文天祥的图片

    查看代码第19行
      前面将讲过其它的标签，这一节课再讲解一个有加载图像功能的img标签，html标准的制定尽可能丰富，封装底层的编程，即使没有学过编程的人，也能设计网页， ，这些标签也是技术和艺术沟通的桥梁。img标签支持png、jpg等位图格式，也支持svg矢量图格式。引入图片的方法就是你要先有一张图片，平时编程时图片一般放到本地， src的属性值直接写图片所在的地址即可，如果在同一个文件夹下，直接写图片名字加图片扩展名即可，本代码案例你可以看到它的属性值写的是一个域名加一个地址，也就是说我把图片 部署在了我的博客网站服务器上，当然你可加载远程服务器任意位置的一张图片，只要你有图片地址，如果你熟悉计算机通信URL的概念，不用解释也可以明白，如果你不了解网络通信技术， 只要你从事的是艺术工作，不太理解URL也没关系。alt、width、height都是img元素的属性，都有相应的意义。

    标签、元素、属性概念

      第一个HTML案例中给大家提到了标签和元素的概念问题，但是没有深入讲解。

      如果你没有编程基础，那就把HTML当成word去学习，不要问那么多为什么，标签就是代表 一个功能的符号，你只管写就行，标签和里面的内容就是元素，同时给元素引入了属性，比如img标签构建的元素，具有src属性，src的属性值就是图片所在的地址，alt属性的功能就是 一个鼠标事件，当鼠标移动到图片上时，界面显示提示文字，提示的文字就是alt里面的文字字符。

      如果你有编程基础，还这样模糊不清，那就无形中给自己增加了学习成本。当浏览器解释HTML里面的代码时，读取到img标签，就会在内存上开辟一个区域存储相关的 数据，形成一个img对象，具体是什么，如果了解计算机图形学，可以去探究，没兴趣的话不用管，可以把元素类比为面向对象编程中的对象，既然img标签初始化后得到img对象， 对象自然就具有属性，有那些属性，那就查手册，看看浏览器支持哪些属性，编程可以自定义对象属性，对于html元素都是浏览器自动支持的。

    像素单位px

      大家可以看到定义图片宽高的时候，会使用一个符号px，你可以把图片的宽度属性width属性值设为1px，刷新浏览器观察效果，法线是一条细线。 如果你不太了解显示器硬件系统，你可你把显示器划分成网格状，一个网格宽高都是1px的单元，你至少买手机和电脑时总会有像素的概念，像素大小说的就是显示屏 宽高方向各有多少个像素单元。有兴趣的话去学习WebGL，了解显示器的内部显示原理，了解点距、刷新频率等概念。

    属性格式

      属性与属性值之间用等号连接，属性值用引号包裹，属性之间用空格间隔开

  2. 样式

    查看代码第8行
      代码中的style和img的alt、src一样也是属性，只不过这个属性有些特殊，第一点他是通用属性，p、img、h等元素都具有的属性， 第二点就是这个属性里面的属性值不是一个值，而是仍然有一系列的属性，比如字体动销，背景颜色，内边距等，这一列的属性构成一个属性值， 对照面向对象编程，style可以理解为元素的子对象，子对象一样也有属性值。就网页设计而言不用想太多，记住代码格式就行。 这里大家可能会问，为什么专门抽象出一个style属性，这一点主要是为了样式与内容功能分离，颜色、边框、文字大小、位置等样式外观属性统一写在style属性里面 background可以定义背景颜色，padding可以定义内边距，margin可以定义元素距离左右上下的显示位置。

    格式

      style和其它属性的格式一样，区别在于属性里面的属性格式有所区别，background、padding、margin等属性和属性值之间用冒号连接，属性值不需要添加引号， 属性之间用分号隔开。

  3. 网页布局

      顾名思义就是你定义的每一个元素的位置在哪，不知大家有没有观察，h1、p标签定义的元素，浏览器默认自动换行，排列顺序根据代码先后自上而下排列，并不是所有 标签定义的元素都是如此，块元素默认自动换行，行内元素默认不换行，行内排列，可以先不学习，以后会讲解。定义一个元素的位置方法有很多， 大家可以先了解一个style属性的margin属性，比如margin-top: 200px;就表示该元素与上一个同级元素之间的间隔是200个像素单位，margin-left: 200px;表示该元素与左侧间距 200个像素单位。

      margin: 100px auto;表示元素左右居中，与上面元素的距离是100px，现在大家思考一个问题如果我希望整首诗和配图全部居中，那就需要全部分别定义margin，太麻烦。 这个时候怎么才能整体定义？需要引入一个定义块级元素的标签div，用div开始结束标签包裹h1、p、img元素，构建一个父元素，直接定义div父元素的相关属性即可，查看第8行代码， 比如背景颜色background:#00B7FF;只需要定义父元素，其他子元素自动继承。

    格式

      style和其它属性的格式一样，区别在于属性里面的属性格式有所区别，background、padding、margin等属性和属性值之间用冒号连接，属性值不需要添加引号， 属性之间用分号隔开。

  4. 十六进制表示颜色

      有一定的数学基础应该不难理解十六进制，计算机图形学表示颜色、单片机编程表示引脚都会用十六进制表达数据。 网页显示颜色可以理解为红绿蓝RGB三种颜色混合而成，如果你不用十六进制，其实background的属性值也可以用英语单词表示，比如red、green、blue等， 红色对应的十六进制是FF0000，绿色对应的十六进制是00FF00，蓝色对应的十六进制是0000FF，两位十六进制数ff代表的就是十进制的255，比如红颜色的表示可以用00到FF 之间的任意数值表示，数值越大代表颜色越深。比如FFFF00可以混合出来黄色。事实上设计网页时，都是对照颜色表来写代码，就像做服装设计的都会把各种颜色用一个布料样块表示， 有其相关的名字，对于网页设计大家可以去搜索其它网站在线资源，查找颜色和十六进制对照表。本教程主要是叙述一些技术问题，对于艺术方面的配色，冷色、暖色之类的就不详细叙述了， 可以自行观看相关的视觉设计书籍。如果从事图形学开发的话，可以从物理学里光学的本质，生物学里人的视网膜结构去了解的光的构成、成像原理。技术和艺术就像房子与婚姻，是一件事物的两面，一个是物质基础， 一个是表现的效果。水彩笔可以进行艺术创作，HTML和CSS也可以进行艺术创作，只是有些行业的发展趋向于艺术越来越需要更多的技术作为铺垫。手绘图会削铅笔就行，HTML和CSS表达视觉效果，你要系统学习标签、样式和布局。