html&css基础笔记

有道笔记：http://note.youdao.com/noteshare?id=a6d7eab195085655bbfce86665524e35

一 HTML结构标签

HTML基本标签

标题标签 <h1>~<h6>

段落 <p></p>

换行 <br/>

水平线 <hr/>

粗体 <strong></strong>

斜体<em></em>

图像（images）

<img src="相对路径\绝对路径" alt="" width="" height="">

超链接

几个页面之间的跳转 <a href="跳转后页面的路径">热点文本/图像</a>

锚链接

跳转到同一个页面的固定位置

<a href="#me">点击我</a>

<a name="me">跳转到这里来</a>

跳转到不同页面的固定位置

1.html

<a href="2.html#me">点击我</a>

2.html

<a name="me">跳转到我这里来</a>

功能链接

<a href="mailto:邮箱地址">给站长写信</a>

 

特殊字符与HTML注释

<!--注释内容--> 规范意识 *****

 

二 美化 漂亮的衣服 --CSS样式

怎么写？

选择器{

属性：值;

属性: 值；

}

（1）标签选择器：选择器写法和标签是一致的。所有的这些标签会使用统一的样式

如果有个别某些h1不想使用这个样式怎么办？--》肯定不能使用h1这个标签选择器了

如果某些段落p也想使用h1的那个样式怎么办？

(2)类选择器

.red{

color:#ff0000;

}

<h1></h1>

<h1 class="red"></h1>

<h1></h1>

<p></p>

<p class="red"></p>

(3)ID选择器

#green{

color:#00ff00;

}

<p id="green"></p>

怎么用？

(1)内部样式表

<style></style>

(2)内联样式

<p style=""></p>

(3)外部样式表

创建一个外部的css文件:*.css,把样式写在这个文件中

谁想用这个样式，谁就引入这个css文件即可

<link rel="stylesheet" href="样式文件的路径"/> *****

<style>

@import "css/types.css";

</style>

链接式和导入式区别

 

二 如何编写自己样式声明？

******学习方法*********

（1）查看W3CSchool手册，定位到CSS部分

（2）编写CSS样式时，可以借助工具的提示来调错

**********常见问题及错误**************

(1)CSS文件中设置的中文字体类型不起作用，怎么解决?

css文件编码重新设置为utf-8即可

（2）如果页面中既有中文又有英文，怎么修饰字体类型？

font-family:cursive,"微软雅黑";

***请把英文字体类型写在中文字体类型之前

 

h1{

font-size:23px;

color:red;

}

 

字体

font 简写,可以按顺序设置如下属性：

font-style

font-weight

font-size/line-height

font-family

补充讲解：****

span和p不一样

（1）span不会独占一行，p会独占一行

行内元素span，很常用，记住

块级元素p ，很常用的块级元素<div>

（2）块级元素可设置宽高，行级（行内）元素设置宽高不起作用

 

文本

color

text-align

text-indent:(em)

line-height

text-decoration

三 如何设置页面中超链接的样式？

超链接未选中

鼠标定位上去之后

鼠标点下去之后

访问过以后

 

伪类语法

标签名：伪类名{声明；}

a:hover{

color:#B46210;

text-decoration:underline;

}

a:link 未单击访问时超链接样式

a:visited 单击访问后超链接样式

a:hover 鼠标悬浮其上的超链接样式

a:active 鼠标单击未释放的超链接样式

 

常见的开发中的使用：超链接未被访问，鼠标悬浮到超链接上面

a{

color: black;

text-decoration: none;

}

a:hover{

color:red;

text-decoration: underline;

}

鼠标形状

cursor:default/pointer/wait/help/text/crosshair;

span{

　　cursor:pointer;

}

背景属性

背景颜色：

背景图像

图像路径：background-image:url("images/buy.png");

重复方式：background-repeat:no-repeat;

背景定位：background-position:10px center;

简写形式：background:#B70447 url("images/buy.png") no-repeat 10px center;

 

列表

有序列表

<ul>

<li>苹果</li>

