一、 Html部分

  1. Html定义

Hyper Text Markup Language  超文本标记语言

html 1.0  ->  html  2.0   -> ... -> html 4 -> html 5

  1. 网页的基本结构

<html>

<head>

<title>这里显示标题文字</title>

</head>

<body>

这里显示正文内容。

</body>

</html>

title：网页的标题

body：网页的正文部分

父子关系：父元素、子元素。兄弟关系：兄弟元素。

祖先后代关系：祖先元素、后代元素。

  1. 浏览器

用于查看运行网页文件。

IE、360、猎豹、谷歌、火狐、欧鹏、世界之窗... ...

  1. 网页开发工具

记事本、Dreamweaver、sublime text、... ...

  1. 网页编码(乱码)

文件在保存时使用的编码、网页文件在浏览器中查看时使用的编码

现在有很多字符编码格式：ascii(256:字母、数字、常用符号)、gbk、gb2312、UTF-8

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  1. 常用网页标签

1>. 标题标签  h1 h2 h3 h4 h5 h6

2>. 段落标签  <p></p>

3>. 换行标签  <br /> 自闭合标记

4>. 水平线标签  <hr />

5>. 加粗：strong    斜体：em

6>.特殊符号（实体字符）

<     <

>     >

"     "

@     ©

空格

  1. 注释

让开发人员看的，以后维护网页非常方便。

<!-- 这里是注释部分，不会在浏览器中显示 -->

  1. 图片标记

<img src="myphoto.jpg" alt="文字" title="" />

src属性：设置要显示的图片路径

alt属性：当图片路径不存在时，使用指定文字代替

title属性：当鼠标悬浮到元素上时，提示的文字信息

width和height属性：设置图像的宽度和高度（其他html元素也可以使用这两个属性控制大小）。

  1. 超链接

用途：用于实现页面间导航、锚链接（跳转到页面指定元素的位置）、功能性链接（文件下载|发送邮件）

<a href="目标页面地址" target="">文字或图片</a>

target属性：_blank(打开新窗口加载目标页面)、_self(在当前窗口加载目标页面)

<a href="mailto:451710955@qq.com">发送邮件</a>

  1. 文件扩展名

不同类型的文件，有不同的文件扩展名。

音频文件：.mp3

视频文件：.mp4   .avi  .rmvb   .rm

安装文件：.exe

图片文件：.png   .jpg  .gif    *.bmp

网页文件：.html    .htm

设置计算机显示和隐藏文件的扩展名：

打开计算机（我的电脑）->工具菜单->文件夹选项->查看->隐藏文件的扩展名

  1. 列表

定义：由很多相同或相似的列表项组成的集合就是列表。

分类：无序列表、有序列表、定义列表

  1. 无序列表

ul：无序列表     li：列表项

<ul>

<li>苹果</li>

<li>香蕉</li>

<li>鸭梨</li>

</ul>

无序列表type属性：disc（实心圆=默认值）、square（实心方块）、circle（空心圆）

  1. 有序列表

ol：无序列表     li：列表项

<ol>

<li>苹果</li>

<li>香蕉</li>

<li>鸭梨</li>

</ol>

有序列表type属性：1（数组=默认值）、A|a（大|小写字母）、I|i（大|小写的罗马数字）

  1. 表格

组成元素：table、tr、th、td

用途：呈现数据；布局

边框：<table border="1" cellspacing="0" cellpadding="10">

border：边框线的宽度

cellspacing：单元格与单元格之间的距离

cellpadding：单元格与内容之间的距离

对齐方式（td）：

水平对齐：align:left|right|center

垂直对齐：valign:top|bottom|middle

<table>

<tr>

<th>姓名</th>

<th>联系电话</th>

</tr>

<tr>

<td>张良</td>

<td>12365874512</td>

</tr>

</table>

跨行：rowspan="n"    跨列：colspan="n"

  1. 框架：frameset

注意：使用frameset时，不能使用Html（head|body）标记

cols属性：设置框架划分为几列。cols="20%,*"    *代表占据所有剩余空间。

rows属性：设置框架划分为几行。*代表占据所有剩余空间。

<frameset rows="120px,*">

<frame src="top.html"></frame>

<frameset>

<frame src="left.html"></frame>

<frame name="main"></frame>

</frameset>

</frameset>

禁止改变框架的大小：<frame noresize="noresize"></frame>

去掉框架的边框：<frameset frameborder="0"></frame>

  1. 框架：iframe

注意：iframe可以嵌入到html结构中。

