学习前端过程

HTML学习

基础名词

• 元素：由一个开始标签、内容、其他元素及一个结束标签组成。
• 标签：< html >< /html>、< body>< /body>…
• 属性：<元素 属性 = “值”>内容< /元素>

<img src = "C:/Documents and Settings/test.jpg"/>
<!--相当于-->
<img src = C:/Documents%20and%20Settings/test.jpg/>

     ①class：类，同一类使用相同的CSS样式规则，一个元素可以不止属于一个类，多个类名用空格隔开。
     ②id：唯一性的标识符，第一个字符必须是字母，不能使用除_或-以外的字符。
     ③style：应避免使用，因为它把内容和表现混在了一起。
     ④title：为元素提供一个文本标题。
     ⑤dir：设置阅读方向，一般不用。
     ⑥lang：指定语言。
     ⑦accesskey：为元素分配一个快捷键。
     ⑧tabIndex：指定元素在使用制表键遍历链接和表单控件时所形成的访问顺序中的位置。

• 注释:

<!-- balabalabala -->

各种标签

• base标签为文档设置基础URL
  用href属性指定基础URL

<base href = "index.html"/>

• 用link标签定义文档关系链接
  
  • link标签最常用于把外部样式链接进文档，只能在HTL文档的头部定义。
  • 使用link标签定义浏览器标题小图标

<link rel = "icon" href = "小图标URL"/>

• type属性：
  ①用于外部样式表的text/css
  ②用于JavaScript文件的text/javascript
  ③用于GIF的image/gif

<link rel = "stylesheet" type = "text/css" href = "main.css">

• 用script标签添加脚本程序

<script type = "text/jacascript"></script>

• 用meta标签为文档定义元数据(对网页显示以及网站排名很重要)
  常用：

name属性值	示例	作用
keywords	ccontent=”HTML,CSS,Javascript”	描述文档的关键字
Description	content=”描述”	简单说明

• 标题h1、h2、h3、h4、h5和h6一般包含在body标记内
• align 属性，改变对齐方式。

• font标记可以改变文本中字符的字体、字号、颜色等

  • face:“宋体”、“黑体”、“隶书”、“幼圆”
  • size:字号
  • color:颜色

<i></i> <em></em> <cite></cite> <!---斜体--->
<b></b> <strong></strong> <!---粗体--->
<sup></sup> <sub></sub> <!---上标、下标--->

• br 换行
• center 居中标记
• hr 加入水平分割线

<hr width = "140" align = "right">

• 建立无序列表
  
  • ul,每个列表项要用li

<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>

效果：

• a
• b
• c

---

• ul的type属性：disc（实心圆）、circle（空心圆）、square（实心方块）
• 建立有序列表
  
  • ol的type属性：1、A、i
  • ol的start属性：e.g. start = “5”
• 建立定义列表

<dl>
<dt>a</dt>
<dd>bbb</d>
</dl>

• 用a元素添加超链接

<a href = "http://www.baidu.com">百度一下</a>

• 超链接在本质上属于一个网页的一部分，是允许同其他网站或站点进行连接的元素。
• 连接路径URL
  
  • 绝对URL：
    
    • http://www.baidu.com/index.php
    • 使用锚链接到同一个网页的不同部分

<a href = "#html">HTML概念</a><br/>
<a id = "html"></a>

• 在网页中插入图像标记

<img src = "panda.jpg" alt = "这是熊猫" title = "熊猫"/>

• width 和 height 属性改变图片的大小进行放缩
• border 设置图片的边框
• 用图片代替文本做超链接

<a href = "other.html"><img src = "panda.jpg"/></a>

• 表格
  
  • tr定义行、td定义单元格
  • 合并单元格：
    ①左右②上下

<td colspan = "2" >aaaa</td>

---

<td rowspan = "2">bbbb</td>

• 相邻单元格边线的距离：cellspacing
  
  • 单元格边线与内容之间的距离：cellpadding
  • 为表而过加标题：caption

HTML表单

• form属性：
  
  • method
    
    • ①get 服务器
    • ②post邮件
    • action
    • ①输入Web服务器中表单处理程序或脚本的地址
    • ②mailto：电子邮件地址
    • name
    • 控件
    • input标签创建表单控件

type	注意
text	maxlength、value
textarea	maxlength、value、rows行数、cols宽度、warp是否自动换行
password	maxlength、value
checkbox	checked
radio	单选通过name属性区分
submit
reset
file	浏览
hidden
image	src

• select（创建列表框）和option（创建选项）创建选择列表
  
  • select属性：name、size（定义：显示数量，不定义为下拉菜单、multiple（允许多选）
  • option属性：value、selected

