HTML CSS、入门知识点
HTML基本结构
文档类型的说明:<!doctype html public .............>,有三种
<html>的两个属性:dir(文档显示方向),lang(使用的语言)
元素和属性名不区分大小写,大部分属性值不区分大小写,class和id属性的值区分大小写
字符实体: 表示空格,等等
辅助性元素
<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:[email protected]"> 给邮箱发邮件
<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:当对象的内容超出其指定的高度和宽度时怎么办