<iframe src="path" name="mainFrame" frameborder="x" scrolling="yes/no" noresize="noresize" width="x" height="y"></iframe>

scrolling：是否允许出现滚动条

  1. form表单标记

<form action="" method=""></form>

method：控制表单的提交方式。method属性值可以是：post和get。

l get：表单中提交的数据会显示到Url地址中。

l post：表单中提交的数据不会显示到Url地址中。

action：控制表单提交的地址。

注意：form不会在页面中呈现任何可视化的内容。

http://www.baidu.com/search.html?name=zhangsan&password=123456

url    ?后面的内容都是参数，?前面的是页面地址，上面Url中包含2个参数：name、password

  1. 表单元素

1>.单行文本框

<input type="text" value="文本框中显示的内容" name="" id="" />

2>.密码框

<input type="password" />

3>.按钮

提交按钮：<input type="submit" value="按钮上显示的文本" />

重置按钮：<input type="reset" value="重置" />

普通按钮：<input type="button" value="显示的文本" />

图片按钮：<input type="image" src="图片路径" />

4>.单选按钮

<input type="radio" name="" value="" />

注意：如果多个单选按钮要具有互斥的效果，应该保持他们的name属性值相同。

5>.复选框

<input type="checkbox" />

6>.下拉列表框

<select name="shengfen">

<option value="-1">请选择</option>

<option value="1">河北省</option>

<option value="2" selected="selected">河南省</option>

<option value="3">湖北省</option>

<option value="4">湖南省</option>

</select>

7>.多行文本框

<textarea rows=””  cols=””></textarea>

8>.文件域

<input type="file" name="" />

3.语义化表单

1>.fieldset 和 legend

<fieldset>

<legend></legend>

......

</fieldset>

2>.label

<label for="表单元素的值">文字</label>

二、 Css部分

  1. CSS简介

CSS 是 Cascading Style Sheet 的缩写。层叠样式表。

用途：用于(增强)控制网页外观效果并允许将样式信息与网页内容分离的一种标记性语言。

  1. CSS常用的属性

color：设置字体颜色（前景色）。

background-color：设置元素的背景色。

font-size：字体大小

font-weight：bold|100-900|lighter   文字加粗

text-decoration：underline|overline|line-through|none   文字装饰效果

text-indent：首行缩进     2em

line-height：文字的行高

height：元素的高度

width：元素的宽度

text-align：元素的水平对齐方式     left|right|center

  1. 盒子模型

l border：边框

相关属性：border-left、border-right、border-top、border-bottom

常见写法：border:1px solid red;     border-bottom:1px dashed green;     border-right:none;

l margin：外边距

相关属性：margin-left、margin-right、margin-top、margin-bottom

常见写法：margin:10px; margin-bottom:10px; margin:10px 0px; margin:10px 20px 30px 40px;(上右下左)

l padding：内边距

相关属性：padding-left、padding-right、padding-top、padding-bottom

常见写法：padding:10px;   padding-bottom:10px;

  1. CSS代码的书写位置

1>.行内样式：直接在html元素的style属性中书写CSS代码

<div style="css代码"></div>

2>.内嵌样式：在网页文件的head标记中，title标记后书写CSS代码

<head>

<title></title>

<style type="text/css">

css代码

</style>

</head>

3>.外部样式：将CSS代码单独写到一个样式表文件中（***.css），然后再将css文件导入到网页中

<head>

<title></title>

<link type="text/css" rel="stylesheet" href="***.css" />

</head>
  1. CSS选择符的几种用法

1>.ID选择符       语法：#selectorName{...}

#box1{border:1px solid red;}

2>.类选择符       语法：.selectorName{...}       class属性

.box{border:1px solid green;}

3>.标记选择符     语法：selectorName{...}

div{color:red;border:1px solid green;}

4>.组合选择符     语法：selector1,selector2,...{...}

.box,#mybox,span{border:1px solid red;}

.box{border:1px solid red;}

#mybox{border:1px solid red;}

span{border:1px solid red;}

5>.包含选择符     语法：selector1 selecotr2{...}

div span{font-size:20px;}     .box span{font-size:20px;}   #yourbox .box{font-size:20px;}

6>.通配符选择符   语法：*{...}

*{font-size:20px;}

  1. 网页中颜色的几种用法

1>.拥有颜色名称的颜色。red、blue、black、white、gray、purple...

2>.WEB安全色。# + 6位（0-9A-F）    #FFFFFF   #000000  #A927C0   #FFF   #081   #FFCA66

