`

HTML CSS、入门知识点

 
阅读更多

HTML基本结构

文档类型的说明：<!doctype  html public .............>,有三种

<html>的两个属性：dir（文档显示方向），lang（使用的语言）

元素和属性名不区分大小写，大部分属性值不区分大小写，class和id属性的值区分大小写

字符实体：&nbsp表示空格，等等

 

辅助性元素

<title>设置页面标题，网页左上角

<base href="">设置网页基础URL

<link rel="stylesheet" type="text/css"  href="url">链接到css文件

<script type="text/javascript" src="url">链接到js文件

<meta name="XXX"  content="XXX">元数据

<link rel="icon" href="url">定义浏览器左上角小图标

 

网页文本设计

<hn>标题标记

<font face="字体"  size='x' color='#000000' align='center'>

<b>粗体

<strong>粗体

<i>斜体

<em>斜体

<cite>斜体

<big>加大字号

<small>减小字号

<hr>水平分割线

<pre> 将文字按照源代码的样子显示在浏览器上

 

 

列表

<ul><li>无序号的列表

<ol><li>有序号的列表

 

 

超链接

<a href="httpurl">该url必须带有http前缀

<a target="_blank">开到新窗口

<a title='xxx'>链接提示信息

<a href="#html" >  <div id="html">  定义锚点，链接到该div

<a href="mailto:zzqecnu@163.com"> 给邮箱发邮件

<a onclick="return false;">禁用链接

 

 

图像

图像映射(将图像的一部分变成链接):<img usemap="#xxx">  <map name='xxx'><area shap="rect/circle/poly" href='url'></map>

 

表格设计

 <td colspane ='2'>合并左右两个单元格

<td rowspane ='2'>合并上下两个单元格

 <caption>表格标题

<td nowrap>禁止换行

 

表单设计

<form action="url"  method="get/post">

<input type="image">图像按钮

<select><option></option></select>选择列表

<input type=""  disabled/>不可用控件

<input type=""  readonly/>只读控件

 

多媒体

<embed type="XXX"  src="url">插入多媒体

<marquee>滚动文字

 

——————————————      CSS      ————————————————————————

 margin 外留白

padding 内留白

选择器的多各类用空格隔开

@import url("url")导入样式

css优先级：内联样式>嵌入式样式>导入样式>链接样式 

 font-family 字体

font-style:oblique 文字偏斜体

font-weight 加粗

line-height:xx px 行间距

text-align 对齐方式

vertical-align 垂直对齐方式

background-image 背景图片

background-color 背景颜色

background-repeat 背景图片自动平铺

background-position 背景图片位置

text-transform 英文大小写自动转换 

 font-size 文字大小

text-decoration 文字上中下画线

text-indent 首行缩进

 

图片特效

border-style 图片边框类型

border-color 图片边框颜色

border-width 图片边框粗细

box-shadow 块的阴影效果

 

 css高级特效

css中最后一个有效的样式将覆盖前面的有效样式

两个选择器直接连接——交集选择器

两个选择器用逗号连接——并集选择器

两个选择器用空格连接——后代选择器

 

网页布局

div对象本身是一个占据整行的对象

浮动的框可以左右移动，直到其外边缘碰到其包含框或另外一个框的边缘

相对定位（float:left）：让这个元素相对于其起点进行移动top或left的值

绝对定位（position:absolute）:对象浮在网页上方

悬浮定位（position:fixed）:块随着网页滚动条上下移动

overflow:当对象的内容超出其指定的高度和宽度时怎么办

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

分享到：
| 基于项目的软件开发管理
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics