Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节，经常为了调节一个简单的样式花费大量的时间。最近趁着在做前端部分的开发，果断把这部分知识成体系的恶补一下。内容相对都比较简单，很类似工具手册的学习，但目标是熟练掌握。
Html(Hypertext Markup Language超文本标记语言):1990由Tim Berners-Lee爵士设计，成为了Internet上标准的文本传输形式，可以这么说，对于在互联网行业工作的我们来说，这就是我们饭碗的基础啊，嘿嘿。
基本文档格式，请见如下示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>cheer up, xionger</title> </head> <body> <p>first course</p> <br/> <h1>hello</h1> <hr/> <h1>world</h1> </body> </html>
常见HTML标签
| 标签元素 | 诠释 |
| <html>..</html> | 封闭整个HTML文档 |
| <head>..</head> | 封闭HTML文档的头部，在<html>标签内使用 |
| <title>..</title> | 指定文档的页面标题，在<html>标签内使用 |
| <body>..</body> | 封闭HTML文档的主体，在<html>标签内使用 |
| <p>..</p> | 段落，在段落之间跳过一行 |
| <br/>和<hr/> | 换行符和水平标号 |
| <h1>..</h1><h2>..</h2> | 1,2级标题 |
| <header>..</header> | 页面或区域的顶部 |
| <footer>..</footer> | 页面或区域的脚注 |
| <nav>..</nav> | 页面或者整个站点的导航链接 |
| <section>..</section> | 内容的主题组 |
| <article>..</article> | 一段独立的内容，比如新闻故事 |
| <aside>..</aside> | 与包含它内容相关的辅助内容 |
Tip：验证Web内容，http://validator.w3.org/
平时，有空可以通过View Source来查看常见网站的源代码，看看有什么值得借鉴的地方。
CSS（Cascading Style Sheet）：层叠样式表是一种定义样式构造的语言，比如字体、颜色和定位，它描述了如何在Web页面上格式化和现实信息。其包含的样式规则是一种格式化指令，可以应用于Web页面的元素，比如文本段落或链接。
基本的外部样式表，一个简单的示例如下所示：
first02.css
body{
font-size: 10pt;
font-family: Verdana, Geneva, Arial, Helvetica,sans-serif;
color:black;
line-height: 14pt;
padding-left: 5pt;
padding-right: 5pt;
padding-top: 5pt;
}
h1{
font:14pt Verdana, Geneva, Arial, Helvetica,sans-serif;
font-weight: bold;
line-height: 20pt;
}
p.subheader{
font-weight: bold;
color: #593d87;
}
img{
padding:3pt;
float:right;
}
a{
text-decoration:none;
}
a:link, a:visited{
color:#8094d6;
}
a:hover,a:active{
color: #FF9933;
}
footer{
font-size: 9pt;
font-style: italic;
line-height: 12pt;
text-align: center;
padding-top: 30pt;
}
first01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About Xionger</title>
<link rel="stylesheet" type="text/css" href="first02.css">
</head>
<body>
<section>
<header>
<h1>About Xionger</h1>
</header>
<p>
<img src="python.jpg" alt="Xionger logo" /> 伐木工光头强在森林中伐木赚钱。为了保卫丛林，熊兄弟一起反抗，无数次打败了光头强。上演了搞笑的丛林保卫战。 后来光头强变成猎人，由于对外面世界的好奇，熊大和熊二翻山越岭，走出丛林，来到城镇动物马戏团，光头强仍不屈不挠地与他们作对。后来又因臭豆腐阴差阳错返回丛林。由于怜悯光头强，经历一次次困难后，送光头强回家过年。 熊二[1] 是比较懒惰，贪吃的狗熊，但不失可爱。他很懒，比较笨，一般是熊大想出来的决策，虽然他的体型很胖胜于熊大，但力气超大，熊大无法抵挡。他还非常善良，心很软，也会为光头强感到可怜（在熊出没之过年中，正是他带头帮助了光头强，如果不是他，那等到猴年马月光头强都回不了家了）。
</p>
<p class="subheader">Xionger History</p>
<p>熊二一般情况下呆呆傻傻，憨态可掬，但是非常善良，特别是那婉转的腔调。他非常可爱，力大无穷，但是太过肥胖，每当去光头强家被光头强发现后，熊大和蹦蹦都会很轻松地从窗户逃出，而熊二的屁股肯定都会卡在那里。 熊二是一头憨厚可爱、力大无穷、有勇无谋的雄性狗熊，但又十分鲁莽，有时熊大不在，小动物们落难，熊二都会挺身而出，运用力量打败光头强。熊二喜欢母熊翠花，常常为了讨好翠花与熊大大打出手；在讨好翠花这一方面，熊二略逊于熊大。熊二老实又听话，但是笨笨的，也非常可爱，贪吃。可是由于熊二有时太过鲁莽，或者熊二做出些蠢事，总被他那聪明的老哥熊大责备甚至教训，熊二对此也只能老实地听着挨着。动物们几乎都是依靠熊大的计谋、熊二的力量才打败光头强的。而且在光头强家中搞恶作剧，偷吃光头强的水果，捣毁光头强的家。防止光头强砍树，捍卫了东北丛林。
</p>
<p><a href="http://www.baidu.com" />[continue reading]</p>
</section>
<footer>
Copyright ©2016-2016(www.xionger.com). All rights reserved.Use with permission.
</footer>
</body>
</html>
基本布局属性(display属性)
| 标签元素 | 诠释 |
| block | 在新行上显示元素，比如在一个新段落中 |
| list-item | 在新行上显示元素，并在其旁边带有一个列表项标记 |
| inline | 利用当前段落内联显示元素 |
| none | 不显示元素，它是隐藏的 |
Diplay属性依赖于相对定位(relative positioning)的概念，它以为着元素将相对于页面上的其他元素进行定位，之后还会介绍绝对定位(absolute positioning)的概念。
Tip:常见的表示长度和宽度的单位有：in，英寸；cm厘米，mm毫米，%百分比，px像素，pt磅。
基本格式化属性
| 属性 | 诠释 |
| border | 边框的各边 |
| border-Width | 边框边缘的宽度 |
| border-color | 边框边缘颜色 |
| border-style | 边框边缘样式：solid单线边框，double双线边框，dashed短划虚线边框，dotted点线边框，groove具有沟槽外观的边框，none无边框，hidden等价无边框 |
| border-left/right/top/bottom | 边框左、右、上、下 |
| background-color | 元素的内部区域颜色 |
| text-align | 内容对齐方式，包括左边、右边、中间，justify两端对齐 |
| text-indent | 内容缩进方式 |
| font-family | 字体系列，按顺序选择 |
| font-size/weight | 字体大小和粗细(normal,lighter,bold,bolder) |
| font-style | 字体的样式,normal,italic |
| line-height | 行距，用于设置每个文本行的高度 |
| padding | 给元素左边、右边、上边、下边添加填充 |
使用样式类和ID
使用样式类
p.subheader{
font-weight: bold;
color: #593d87;
}
使用样式ID
p#title{
font:24pt Verdana,Geneva, Arial
}
引用样式
<link rel="stylesheet" type="text/css" href="first03.css">
Tip:验证样式表，http://jigsaw.w3.org/css-validator/
经典的html5页面结构如下图所示
参考资料：
- 版) [M]. 北京:人民邮电出版社, 2014.
Html与CSS快速入门01-基础概念的更多相关文章
- Html与CSS快速入门02-HTML基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 示例 ...
- Html与CSS快速入门03-CSS基础应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 边框 ...
- JavaWeb零基础入门-01 基础概念说明
一.序言 从学校出来到实习,发现学校学的东西太过基础,难于直接运用于工作中.而且工作中,现在都以web开发为主,学校开了web开发相关课程.自己学的不够深入,所以本人自学JavaWeb开发,介于学习巩 ...
- Git 快速入门--Git 基础
Git 快速入门 Git 基础 那么,简单地说,Git 究竟是怎样的一个系统呢? 请注意接下来的内容非常重要,若你理解了 Git 的思想和基本工作原理,用起来就会知其所以然,游刃有余. 在开始学习 G ...
- CSS快速入门（四）
目录 CSS快速入门(四) 浮动 float属性 clear属性 浮动解决的问题及其影响 解决父标签塌陷的方法 浮动案例 定位 什么是脱离文档流 定位的两种方法 position定位 static定位 ...
- 一步步Cobol 400 上手自学入门教程01 - 基础概念
先学习基础概念 1.COBOL字符:包含: User-defined words 用户定义字符 System-names Reserved words 关键字 2.用户定义字符User-defin ...
- Html与CSS快速入门04-进阶应用
这部分是html细节知识的学习. 快速入门系列--HTML-01简介 快速入门系列--HTML-02基础元素 快速入门系列--HTML-03高级元素和布局 快速入门系列--HTML-04进阶概念 之前 ...
- HTML/CSS快速入门
Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...
- Linux快速入门01-基础概念
4年多前,刚到上海时报过一个关于Oracle的培训班,在那里接触到了Linux,不过一直都没真正去试着使用它.现在经过慢慢的成长,越来越觉得,Linux是每一个服务端工程师必须掌握的系统,即使是现在最 ...
随机推荐
- Postman-进阶
Postman-简单使用 Postman-进阶使用 Postman-CI集成Jenkins 管理请求 保存请求-添加“打开百度首页请求” 设置请求方式为Get,地址为www.baidu.com.点击右 ...
- CMM能力成熟度模型
CMM把软件企业的过程管理能力划分为5个等级: 1 .初始级:个别的.混乱无序的过程,软件缺乏定义,项目的成功严重依赖于某几个关键人员的努力.软件质量由个人的开发经验来保障. 2.可重复级 实施了基 ...
- 【整理】--linux指令
1.压缩 解压 .tar 解包:tar xvf FileName.tar打包:tar cvf FileName.tar DirName(注:tar是打包,不是压缩!)———————————————.g ...
- （转） silverlight 样式学习
原文地址:http://www.cnblogs.com/Joetao/articles/2074727.html <UserControl x:Class="StyleDemo.Mai ...
- linux-8 基本命令---date
2,date命令用于显示.设置系统的时间或日期,格式如下: date[选项][+指定格式]. date的详细格式如下: date命令格式 参数 作用 %t 跳个[tab]键 %H 小时(00-23) ...
- 使用Roboguice依赖注入规划Android项目
前言 好久没写博客了,罪过啊-记事本里累积了不少东西,整理整理放上来. 关于依赖注入 Dependency Injection( 依赖注入)可以很好的帮助我们分离模块,降低耦合.提高可测试性.(PS: ...
- 【Win10 UWP】后台任务与动态磁贴
动态磁贴(Live Tile)是WP系统的大亮点之一,一直以来受到广大用户的喜爱.这一讲主要研究如何在UWP应用里通过后台任务添加和使用动态磁贴功能. 从WP7到Win8,再到Win10 UWP,磁贴 ...
- Vmware配置
1.网络 四种连接模式的区别:http://www.cnblogs.com/awpatp/archive/2009/07/24/1530471.html 如果网卡使用Nat模式,则需要启动服务: VM ...
- STC12C5A60S2笔记5（省电模式）
1. 基本特性 STC12C5A60S2系列单片机可运行三种省电模式以降低功能,STC正常工作电流是2mA~7mA,而掉电模式下<0.1uA,空闲模式下<0.1mA. 1) 空闲模式:由电 ...
- 使用XtraReport的CalculatedFiled(计算字段)实现RDLC报表中表达式
DevExpress报表确实强大,花样繁多,眼花缭乱. 这次使用XtraReport开发报表,很多问题在官方的文档中并没有详细的说明,特此记录. 1.XtraReport中FormattingRule ...