转自:http://www.uisdc.com/html-and-css-guide

整体简介

在开始学习HTML&CSS之前,首先要搞清楚两者的区别。两者在整体上有着很明显的差异。

整体看来,HTML是超文本标记语言,是用来构建框架的。

而CSS值得是层叠样式表,统一控制HTML网页的外观属性。

(而JavaScript是行为)

HTML语言的基本

标签、属性、元素是在掌握之前必须要了解的几点基础。

元素
元素是用来定义页面、内容、结构的一种标识符。一些流行的元素包括h1-h6,p,div,a,span,strong以及em.

案例:

< a >

标签
标签主要有两种形式,开始标签和结束标签(也称为开放标签和闭合标签)。

HTML 元素以开始标签起始
HTML 元素以结束标签终止

案例:

<a>……</a>

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:<a href=”http://www.w3school.com.cn”>This is a link</a>

<p>…..</p>

HTML 段落是通过 <p> 标签进行定义的。<p>This is a paragraph.</p>

属性
属性指的是赋予元素的附加信息。大多数情况下,属性将标题、类、ID分配格元素,用来描述媒体元素的来源,并可作为超链接的参考。

案例:

<a href = “http:///www.example.com/”>Example</a>

HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定:

CSS语言的基本

除了HTML,你还要了解CSS,这是你第二件必备武器。下面这个案例展示了CSS的几个基本

案例:

在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构:

选择器
选择器能够为确定元素加入指定样式,包括ID、类、标签选择器等等。

属性
属性定义了为元素加入样式的种类,诸如颜色、字体大小等等。(冒号之前)


样式种类的具体数值。(冒号和分号之间)

框模型和定位

另外需要了解的便是框模型。CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距边框 和 外边距 的方式。

关键便是margin和padding属性, 而正确理解这两个属性也是学习用css布局的关键。

CSS框模型
border(边框)

margin(外边距)

padding(内边距)

width(宽度)

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

框模型包括以上几种,可调整大小,框模型便能以这种方式影响内容传递的方式。

HTML框模型
元素的高度和宽度可自行设定,然而整体内容的高度和宽度受内边距以及边框影响。

案例:

div {

background: #fff;

border: 6px solid #ccc;

height: 100 px;

margin: 20 px;

padding: 20px;

width: 400px;

}

添加图像、音频、视频

文本与多媒体结合能达到更好的传递效果。

添加图像
图中内含的文本部分便能实现添加图像功能,

不可忽视的两个属性:

src属性:src 属性可设置或返回应当被载入框架中的文档的 URL。

alt属性:alt 属性是一个必需的属性,它规定在图像无法显示时的替代文本。

实例:

<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

亲自试一试

如果无法显示图像,浏览器将显示替代文本,就像这样:

此外,当用户把鼠标移到图像上方,最新的浏览器会在一个文本框中显示描述性文本。下面的代码在 alt 属性中为图像添加了描述性文本:

您可以把鼠标移动到下面的照片上,看看相应的效果:

红圈中的文本框是用户把鼠标移动到图像上时,IE7 浏览器所显示的效果:

添加音频
HTML5提供了一种简易的方式添加音频和视频文件。跟img元素一样,音频元素也需要src属性来提供URL来源

添加视频
跟添加音频同理,只不过用视频元素来取代音频元素。

希望这份入门指导能让你对HTML&CSS产生兴趣,同时教会你HTML&CSS的基本,其实它们学起来很简单。

