html新手教程

html新手教程

一.谈谈网页制作

1.制作一个静态网页的步骤为：确认目标-收集素材-网页布局-代码编写
2.网页布局：浏览器是根据.html文档的顺序逐行实现代码。
常见网页布局方式是将网页分成一块一块的区域组合而成。
常见块元素有：p div ul-li h1 h1…等，块元素独占一行。
常见内联元素：a img span等，内联元素里面不允许套块元素。

二.分区元素

1.div: div是较为重要的分区元素，用于块显示，使用div可以实现大部分网页布局。
div如果没有给宽高，则默认为100%，高度根据内容决定；
占用空间=宽高+内边距+边框+外边距；
可将div想象成一个盒子。

三.选择器

1.id选择器：
如 #main{color:#ffffff;} /css样式/

nable

2.类选择器： 如 .lei{color:#333;}/*font.lei{}则只能在font这一种标记上有效*/

<a class="lei">nabel</a>

3.属性选择器：
如：a[target]
{backgroundcolor:red;}
表示有target属性的背景颜色为红色
4.反向选择器：
如 :not§
{color:red;}
表示除了

标记，其他都用红色。

四.定位

1.浮动：float
浮动相当于元素飘在空中
两元素需要都浮动才能并排
如：#div1{
float:left;}
#div2{
float:right;}
2.定位：position
绝对定位：absolute(以用position定位的上一层组件的左上角为原点进行定位）
相对定位：relative(以组件本身的左上角为远点进行定位)
3.层叠：z-index
在position定位为前提才可以使用
如：z-index:1;表示第一层
z-index:2;表示第二层

五.CSS三种使用方法

1.内嵌（又称行内声明）用法如下：

<img style="margin-left: 84px;margin-top: 25px" src="logo.png">

将style写在body内
2.内联 用法如下：

    <style>
        body{background-color: blue;}
        p{font-family: Arial;font-size: 10px;background-color: #fff;}
    </style>

将style写在head内
3.外部样式表：这种方法在建立大型网站时更好使用，便于维护，方法如下：
在html同文件夹内建立一个txt文本，将后缀改为css，代码如下：

        body{background-color: blue;}
        p{font-family: Arial;font-size: 10px;background-color: #fff;}

即省去内联的代码style即可
4.还有一种导入样式，同样写在外部文本，与3相似。

常用属性

1输入框：声明如下

input type还有"text submit…"等几类，常见的用法如百度的输入框用的是text.
2.label：为输入框元素定义标注

<label for="user">用户名：</label>

<input type="text" name="username" id="user">

当用户点击时，label标签中的"用户名"时，文本域会处于聚焦状态
3.音乐，视频
音乐`<src=“1.ogg” type=“audio/ogg”/>
也可以
一般需要多准备几个音乐文件，因有些格式某些浏览器不能播放，代码如下

<audio controls="controls">
<source src="1.ogg" type="audio/ogg"/>
<source src="2.mp3" type="audio/mp3"/>
你的浏览器不支持
</audio>

//当浏览器找不到source制定的文件或找不到音频文件则播放第二个source指定的mp3音乐

flash动画：

<embed src="movie.swf" width="100" height="100">

五.常见问题

1.乱码：出现这种问题主要是因为编码方式

<meta charset="UTF-8">

表示国际通用编码，注意保存时也要存为UTH-8编码方式
2.图片无法显示：首先检查图片命名跟源文件图片名字是否一致
再检查图片是否在该路径文件夹内
如要引用html文件的上层文件夹内的图片：

<img src="../flower/b.gif">

flower表示上层文件夹名，…/表示上层，/…/表示上上层，注意，是2个点