HTML学习总结(1)

前段基础:

以下为我们需要了解的三个方面:

html 超文本标记语言  (页面结构)

css  层叠样式表  (页面样式) 通过 html+css 能设置静态页面

js   javaScript   (页面行为)

常用的集中软件开发工具:

subline 、webStorm、 DreamWeave;

基本样式:

<!DOCTYPE html>

<html>

<head>

<meta charset=utf-8" />

<title>无标题文档</title>

</head>

<body>

</body>

</html>

一个网页有head(主体)与body(内容)部分

<!DOCTYPE HTML> 声明文档类型

! 声明  注意

document 文档

type 类型

<meta charset = "utf-8">

代码编码格式

utf-8  国际标准

gb2312 中文简体标准

不同标准下,同一个字符 对应的编码是不同的!

<div>块</div>

内部样式表:将样式从标签里面分离开,写在head部分;

html里面注释格式:<!-- Content -->

css内的注释样式

/*

*Content

*/

一般用外部样式表,方便网页的维护;内部样式与行间样式 不利于维护

行间样式:将样式写在标签行里面

</div style = "background:red; width:200px;height:400px;">

#box{

width:400px;

}

XX:??;

属性:属性值;

/属性有: width 宽度; height 高度;

background 背景(可以是颜色可以是图片)

repeat 重复 no-repeat 不重复 repeat-x 横向重复 repeat-y纵向重复

例子:backgtound:blue url(图片名) no-repeat 10px(横向位置可以用百分数 cent er等) 50 px(纵向位置)fixed(固定);

复合属性:一个属性有多个属性值 叫复合属性

fixed 固定 固定在页面的上,不随着页面上下发生改变

!!!前端是一个解释性语言,需要游览器进行解读,因此写代码尽量精简!

常见样式:

边框(border):

border-width:边框宽度

borde-style:边框样式

border-color 边框颜色

边框样式:

solid 实线

dashed 虚线

dotted 点线

border复合属性:上线左右边框粗细,样式和颜色;

内边距:(padding)

注意:内边距相当于给一个盒子加了填充厚度会影响盒子大小

有上下左右边距;

如有padding-top等

也可以上下 如 padding:10px 10px;

复合 必须要按 top right bottom left;

外边距:(margin)

上下外边距会叠加;

父子级包含的时候子级的margin-top会传递给父级(内边距替代外边距)可以用内边距(padding 来实现)

margin-left:auto;此代码会自动计算右边的距离,全部给左边;无论怎么调都会使在右边。

margin-left:auto;与margin-right:auto;

会是边框始终处于中间

外边距的复合:

margin:top right bottom left;

盒子的大小=border+padding+wudth/height;

盒子的宽度=border-left+padding-left+width+padding-right+border-ringt;

盒子的高度=border-top+padding-top+width+padding-bottom+border-bottom;

页面中结构外的内容样式称为文本样式:

font-size文字大小:偶数;默认12px

font-family文字字体:默认宋体;可以跟多个字体用逗号隔开。表示如果没有这个字体,显示后面字体;

