本文详细介绍了HTML和CSS的基础知识，包括代码格式、快捷键、常用标签、图片格式等内容，并深入探讨了如何创建和使用CSS样式表。
HTML（HyperText Markup Languag）
1.代码格式：
<!doctype html> // html的声明
<html lang="en"> // html的编码语言
<head> // html的网页头部
<meta charset="UTF-8"> // html的编码方式
<title>Document</title> // html的网页头部标题
<link rel="stylesheet" href="#"> // html的css链接
<link rel="icon" href="#"> // html的网页头部图标
</head>
<body>
<div class=”header wid”> </div>
<div class=”nav wid”> </div>
<div class=”banner wid”> </div>
<div class=”content wid”> </div>
<div class=”footer wid”> </div>
</body>
</html>
2.快捷键
删除 shift+delete | 剪切 CTRL+X | 复制 CTRL+C | 粘贴 CTRL+V |
新建 CTRL+N | 打开 CTRL+O | 关闭 CTRL+W | 保存 CTRL+S |
撤销 CTRL+ ALT + Z | 自由变换 CTRL+T | 放大 CTRL++ | 缩小 CTRL+- |
取消选区 CTRL+D | 标尺 CTRL+R | 临时使用抓手工具 【空格】 | 显示/隐藏“信息”面板 【F8】 |
注释 CTRL+/ | 基本格式 !+TAB | 打印 CTRL+P |
|
3.常见标签
<br>强制换行；<hr>水平线； <pre>保存html中的原格式</pre>；<p>段落标签</p>；
<sup>上标</sup>；<sub>下标</sub> <h1>标题标签</h1>... <h6>标题标签</h6>
<b>加粗</b>；<strong>强调加粗</strong> <i>倾斜</i>；<em>强调倾斜</em>
<u>下划线</u>；<ins>下划线</ins> <s>删除线</s>
<font>文字标签</font> <p>段落标签</p> <span>单行文本标签</span>
4.网页图片格式
① gif：颜色最多只有256种，支持透明、动画、压缩有损
② jpg/jpeg：颜色丰富，文件小，不支持透明、动画、压缩有损，常用在大图上
③ png：文件大，支持透明，不支持动画，压缩无损。
5.特殊符号
©版权© | ™商标™ | ®注册® | &time;关闭X | 空格 |
&and符号 | <小于号 | >大于号 | ←左箭头← | →右箭头→ |
6.表示颜色的单词
Black黑 | White白 | Red红 | Green绿 | Blue蓝 | Pink粉红 |
Violet紫 | Brown棕 | Coffer咖啡色 | Silver银白 | Wheat土黄 | Orange橙 |
7.图片插入及路径
<img src=”URL” alt=”提示信息” title=”介绍信息” border=”1” width=“20px” height=“20px”>
绝对路径：图像和HTML所在的位置无关：①网络路径：http://www.baidu.com....②本地路径：file://c/Users/lenove.....
相对路径：目标文件与当前文件所在位置的关系：
①当前文件与目标文件在同一文件夹下，路径为目标文件名+扩展名，如：1.jpg
②当前文件与目标文件的文件夹在同一文件夹下，路径为目标文件夹名/+文件名+扩展名，如：images/1.jpg
③当前文件的文件夹与目标文件在同一文件夹下，路径为../+文件名+扩展名，如：../1.jpg
④当前文件的文件夹与目标文件的文件夹在同一文件夹下，路径为../+文件名夹名/+文件名+扩展名，如：../images/1.jpg
8.链接
<a href=”#” target=”_self/_blank/_top/_parent”>在原窗口/新窗口/顶层框架/父级框架打开
<head> <base target=”_blank”> </head>所有链接在新窗口打开
锚点 <h1 name=”totop”>...</h1> ... <a href=”#totop”>...</a>
9.列表
①无序列表 <ul> <li> </li> <li> </li> <li> </li></ul>
②有序列表 <ol> <li> </li> <li> </li> <li> </li></ol>
③自定义列表 <dl><dt></dt> <dd></dd> <dd></dt> </dl
表格 <table cellspacing="2" border="1" cellspadding="2">
<tr> <td colspan="2"></td> <td rowspan="2"></td> </tr>
<tr> <td></td> <td></td> </tr>
</table>>
11.表单
<form action=”#” method=”post/get” target=”_self/_blank/_top/_parent” enctype=”multipart/form-date”>
①<input type=”text/password/tel/email/number/url/date/search” value=”请输入” placeholder=”” name=””>
文本输入框/密码输入框/电话号码输入框/邮箱输入框/数字输入框/网址输入框/日期输入框/搜索框
<input type=”text” disabled>文本框禁用，document.getElementById("kit").disabled = false;取消禁用
②<input type=”button/submit/reset” value=”普通/提交/重置按钮”> //<button type=”button/submit/reset”>
③<input type=”img” src=”images/1.png” alt=” ” title=”” >图像按钮(效果和submit一致)
④上传文件 <input type=”file”>
⑤多行文本 <textarea cols=”100” rows=”100”>多行文本</textarea> //cols/rows多行文本的宽度/高度
⑥单选 <label>单选</label>
<input type=”radio” name=”a1 “ checked=”checked”>男 //checked 默认选中
<input type=”radio” name=”a1”>女 //name值相同时才能只选择一个
⑦多选 <label>多选</label>
<input type=”checkbox” checked=”checked”>A //checked 默认选中
<input type=”checkbox” >B
<input type=”checkbox” >C
⑧下拉菜单 <select multiple=”multiple”>下拉菜单</select> (按住Ctrl键可多选)
< optgroup>年</optgroup> <option>2017</option> <option>2016</option>...//optgroup 下拉菜单分类
< optgroup>月</optgroup> <option>12</option> <option>11</option>...
< optgroup>日</optgroup> <option>31</option> <option>30</option>...
</form>
12.<marquee>活动文字：属性1：bahavior:scroll/slide/alternate(从右到左移动/从右到左移动/两边移动)
属性2：direction:left/right/up/down(向左/右/上/下 移动)
属性3：bgcolor背景颜色(英文/十六进制)，height高度(像素/百分比)，width宽度(像素/百分比)
属性4:scrollamount播放速度(默认为6)，行内样式设置 scrollamount="10"
vspace/hspance上下/左右两侧间距(像素)
13.框架集 <frameset set rows="100,*" bordercolor="red" frameborder="2" framespacing="10">
<frame src="http://www.baidu.com">//框架上部的页面
<frameset cols="200,*">
<frame src="1.html"> //框架左边的页面 //主页面中要去掉body；
<frame src="2.html"> //框架右边的页面//rows=”50,*,50”;个数代表框架分的部分
</frameset> //rows=”50,*,50”;*代表页面剩余全部
</frameset>
CSS（Cascading Style sheets）
1.创建css
①行内样式表：例 <p style=”color:red”>
②内联(内嵌)样式表：例 <head> <style>p{color:res;} </style> </head> //写在<head>中
③外部样式表例 HTML中：<head><link real=”stylesheet” href=”style.css”></head> //写在<head>中
CSS 中：@cahrset “utf-8”; *{margin: 0;padding: 0;}...
④导入样式表 例 <head> <style>@import url(“style.css”) </style> </head> //写在<head>中
2.选择器
①标记选择器 例：p{color:#f00;}
②ID选择器 例：HTML中：<div id=”box”>...</div> CSS中：#box{colo:red;}
③类别选择器 例：HTML中：<div class=”box”>...</div> CSS中：.box{colo:red;}
④伪类选择器 a:link{..}默认 a:visited{..}点击后 a:hover{..}滑过 a:active{..}点击时 //顺序不能改变
⑤并集选择器 例：h1,h2,h3{color:prink;}
⑥后代选择器 例 ul li{float:left;}
⑦相邻选择器 例 h3+p{background:#000;} //控制h3后平级的一个p标签
⑧类型选择器 例 input[type=”button”]{color:#fff;} //控制同个选择器的不同类型
⑨否定选择器 例 input:not([type=”button”]){color:#fff;}
⑩(结构类)伪劣选择器 ul li:nth-child(n){width:100px;} //ul的下一级只能有li
⑪首行/首字母 例 p:first-line/letter //对p的首行/首字母控制
优先级：id>class>标签>全局 (标签选择器的一种)派生选择器(包含选择器)：html div {} p a{}
权重值：Style：1000；Id：100；Class：10；标签：（p）1；全局（*）：0；
3属性及属性值
①color字体颜色：英文/十六进制表达 例：red/#00ff00
②font-size设置字体大小:(1)用像素点表示:font-size:12px;
(2):用英文表示:font-size:xx-small/x-small/small/medium/large/x-large/xx-large;
(3):用%表示:父元素p{font-size:12px;} 子元素span{font-size:50%;}
③font-family设置中文字体:simSum/SimHei/Microsoft YaHei宋体/黑体/微软雅黑；
ArialTmpact英文一般/特殊字体;
④font-weight字体加粗：normal（100-500）(正常字体)，bold(加粗)（600-900），light（细）
⑤font-style 字体倾斜：italic倾斜normal普通字体
⑥Text-decoration文本修饰，none无， underline文本下的一条线 overline文本上的一条线，
line-through穿过文本的一条线， blink定义闪烁的文本(不支持ie6)
⑦对齐方式:(1)水平对齐:text-align:left/center/right; (2)竖直对齐:vertical:top/middle/bottom
⑧文本缩进：text-indent:2em/24px; //首行缩进2个字符/20像素
⑨文本行高：line-height:2em/24px; //行高为2个字符/20像素.行高=标签高度时.文字居中显示
⑩背景属性background:#f00 url(images/1.png) no-repeat 0px 0px/20px 20px: //透明度 opacity:0.5;
background: url(images/1.png) no-repeat top left,url(images/2.png) no-repeat top right;多个背景
⑪列表案例符号的样式 list-style:disc/circle/square/none; 实心圆/空心圆/方块/不使用任何标号
列表项标志的图像:list-style-image:none/url(1.png);
⑫text-transform控制大小写capitalize每个单词以大写开头，uppercase/towercase仅有大/小写字母
⑬letter-spacing:10px;字符间距，word-spacing:20px;单词间距，（normal正常）
⑭设置边框 例：border:1px solid #0f0;solid/dashed/dotted/double 实线/虚线/点线/双线
groove，ridge，inset，outset)3D边框);border-top-left-rafius:8px;
4.盒子模型
内容content、内填充padding、边框border、外边距margin
放在一起写: 一个值/两个值/三个值/四个值 ：上下左右/上下、左右/上、左右、下/上、右、下、左
单个写：例 margin-left:10px; padding-right:10px;
5.浮动与定位
①浮动 float:left/right; 左/右浮动
清除浮动 ：左右两边都要给浮动，否则ie8以下版本会呈梯形显示
(1)给父元素设置高度
(2)最后一个浮动后面加<div class=”clear”></div>. Css中加.clear{clear:both;}.
(3)给父元素取一个名字，一般为clearfix；
Css中.clearfix:after{content:””; height:0px;display:block;visibility:hidden;clear:both;} .clearfix{*zoom:1;}
②定位 偏移量：left right top bottom （可以为正、为负、为百分比）
（1）相对定位 position:relative;相对于父元素定位，元素仍占据先前位置
（2）绝对定位 position:absolute;相对于body定位，元素不占据空间:
更改参考点：在参考点中设置position:relative;
（3）固定定位（广告位） position:fixed; 定位层 z-indes:100;定义层叠顺序
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