• frameset和frame标签创建框架

  • frameset属性：
    
    • cols属性分成若干列（frameset cols = “30%，*”）
    • rows属性分若干行（frameset rows =“30%，*”）

<a href = " " target = "_blank" >新窗口</a>

使用windows media player嵌入视频

<object classid = "" width = "" height = "">
<param name = "type" value = "video/x-ms-wmv"/>
<param name = "URL" value = "flower.wmv"/>
<param name = "uiMode" value = "full"/>
<param name = "autoStart" value = "true"/>
</object>

CSS学习

HTML中调用CSS

选择器	例	CSS例
标签选择器	p	p{ color: }
类选择器	class=”blue”	.blue{ color: }
id选择器	id=”red”	red{ color:}

• 方式：
  
  • ①内联式CSS样式
  • ②内嵌式CSS样式
  • ③链接式CSS样式
  • ④导入外部CSS样式

<p style = font-size:10px;color:red; >....</p><!---①--->
<style></style><!---②--->
<link rel = "stylesheet" type = "text/css" hrel = "color.css"/><!---③--->
<style>@import url(color.css);</style><!---④--->

优先关系：①>②>④>③

样式的参数单位

长度单位

CSS相对长度单位	说明
em	元素的字体高度
ex	字母x的高度
px	像素
%	百分比

CSS绝对长度单位	说明
in	英寸（1英寸=2.54厘米）
cm	厘米
mm	毫米
pt	点（1点=1/72英寸）
pc	皮卡（1皮卡=12点）

颜色单位

• color:rgb(204,102,255)
• color:rgb(80%,40%,100%)
• color:#CC66FF

CSS文字效果

• 文字的字体 font-family
• 文字的倾斜效果 font-style：normal/oblige/italic
• 文字的粗细效果 font-weight：normal/bold/bolder/lighter/inherit/100~900
• 设置网页文字间间距
  
  • 字母之间距离：letter-spacing
  • 单词间距离：word-spacing
• 设置网页文字行间高 line-height
• 设置网页文字段落间距
  
  • 也可用于图片的margin属性
  • 参数：
    
    • 上、右、下、左
    • 上、右左、下
    • 上下、右左
    • 上右下左
• 控制文本的水平对齐方式 text-align：left/center/right
  
  • justify（控制英文文本两端对齐）
• 设置文本的垂直对齐方式 vertical-align：top/bottom/middle
• 文字与背景的颜色

body{background-image:url{};}
h1{background-color:#0F0;}

• 英文大小写
  
  • ①text-transform：uppercase； 全大写
  • ②text-transform：capitalize； 首字母大写
  • ③text-transform：lowercase；全小写
• 文字大小 font-size
• 文字装饰效果 text-decoration：underline/line-through/overline
• 段落首行缩进 text-indent：35px；

CSS图片效果

• 图片边框属性
  
  • border-width：thin/medium/thick/length
  • border-style：none/hidden/dotted(点状线)/dashed(虚线)/solid(实线)/double(双线)/groove(3D凹槽)/ridge
  • border-color：同color
  • 简写：border：dotted 3px #C0F;
  • border-image：url()
  • border-radius：20px
  • border-color：skyblue
  • box-shadow：阴影偏移值、垂直偏移值、阴影模糊值、阴影颜色
• 图片缩放：

.pic{ width:200px;}

• 文字环绕图片 float：left/right
• 背景图片平铺：background-repeat：repeat/no-repeat/round/space
• 设置背景图像的位置：background-position：center/left/right/top/bottom
• 设置背景图片位置固定：background-attachment：fixed/scroll/local
  
  • fixed：相对于窗体固定
  • scroll：相对于元素固定
  • local：相对于元素内容固定
• 多重定义某项样式，最后一个生效

DIV

• DIV是个容器
• position定位
  
  • static：静态
  • relative：相对 left/right/top/bottom 在某边（left左边）创建空间
  • absolute：绝对 width/height/left/right/top/bottom和margin/padding/border
  • fixed：悬浮，固定在某位
  • inherit：从上级元素继承
  • 注：margin是盒子的外边距，即盒子与盒子之间的距离。padding是内边距，是盒子的边与盒子内部元素的距离
• 采用定位和负值空白边使设计居中

#box{
width:720px;
position:relative;
left:50%;
argin-left:-360px;
}

学习前端中出现的问题

如何让背景图片自适应屏幕大小

在网络查询的过程中，提出了很多的办法，但是效果都不太理想。最后我选择了最简单的一种。

    body{
        background: url(background.jpg);
        background-size: cover;
    }

---

但是要注意的是图片的大小最好设置为宽度为1920，高度991左右。因为cover只适应了宽度，如果太高则会出现图片被剪裁的情况出现。

---

——L