Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间。最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下。内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握。
快速入门系列--HTML-01简介
快速入门系列--HTML-02基础元素
快速入门系列--HTML-03高级元素和布局
快速入门系列--HTML-04进阶概念
Html(Hypertext Markup Language超文本标记语言):1990由Tim Berners-Lee爵士设计,成为了Internet上标准的文本传输形式,可以这么说,对于在互联网行业工作的我们来说,这就是我们饭碗的基础啊,嘿嘿。
基本文档格式,请见如下示例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>cheer up, xionger</title> 6 </head> 7 <body> 8 <p>first course</p> 9 <br/> 10 <h1>hello</h1> 11 <hr/> 12 <h1>world</h1> 13 </body> 14 </html>
View Code
常见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> | 与包含它内容相关的辅助内容 |
<hgroup> | 组合标题元素 |
Tip:验证Web内容,http://validator.w3.org/
平时,有空可以通过View Source来查看常见网站的源代码,看看有什么值得借鉴的地方。
CSS(Cascading Style Sheet):层叠样式表是一种定义样式构造的语言,比如字体、颜色和定位,它描述了如何在Web页面上格式化和现实信息。其包含的样式规则是一种格式化指令,可以应用于Web页面的元素,比如文本段落或链接。
基本的外部样式表,一个简单的示例如下所示:
1 first02.css 2 body{ 3 font-size: 10pt; 4 font-family: Verdana, Geneva, Arial, Helvetica,sans-serif; 5 color:black; 6 line-height: 14pt; 7 padding-left: 5pt; 8 padding-right: 5pt; 9 padding-top: 5pt; 10 } 11 12 h1{ 13 font:14pt Verdana, Geneva, Arial, Helvetica,sans-serif; 14 font-weight: bold; 15 line-height: 20pt; 16 } 17 18 p.subheader{ 19 font-weight: bold; 20 color: #593d87; 21 } 22 23 img{ 24 padding:3pt; 25 float:right; 26 } 27 28 a{ 29 text-decoration:none; 30 } 31 32 a:link, a:visited{ 33 color:#8094d6; 34 } 35 36 a:hover,a:active{ 37 color: #FF9933; 38 } 39 40 footer{ 41 font-size: 9pt; 42 font-style: italic; 43 line-height: 12pt; 44 text-align: center; 45 padding-top: 30pt; 46 } 47 48 first01.html 49 <!DOCTYPE html> 50 <html> 51 <head> 52 <meta charset="utf-8"> 53 <title>About Xionger</title> 54 <link rel="stylesheet" type="text/css" href="first02.css"> 55 </head> 56 <body> 57 <section> 58 <header> 59 <h1>About Xionger</h1> 60 </header> 61 <p> 62 <img src="python.jpg" alt="Xionger logo" /> 伐木工光头强在森林中伐木赚钱。为了保卫丛林,熊兄弟一起反抗,无数次打败了光头强。上演了搞笑的丛林保卫战。 后来光头强变成猎人,由于对外面世界的好奇,熊大和熊二翻山越岭,走出丛林,来到城镇动物马戏团,光头强仍不屈不挠地与他们作对。后来又因臭豆腐阴差阳错返回丛林。由于怜悯光头强,经历一次次困难后,送光头强回家过年。 熊二[1] 是比较懒惰,贪吃的狗熊,但不失可爱。他很懒,比较笨,一般是熊大想出来的决策,虽然他的体型很胖胜于熊大,但力气超大,熊大无法抵挡。他还非常善良,心很软,也会为光头强感到可怜(在熊出没之过年中,正是他带头帮助了光头强,如果不是他,那等到猴年马月光头强都回不了家了)。 63 </p> 64 <p class="subheader">Xionger History</p> 65 <p>熊二一般情况下呆呆傻傻,憨态可掬,但是非常善良,特别是那婉转的腔调。他非常可爱,力大无穷,但是太过肥胖,每当去光头强家被光头强发现后,熊大和蹦蹦都会很轻松地从窗户逃出,而熊二的屁股肯定都会卡在那里。 熊二是一头憨厚可爱、力大无穷、有勇无谋的雄性狗熊,但又十分鲁莽,有时熊大不在,小动物们落难,熊二都会挺身而出,运用力量打败光头强。熊二喜欢母熊翠花,常常为了讨好翠花与熊大大打出手;在讨好翠花这一方面,熊二略逊于熊大。熊二老实又听话,但是笨笨的,也非常可爱,贪吃。可是由于熊二有时太过鲁莽,或者熊二做出些蠢事,总被他那聪明的老哥熊大责备甚至教训,熊二对此也只能老实地听着挨着。动物们几乎都是依靠熊大的计谋、熊二的力量才打败光头强的。而且在光头强家中搞恶作剧,偷吃光头强的水果,捣毁光头强的家。防止光头强砍树,捍卫了东北丛林。 66 </p> 67 <p><a href="http://www.baidu.com" />[continue reading]</p> 68 </section> 69 <footer> 70 Copyright ©2016-2016(www.xionger.com). All rights reserved.Use with permission. 71 </footer> 72 </body> 73 </html>
View Code
基本布局属性(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页面结构如下图所示
Tip:常见标签
audio音频内容; canvas画布功能; command命令按钮; datalist下拉列表; details元素详细内容; dialog对话框; keygen表单声称的键值; mark有标记的文本; output定义输出类型; progress任务的过程; source媒体资源; video视频内容
参考资料:
- 梅洛尼. HTML与CSS入门经典(第9版) [M]. 北京:人民邮电出版社, 2014.
转载于:https://www.cnblogs.com/xiong2ge/p/Html_Fast01.html
Html与CSS快速入门01-基础概念相关推荐
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- web快速入门之基础篇-js:3_3、简易购物车
目录 一.前言 二.js代码实例演示 1.简易购物车01_数量变化 (1)实例代码 (2)效果演示 2.简易购物车02_数量价格同步 (1)实例代码 (2)效果演示 一.前言 上一篇介绍了DHTML对 ...
- 视频教程-快速入门Python基础教程_Python基础进阶视频-Python
快速入门Python基础教程_Python基础进阶视频 十余年计算机技术领域从业经验,在中国电信.盛大游戏等多家五百强企业任职技术开发指导顾问,国内IT技术发展奠基人之一. 杨千锋 ¥199.00 立 ...
- 视频教程-快速入门Python基础教程_Python基础知识大全-Python
快速入门Python基础教程_Python基础知识大全 十余年计算机技术领域从业经验,在中国电信.盛大游戏等多家五百强企业任职技术开发指导顾问,国内IT技术发展奠基人之一. 杨千锋 ¥99.00 立即 ...
- web快速入门之基础篇-html:2、基本标签之标题标签、段落标签、换行标签
目录 一.前言 二.简单实例介绍 实例代码 运行效果 三.要点说明 1.h1到h6 标题标签 2.p 段落标签 3.br 换行标签[单标记] 一.前言 上一篇文章我整理以前上学的笔记是初见 html ...
- 基因表达分析-01基础概念
基因表达分析-01基础概念 一. 检测方法 Q-PCR 基因芯片(Microarray)高通量 表达序列标签(EST) 基因表达系列载体(SAGE) 转录组测序(RNA-seq)高通量 二. 基因 ...
- 前端学习之CSS快速入门-2021-09-20~22
CSS快速入门 什么是CSS 如何学习 csst是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) 美化网页(文字,阴影,超链接,列表,渐变-) 盒子模型 浮动 定位 网页动画(特效效果) ...
- PLC编程入门-01基础知识介绍
PLC编程入门-01基础知识介绍 PLC的组成结构 PLC编程语言: PLC输入输出的特点 输入 输出 PLC的组成结构 简图 明细图 CPU:控制器和运算器本身就是CPU主要组成部分,和PC的CPU ...
- css 快速入门之 flex 布局教程
css 快速入门之 flex 布局教程 flex 简称弹性布局,是2009年W3C提出的 css3 新属性. 弹性布局(flexible box)模块旨在提供一个更加有效的方式来布置,对齐和分布在容器 ...
最新文章
- centos7 yum 错误 This system is not registered with an entitlement server
- PMcaff会员圣诞礼物大放送!
- 【编程6】贪吃蛇游戏(python+pygame)
- hust1347(归并排序求逆序对)
- 就有趣,Python生成字符视频
- c语言程序设计教程 实验十,清华大学出版社-图书详情-《C语言程序设计实验教程》...
- Tomcat源码解析五:Tomcat请求处理过程
- 大话设计模式读书笔记--6.原型模式
- Downloader Middlewares反反爬虫【学习笔记04】
- preg_match_all中的标记
- STL map 内存改变,迭代器失效,_Isnil(_Ptr)和红黑树
- 同一台服务器上部署多个Tomcat的配置修改方法
- 团购潮冲击佣金模式 携程拒三倍赔付藏消费陷阱
- php使用cookie实现记住用户名和密码实现代码
- 有赞 插入html,有赞 前端工程师面试题
- php期末考卷,php试卷B高质量含答案
- 如何快速撰写/总结国内外研究现状?
- 移动端背景图css6,移动端适配之雪碧图(sprite)背景图片定位
- cmd是计算机语言吗,cmd的含义和作用
- servlet的生命周期的介绍
热门文章
- 值得收藏-装修攻略全
- Python连接MySQL insert插入语句
- jQuery属性操作之.val()
- 利用SwipeRefreshLayout实现类似知乎客户端的一打开界面就自动刷新的效果
- 【JavaScript】移动端扫描二维码检测浏览器(微信、支付宝、Safari、其他浏览器)
- 【openfilier】配置iSCSI存储
- javax.el.PropertyNotFoundException
- ESP8266NodeMcu连接不上WIFI解决方法
- verilog HDLBits Verilog语法
- ASCII码中可打印字符和不可打印字符