<li>香蕉</li>

<li>西瓜</li>

<li>桃子</li>

<li>菠萝</li>

</ul>

无序列表

<ol>

<li>苹果</li>

<li>香蕉</li>

<li>西瓜</li>

<li>桃子</li>

<li>菠萝</li>

</ol>

自定义列表

<dl>

<dt>水果</dt>

<dd>苹果&nbsp香蕉&nbsp西瓜&nbsp桃子&nbsp菠萝</dd>

</dl>

 

列表样式

list-style-type

list-style-image

list-style-position

list-style

 

table表格

tr行

td列

<table border="1px" width="400px">

<tr>

<td colspan="3">三年级五班学员的语文成绩和数学成绩</td>

</tr>

<tr>

<td rowspan="2">白杨</td>

<td>语文</td>

<td>98</td>

</tr>

<tr>

<td>数学</td>

<td>96</td>

</tr>

<tr>

<td rowspan="2">杨晨</td>

<td>语文</td>

<td>92</td>

</tr>

<tr>

<td>数学</td>

<td>100</td>

</tr>

</table>

 

跨行：rowspan="2"

跨列：colspan="2"

 

 

表单

<form action="#" method="post">

<fieldset>

<legend>个人简历</legend>

<input type="hidden" name="info" value="register"/>

<p>用户名：<input type="text" name="username" value="请输入用户名" readonly="readonly"/></p>

<p>密码：<input type="password" name="pwd"/><p>

<p>性别：<input type="radio" name="sex" id="man" checked="checked"/><label for="man">男</label>

<input type="radio" name="sex" id="female"/><label for="female">女</label></p>

<p>爱好：<input type="checkbox" name="hobby" value="1"/>运动

<input type="checkbox" name="hobby" value="2"/>看电影

<input type="checkbox" name="hobby" value="3"/>美食

<input type="checkbox" name="hobby" value="4"/>看书</p>

<p>上传简历：<input type="file"/></p>

<p>所在城市：

<select name="citys" id="citys">

<option value="bj">北京</option>

<option value="sh" selected="selected">上海</option>

<option value="gz">广州</option>

</select>

</p>

<p>个人简介：<br/>

<textarea name="jianjie" id="jianjie" cols="30" rows="10">我喜欢电脑，喜欢前端</textarea>

</p>

</p><input type="submit" value="登录" disabled="disabled"/>

&nbsp;<input type="reset"/></p>

<p><input type="image" src="data:image/login.gif"/></p>

<p><input type="button" value="提交表单"/></p>

</fieldset>

</form>

action属性：表单提交给谁

 

method属性：get/post

get方式提交表单：表单数据能通过地址栏获得，数据提交是不安全的

post方式提交表单

表单数据并不是通过地址栏来传递的，因此表单数据是安全的

 

表单元素

<input type="text" name="fname" value=""/>

 

type:text/password/checkbox/radio/submit/reset/file/image/button

size:元素的宽度，当type为text或password时

maxlength:当type为text或password时,输入的最大字符数

checked:当type为radio或checkbox时，知道按钮是否被选中

 

多行文本域：

<textarea name="showText" id="" cols="30" rows="10"></textarea>

 

表单的高级应用

隐藏域：type="hidden"

只读：readonly="readonly"

禁用：disabled="disabled"

 

<label for="female">女</label>

 

 

css高级选择器

并集选择器：多个选择器通过逗号连接而成，同时声明多个风格相同的样式

p,h1{color:red;}

 

交集选择器：由两个选择器连接构成，选中二者范围的交集，两个选择器之间不能有空格，

第一个选择器必须是标签选择器，第二个选择器是类选择器或者ID选择器

h1.first{color:yellow}

 

后代选择器：外层的选择器写在前面，内层的选择器写在后面，之间用空格分离，

标签嵌套时，内层的标签成为外层标签的后代

h1 span{color:green;}

 

子元素选择器：通过>连接在一起而成，仅作用于子元素

h1>span{color:green;}

 