3>.rgb颜色值。rgb(0,255,100)    rgb(100,100, 100)   每一位都介于0-255之间

  1. CSS属性

1>.font-family   字体   宋体|微软雅黑

2>.border-collapse  边框收缩   separate|collapse   给table写样式时使用

3>.list-style

list-style-type：none|disc|circle|square|upper-alpha|lower-alpha|lower-roman|upper-roman|decimal

list-style-image

list-style-position

4>.float: left|right        浮动

注意：浮动使用完毕后记得清除浮动，否则会对后续元素造成影响。

clear: left|right|both   清除浮动

  1. 伪类

:hover  鼠标悬浮到元素上时应用的效果   tr:hover{background-color:#aaccff;}

:link   未访问过的超链接

:visited  已经访问过的超链接的样式

:active 被激活（鼠标按下）时的样式

  1. CSS常用属性

1>.background-image    设置背景图片

background-image:url("images/xxx.jpg");

2>.background-repeat   设置背景图片的重复

repeat(水平垂直方向重复)|no-repeat(不重复)|repeat-x(水平方向重复)|repeat-y(垂直方向重复)

3>.background-position 设置背景图片的坐标

background-position:x y;   background-position:20px 50px;

4>.position   定位

static | absolute | fixed | relative

注意：当position设置为absolute、fixed或者relative后，top|bottom|left|right会被激活。

5>.z-index    设置z轴的大小

z-index:999;

6>.display    元素的呈现方式

inline：行内样式，无法设置宽度、高度

block：块，每次在新的一行显示

inline-block：行内块，不会换行，同时可以设置高度和宽度

none：隐藏元素，使元素不可见（并且不占据空间）。

Html +++++css总结的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. log4j.appender.stdout.layout.ConversionPattern

    http://501565246-qq-com.iteye.com/blog/1991881 http://wenku.baidu.com/link?url=e4Z9v9CY_gwRxHrggzHXx ...

  2. iOS tabbar点击动画效果实现

    正常情况下,我们点击tabbar都只有一个变色效果,但有时候,如果我们想给它添加一个点击动画,该如何做呢? 先上几个效果图: 1.先放大,再缩小 2.Z轴旋转               3.Y轴位移 ...

  3. Linux笔记（三） - 文件搜素

    (1)文件搜索:find-name  根据文件名, *匹配任意字符 ,?单个字符-iname  根据文件名, 不区分大小写-size 根据文件大小查找 (+ 大于 -小于)(-a并且 -o或者)-us ...

  4. 安装python2.7.13-64bit & Pycharm在两个python版本之间切换

    本来已经安装了32位的python27,但在使用轮廓系数评估k-means模型的优良性时,出现了内存溢出的报错.原来32为的python编译器最多只能使用4GB的内存,所以就打算换成64位的pytho ...

  5. Docker环境中部署DzzOffice 1.2.5.2

    整体思路: 1.官方获取mysql.php+apache镜像: 2.基于php+apache,创建DzzOffice镜像: 3.启动mysql镜像: 4.启动DzzOffice镜像,链接mysql镜像 ...

  6. iOS之内存分析

    静态内存分析(Product->Analyze) 静态内存分析是不运行程序,直接对代码进行分析. 但是没有真正分配内存,根据代码的上下文的语法结构,来分析是否有内存泄露 缺点:不一定准确,但是如 ...

  7. Hadoop权威指南:HDFS-Hadoop存档

    Hadoop权威指南:HDFS-Hadoop存档 [TOC] 每个文件按块方式存储, 每个块的元数据存储在namenode的内存中 Hadoop存档文件或HAR文件是一个更高效的文件存档工具,它将文件 ...

  8. java中File类的常用所有方法及其应用

    创建:createNewFile()在指定位置创建一个空文件,成功就返回true,如果已存在就不创建,然后返回false.mkdir()  在指定位置创建一个单级文件夹.mkdirs()  在指定位置 ...

  9. 访问量分类统计（QQ,微信,微博,网页,网站APP,其他）

    刚准备敲键盘,突然想起今天已经星期五了,有点小兴奋,一周又这么愉快的结束,又可以休息了,等等..我好像是来写Java博客的,怎么变成了写日记,好吧,言归正传. 不知道大家有没有遇到过这样的需求:统计一 ...

  10. java中的final与static

    许多程序设计语言都有自己的办法告诉编译器某个数据是"常数".常数主要应用于下述两个方面: (1) 编译期常数,它永远不会改变 (2) 在运行期初始化的一个值,我们不希望它发生变化 ...