2.写给设计师看的HTML&CSS入门指导的更多相关文章

  1. 前端编程提高之旅(五)----写给大家看的css书

       自实习也有几个月的时间了,以爱奇艺实习为敲门砖.进入了眼下这家公司.假设说当初能进爱奇艺是暂时袭击DIV+CSS的话,眼下在这家公司体验到.不论什么技术都必须悉知原理,这样才干做到庖丁解牛.做一 ...

  2. 《写给大家看的设计书(第3版)》【PDF】下载

    <写给大家看的设计书(第3版)>[PDF]下载链接: https://u253469.ctfile.com/fs/253469-231196355 内容简介 <写给大家看的设计书&g ...

  3. 写给自己的web总结——css篇(1)

    上一篇写了关于html的知识,算是小试牛刀,这次来尝试写一下css. 初步了解css css的全称为cascading style sheet-- 层叠样式表,通过编入代码来对html里的标签做出各种 ...

  4. 胖虎都看得懂的CSS入门

    CSS入门 CSS是什么 摘自维基百科 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...

  5. 《写给大忙人看的java se 8》笔记

    现在才来了解java8,是不是后知后觉了点? 新的编程技术,个人不喜欢第一时间跟进. 待社区已有实践积淀再切入似乎更划算些? 一点点精明的考虑. 不多说,上代码. //读<写给大忙人看的java ...

  6. 【读书笔记】《写给大忙人看的Java SE 8》——Java8新特性总结

    虽然看过一些Java 8新特性的资料,但是平时很少用到,时间长了就忘了,正好借着Java 9的发布,来总结下一些Java 8中的新特性. 接口中的默认方法和静态方法 先考虑一个问题,如何向Java中的 ...

  7. 劣质代码评析——《写给大家看的C语言书(第2版)》附录B之21点程序(八)

    [重构](续) 牌的表示: 一副牌有52张,可用一整数数组描述.但是由于在游戏过程中牌数在不断减少,所以用一表示剩余张数的整数和一整数数组共同描述.C99支持一种变量长度数组,但用在这里并没有什么特别 ...

  8. 《写给大忙人看的Java核心技术》 勘误

    先附上十分讨喜的封面.这应该是爱丽丝梦游仙境里的那只兔子吧? 勘误表基于原版勘误表制作 链接 截止日期 2017-02-09 对应<写给大忙人看的Java核心技术>2016年1月第1次印刷 ...

  9. 匈牙利&&EK算法(写给自己看)

    (写给自己看)匈牙利算法(最大匹配)和KM算法(最佳匹配) 匈牙利算法 思想 不断寻找增广路,每次寻得增广路,交换匹配边和非匹配边,则匹配点数+1 这里增广路含义:交错路,即从未匹配点出发经过未匹配边 ...

随机推荐

  1. MySql免安装版绿化版安装配置,附MySQL服务无法启动解决方案

    整理于:https://www.cnblogs.com/cenwei/p/6249856.html      我下载的MySQL版本是:mysql-5.6.15-winx64 一.解压文件 下载好My ...

  2. 访问API的方式为:localhost/api/customers, 创建自定义JSON格式化器

    注意的是,访问API的方式为:localhost/api/customers,在实际中将要根据情况替换合适的端口,默认所有的WEB API都是通过/api根目录的方式访问的 创建自定义JSON格式化器 ...

  3. startActivityForResult and onActivityResult

    startActivityForResult and onActivityResult startActivityForResult 开启Activity 组织数据之后 发送,onActivityRe ...

  4. LoadRunner使用教程

    1.了解Loadrunner 1.1 LoadRunner 组件有哪些? LoadRunner 包含下列组件: ➤ 虚拟用户生成器用于捕获最终用户业务流程和创建自动性能测试脚本(也称为虚拟用户脚本). ...

  5. python调用Java代码,完毕JBPM工作流application

    1.缘由 有一庞大Python django webproject,要引入工作流引擎,像OA一样.方便的流程控制与管理.Python或django关于工作流的开源插件,稀少,并且弱爆了,终于选用jav ...

  6. nagios,zabbix对照

    nagios/zabbix对照: nagios核心功能是监控报警.是一个轻量化的监控系统. 假设须要图标显示,须要添加图标显示插件(如pnp4nagios): 假设须要存入数据库,须要对应的插件(ND ...

  7. 常用的130个vim命令

    最近VIM用的也越来越多了...因为确实在慢慢的把win下的编辑习惯转成unix下的编辑习惯..._vimrc也在不断的完善中先贴一下平时在VIM中使用中的命令...有很多也是我没有掌握的 (估计也是 ...

  8. 数据库事务及其EF中如何处理事务

    一.基础知识 1)         使用事务级别ReadUnCommited 会产生脏读现像,意味着读取到的为UnCommited(未提交)的数据.怎么理解呢?在使用该隔离级别的事务开始后.更新了数据 ...

  9. 【Python学习】爬虫报错处理bs4.FeatureNotFound

    [BUG回顾] 在学习Python爬虫时,运Pycharm中的文件出现了这样的报错: bs4.FeatureNotFound: Couldn’t find a tree builder with th ...

  10. Selenium爬取淘宝商品概要入mongodb

    准备: 1.安装Selenium:终端输入 pip install selenium 2.安装下载Chromedriver:解压后放在…\Google\Chrome\Application\:如果是M ...