属性选择器：选取带有指定属性的元素，或者取带有指定属性和值的元素

input[type="password"]{

border:1px solid red;

}

 

<body>

<p>段落</p>

<h1 class="first">this <span>is </span><span>the </span>first</h1>

<span>yyyyyy</span>

<h1>this is <em><span>the </span></em>second</h1>

<p class="first">段落</p>

<p>用户名：<input type="text"/></p>

<p>密码：<input type="password"/></p>

<p>重复密码：<input type="password"/></p>

</body>

 

 

盒子模型

 

边框 border

 

边框样式 border-style

边框颜色 border-color

边框粗细 border-width

 

border-top-style: solid;

border-right-style:dashed ;

border-bottom-style: double;

border-left-style: dotted;

/*上下 左右*/

/*border-style:dashed double;*/

/*上 右 下 左*/

border-style:solid dashed double dotted;

 

border:5px solid red;

border-top:5px dotted blue;

 

外边距 margin

margin-top

margin-right

margin-bottom

margin-left

margin

 

margin-top:1px;

margin-right:2px;

margin-bottom:2px;

margin-left:1px;

margin:3px 5px 7px 4px;

margin:3px 5px;

margin:8px;

 

内边距 padding

 

padding-top

padding-right

padding-bottom

padding-left

padding

 

 

box-sizing属性

content-box 盒子的实际宽度和高度仅应用于元素内容，不包括内边距和边框，和原来计算方式一样

border-box 盒子的实际高度和宽度包括元素内容、边框和内边距，总宽度和高度不变

box first box-sizingborder-box-moz-box-sizingborder-box/*Firefox*/

-webkit-box-sizingborder-box/*Ssfari*/

padding20pxbox second box-sizingcontent-box-moz-box-sizingcontent-box/*Firefox*/

-webkit-box-sizingcontent-box/*Ssfari*/

padding20px

块级元素 <h1>...<h6> <div> <p>

 

内联（行内）元素 <a> <img> <span> <strong>...

 

display属性

控制元素的显示和隐藏

块级元素与行内元素的转变

 

none:设置元素不会被显示

inline:元素会被显示为内联元素

block:元素会被显示为块级元素

inline-block:行内块元素，不会换行，但是可以设置宽高

 

 

常见的网页布局

上下结构

上中下结构

上左右下结构：1-2-1结构

上左中右下机构：1-3-1结构

 

浮动 float属性

left 元素向左浮动

right 元素向右浮动

none 默认值，元素不浮动

 

clear属性

left:在左侧不允许浮动元素

right:在右侧不允许浮动元素

both:在左、右两侧不允许浮动元素

none:默认值。允许浮动元素出现在两侧

 

 

如何让父容器随子元素自适应高度：

1.在父容器中添加一个空的子元素

.clear{

clear:both;

}

<div class="clear"></div>

2.给父容器加一个样式

overflow:hidden;

 

overflow属性

visible:默认值。内容不会被修剪，会呈现在盒子之外

hidden:内容会被修剪，并且其余内容是不可见的

scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余内容

 

position属性

static:默认值，没有定位

relative：相对定位

absolute：绝对定位

fixed:固定定位

 

relative:相对自身原来位置进行偏移

偏移设置：top、left、right、bottom

#first{

position:relative;

top:-20px;

left:20px;

}

设置相对定位的盒子会相对它原来的位置，通过制定偏移，达到新的位置

设置了相对定位的网页元素，无论是在标准流中还是浮动流中，都不会对它的父级元素和相邻元素有任何影响，

它只针对自身原来的位置进行偏移

 

absolute属性值

偏移设置：top、left、right、bottom

使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素”为基准进行偏移。

如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位

绝对定位的元素从标准文档流中脱离，这意味着它们对其他元素的定位不会造成影响

 

z-index属性

调整元素定位时重叠层的上下位置

z-index属性值：整数，默认值为0

设置了position属性时，z-index属性可以

设置各元素之间的重叠高低关系

z-index值大的层位于其值小的层上方