文字颜色color:(可以用ps吸管取颜色并转为16进制,16进制前要跟“#”例:color:#?????;)

line-height行高:文字在行高的居中;

text-align:文字对齐方式(center等)

text-indent:首行缩进();em单位;缩进几个字;

font-weight:文字着重;

font-style:文字样式(斜体等样式);

text-decoration:(overline downline line-through none)文本修饰;

letter-spacing:字间距;

word-spacing:英文单词间距;

!!!总结:

常见的复合属性:

background

border

padding

margin

font:font-size|font-weight|font-size/line-height|font-family;

(font了解)

游览器建议多装几个IETester

标准游览器:firebox(firebug 1.12.4)经常用于调试

、chrome、safara、oprea。等

时间: 2024-10-18 00:33:16

HTML学习总结(1)的相关文章

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

Java多线程学习(吐血超详细总结)

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 目录(?)[-] 一扩展javalangThread类 二实现javalangRunnable接口 三Thread和Runnable的区别 四线程状态转换 五线程调度 六常用函数说明 使用方式 为什么要用join方法 七常见线程名词解释 八线程同步 九线程数据传递 本文主要讲了java中多线程的使用方法.线程同步.线程数据传递.线程状态及相应的一些线程函数用法.概述等. 首先讲一下进程和线程

微信小程序学习总结(2)------- 之for循环,绑定点击事件

最近公司有小程序的项目,本人有幸参与其中,一个项目做下来感觉受益匪浅,与大家做下分享,欢迎沟通交流互相学习. 先说一下此次项目本人体会较深的几个关键点:微信地图.用户静默授权.用户弹窗授权.微信充值等等. 言归正传,今天分享我遇到的关于wx:for循环绑定数据的一个tips:  1. 想必大家的都知道wx:for,如下就不用我啰嗦了: <view class="myNew" wx:for="{{list}}">{{item.title}}<view

【安全牛学习笔记】

弱点扫描 ╋━━━━━━━━━━━━━━━━━━━━╋ ┃发现弱点                                ┃ ┃发现漏洞                                ┃ ┃  基于端口五福扫描结果版本信息(速度慢)┃ ┃  搜索已公开的漏洞数据库(数量大)      ┃ ┃  使用弱点扫描器实现漏洞管理            ┃ ╋━━━━━━━━━━━━━━━━━━━━╋ [email protected]:~# searchsploit Usage:

winform学习日志(二十三)---------------socket(TCP)发送文件

一:由于在上一个随笔的基础之上拓展的所以直接上代码,客户端: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Net.Sockets; using Sys

零基础的人该怎么学习JAVA

对于JAVA有所兴趣但又是零基础的人,该如何学习JAVA呢?对于想要学习开发技术的学子来说找到一个合适自己的培训机构是非常难的事情,在选择的过程中总是 因为这样或那样的问题让你犹豫不决,阻碍你前进的步伐,今天就让小编为您推荐培训机构新起之秀--乐橙谷Java培训机构,助力你成就好未来. 选择java培训就到乐橙谷 北京有什么好的Java培训机构?来乐橙谷北京学Java,零基础走起,乐橙谷Java基础班授课老师经验非常丰富,课程内容安排合理,适合于有一点点Java基础甚至一点都不会Java的同学学

最全解析如何正确学习JavaScript指南,必看!

划重点 鉴于时不时,有同学私信问我:怎么学前端的问题.这里统一回复一下,如下次再遇到问我此问题同学,就直接把本文链接地址发给你了. "前端怎么学"应该因人而异,别人的方法未必适合自己.就说说我的学习方法吧:我把大部分时间放在学习js上了.因为这个js的学习曲线,先平后陡.项目实践和练习啥的,我不说了,主要说下工作之外的时间利用问题.我是怎么学的呢,看书,分析源码.个人这几天统计了一下,前端书籍目前看了50多本吧,大部分都是js的.市面上的书基本,差不多都看过. 第一个问题:看书有啥好处

轻松学习C语言编程的秘诀:总结+灵感

目前在准备一套C语言的学习教程,所以我这里就以C语言编程的学习来讲.注意,讲的是"轻松学习",那种不注重方法,拼命玩命的方式也有其效果,但不是我提倡的.我讲究的是在方式方法对头.适合你.减轻你学习负担和心里压力的前提下,才适当的抓紧时间. 因此,探索一种很好的学习方法就是我所研究的主要内容. 众所周知,学习C语言并非易事,要学好它更是难上加难.这和你期末考试背会几个题目的答案考上满分没多大关系,也就是说你考试满分也说明不了你学好.学精通了C语言.那么怎么才算学精通C语言?闭着眼睛对自己

开始我的Python爬虫学习之路

因为工作需要经常收集一些数据,我就想通过学爬虫来实现自动化完成比较重复的任务. 目前我Python的状况,跟着敲了几个教程,也算是懂点基础,具体比较深入的知识,是打算从做项目中慢慢去了解学习. 我是觉得如果一开始就钻细节的话,是很容易受到打击而放弃的,做点小项目让自己获得点成就感路才更容易更有信心走下去. 反正遇到不懂的就多查多问就对了. 知乎上看了很多关于入门Python爬虫的问答,给自己总结出了大概的学习方向. 基础: HTML&CSS,JOSN,HTTP协议(这些要了解,不太需要精通) R

javaweb学习纲要

Java Web  概述 大纲: 1.C/S体系结构 2.B/S体系机构 3.两种体系结构比较 4.主流的Web程序应用平台 5.java web学习路线图 1.C/S体系结构 C/S是Client/Server的缩写,即客户端/服务器结构.在这种结构中,服务器通常采用高性能的PC机或工作站,并采用大型数据库系统(如Oracle或SQL Server),客户端则需要安装专用的客户端软件,如下图所示.这种结构可以充分利用两端硬件环境的优势,将任务合理分配到客户端和服务,从而降低了系统的通讯开销.在