HTML&CSS学习心德
学了html&css一周的时间,每天上课9小时,有空就看一下HTML+div+CSS视频,感觉还不错.
基本思路:从大的方面(整体结构)着手,将HTML的基本知识“解构”然后运用,边学边用。
学习效果:掌握了下面的知识,基本就可以动手写各大网站的首页了,主要是练习使用div布局和CSS效果显示。
一、html的文档结构
Strict:包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
Transitional:包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
Frameset:等同于Transitional但允许框架集内容。如果要写框架就要声明这一种。
head
title:浏览器工具栏中的标题、页面被添加到收藏夹时显示的标题、显示在搜索引擎结果中的页面标题
meta:元数据不会显示在页面上,但是对于机器是可读的。
规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
style:标签用于为 HTML 文档定义样式信息。
body 主要就是div和各类标签
二、用div来控制布局
布局原则:从大到小、从上到下、从左到右
盒子模型:有宽(width)高(height),有边框(border)、有外边距(margin)、有内边距(padding)
浮动布局:div可以”飘“起来(float)、也可以清除浮动(clear)
自己可以尝试用简单的div+背景色,来试着布局,增强自己的”大局观“。
三、用CSS来控制显示效果
先了解各类选择器:di、class、标签、派生、伪类、通配
再了解各类效果如何控制
段落控制
text-align 文本水平对齐设置
text-decoration 划线方式
letter-spacing 文本中单字的间隔
text-transform 大小写转换
文字控制
color 颜色设置 font-style 斜体设置 font-weight 文字粗细 font-size 文字大小 font-family 文字字体
背景控制
background-color 颜色
background-image 图片
background-repeat 图片平铺
background-attachment 滚动
background-position 图像在背景中的位置
CSS的引入方式:页内style标签、外部CSS文件、行内style标签、
CSS的初始化
原因:浏览器对元素有默认的CSS参数,且可能不一致,导致浏览器之间显示效果不一样
解决方法:统一对常用元素常用CSS参数,手动设定统一效果
四、html标签
无语义标签:div、span
有语义标签
h1-h6 标题
p 段落
img 图片
a 超链接和锚点
ul 无序列表
ol 有序列表
table 表格
HTML&CSS学习心德的更多相关文章
- jquery Easy UI Datagrid(数据网格)学习心德,附API
第一步,引入主要的css样式和js文件 <meta http-equiv="Content-Type" content="text/html; charset=ut ...
- WPF-MVVM学习心德(WinForm转WPF心德)
接触MVVM接近一段时间了,有一点理解,写下来. 之前是做winform的,工作需要,学习wpf.优缺点就不用说类,网上一大堆.我自己理解的话,有下面几点: 1.首先是界面的xmal和界面分离:wpf ...
- CSS学起来并不难
CSS CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非 ...
- Html与CSS学习书单
1.Head First HTML与CSS(第二版) 豆瓣详情 这本书非常适合入门学习HTML与CSS它的内容不一定详实,但一定是你入门的首选.作为一本引进 图书翻译尚可.目前豆瓣评分9.3.
- ITIL学习心笔记总结
四:价值: 被验证的价值1:革新意识---管理也是第一生产力 被验证的价值2:统一思路---这不是一个人的战斗 被验证的价值3:体系的价值---‘新木桶原理’ ITSM的实施经验表明,“”一流的工程师 ...
- [Windows核心编程]32bit程序在64bit操作系统下处理重定向细节[1]
这段时间,都在做Ring3层的普通32bit程序兼容64bit操作系统的代码修改,在此记录修改和学习心德.编程领域太广, 任何人经历有限,本人不是专家,所以我一贯原则是: 用到的时候,才去研究,在去记 ...
- 由css reset想到的深入理解margin及em的含义
由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...
- 一口气从CSS讲到Servlet再到JSP、Struts2,清蒸JavaWeb的前前后后。
B/S系统就是Browser/Server,浏览器/服务器系统,即,客户在浏览器操作,而代码实现的具体处理以及数据库操作等,则由后台服务器来完成,男耕女织,相得甚欢.比如我们查询成绩,我们通过浏览器输 ...
- 办理英属哥伦比亚大学(本科)学历认证『微信171922772』UBC学位证成绩单使馆认证University of British Columbia
办理英属哥伦比亚大学(本科)学历认证『微信171922772』UBC学位证成绩单使馆认证University of British Columbia Q.微信:171922772办理教育部国外学历学位 ...
随机推荐
- jQuery基础1
jQuery是轻量级的JavaScript库,jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数.更少的代码做更多的事. jQuery 可以选取某些元素并执行 ...
- 【自动化学习笔记】_环境搭建Selenium2+Eclipse+Java+TestNG_(一)
目录 第一步 安装JDK 第二步 下载Eclipse 第三步 在Eclipse中安装TestNG 第四步 下载Selenium IDE.SeleniumRC.IEDriverServer 第五步 下 ...
- H5一行显示两个正方形
1)有时候一些图片会是正方形或者长方形,对于这样的图片一般都是居中显示到正方体内,代码如下: .exhibition_list img{width:100%;position: relative;t ...
- 一个在线jpg png转ICO的网站
网站地址: https://lvwenhan.com/convertico/
- centos mongodb cluster install 完全版
分享一则用yum安装的mongodb初始化脚本. install_mongodb.sh会安装mongodb所需的基本环境. 配置副本集的时候会需要辅助文件hosts.conf. 说明:该示例为一主一丛 ...
- 无边框窗体和timer控件
一.无边框窗体 1.控制按钮如何制作就是放置可以点击的控件,不局限于使用按钮或是什么别的,只要放置的控件可以点击能触发点击事件就可以了 做的好看一点,就是鼠标移入(pictureBox1_MouseE ...
- C#调用斑马打印机打印条码标签(支持COM、LPT、USB、TCP连接方式和ZPL、EPL、CPCL指令)【转】
原文地址:http://blog.csdn.net/ldljlq/article/details/7338772 在批量打印商品标签时一般都要加上条码或图片,而这类应用大多是使用斑马打印机,所以我也遇 ...
- 织梦系统dedecms如何开启伪静态
做为一名网站建设工程师,必须要考虑到网站优化方面的工作,那么选择CMS系统的时候,有良好的网站 优化功能就是一个好的CMS的标准之一,而系统是否支持伪静态,则是URL优化的工作之一,而织梦系统能良好的 ...
- tomcat apache 实现负载平衡的小demo
软件:1个apache,2个tomcat module包:mod_jk.so(下载地址:http://tomcat.apache.org/download-connectors.cgi) 下载文件解压 ...
- 山锅(samgor)的博客 2014
搞移动端的前端开发已经3年,悄悄地从一个前端小白变成老油条. 项目已经做了好几个,最近发现技术的提升貌似停滞不前.说很菜吧,知道的还是不少.说精通吧,自我感觉还算不上. 认真的考虑下这个问题,觉得技术 ...