HTML+CSS学习笔记

1.文档格式化

1.1 文字格式化

(1)添加标准文字,可治愈<body>与</body>标记之间。

(2)改变文字属性。可用<font>标记。

(3)格式化文字。物理的和逻辑的。物理标记包括用于指定

粗体的<b>标记,<i>斜体标记。逻辑标记,逻辑元素如

<strong>标记和<em>标记。具体事例见HTML+css应用。

(4)特殊字符。有时需要在HTML文档中加入一些特殊的字符

,如版权符号“”、”<”等。这些字符通常不能被浏览器直

接识别,或者是浏览器的保留字符(如“<”符号用于标记)

。通过使用一系列转换字符串来表示它们。如空格用“&nbsp

”来表示。“&”符号表示特殊符号的开始,“;”符号表示

特殊字符的结束。两字符中间所代表的特殊字符英文含义的缩

写。

1.2超链接和锚站。

线性文本和非线性文本。线性信息指按照直线发展的信息。从

某点开始,按照某一路径,到另外一点结束。线性文本的上下

文连贯。非线性文本中,杂志和字典是非线性文本的典型范例

(1) 链接

超文本链接:连接不同超文本文件的方式称为超文本链接。

(2) 锚站元素,用<a>标记表示。

<a href=”url”>超链接文字</a>

命名锚站:用于创建指向同一页面中指定位置的链接。以便直

接跳到此位置。命名锚站也叫做“书签”。

命名锚站的一般语法为:<a name=”书签名”>锚站A</a>

找到锚站:<a href=”#书签名”>单击此处将使浏览器跳到锚

站A处</a>

1.3段落格式化

(1)段落标记

<p> </p>:可用align属性指定段落的对齐方式。如:<p

aligh=”center”><b>居中对齐段落</b></p>

<div>、<span>、<address>、<blockquote>

其中<div>和<span>标记都可以将文档的结构分为一部分或多

部分。分成几个逻辑部分后,结合样式表可分别控制它们的显

示效果。

(2)预格式化段落标记

<pre>标记,保留录入原样显示。

2.使用图像和背景

2.1 在Web页中添加图像。

<img src=”图像文件url” alt=“替换文本”>

2.2 图片热区的链接

<map name=”FPMap”>

<area href=http://www.cumt.edu.cn shape=”rect”

coords=”10,32,333,372”>

</map>

3.表格

表格的基本语法:<table></table> 定义表格

<caption></caption>定义标题

<tr> 定义表行

<th> 定义表头

<td> 定义表元(表格的具体数据)

4.表单

表单是前台页面和后台处理程序(ASP、JSP、CGI等)的接口

4.1 <form>标签

语法格式为:<form></form> 属性有:name属性;method属

性(Get方法、Post方法);action属性

(action=“accept.asp”表明表单中的内容提交给后台处理

程序accept.asp来处理);enctype属性(用来设置表单中信

息的编码方式。取值有unknown与enctype,默认为unknown。

需要上传文件时,需要设为enctype=”multipart/form-data

”)

4.2 <input>标签

属性:name;value;maxlength;size;type(text、password、

file、submit、reset、checkbox复选框、radio单选框)

4.3<textarea>标签

<textarea></textarea>

属性:name、cols(多行文本输入框的列数)、rows(设置多

行文本的行数)、wrap(设置多行文本框中的文本超出文本列

宽时是否换行,取值有virtual换行、physical换行、off不换

行,默认为换行)

4.4<select>标签与<option>标签

主要用来定义列表框。语法格式为:<select></select>.

<select>标签必须与<option>标签配套使用,后者用于定义列

表框的各个选项。<option>标签可以单独使用,也可成对使用

<select>标签属性:name、size

<option>标签属性:value、selected

5.框架

使用Frames结构设计的HTML文件,能够将整个窗口分为几个独

立的小窗口,每一个窗口可分别载入到不同的文件,每个窗口

是可以互相沟通的。

<frameset>

<frame src=”url”>

<frame src=”url”>

</frameset>

5.1各窗口的尺寸设置

将窗口分割为几块,横向分窗口用ROWS属性,纵向分窗口用

COLS属性,每一块的大小由这两个属性的值来实现。

<frameset cols=#> <frameset cols=”100,200,300”>

<frameset cols=”100,200,*”> <frameset

cols=”100,*,*”>

<frameset cols=”*,*,*”>

<frameset rows=#> <frameset rows=”10%,20%,70%”>

(1) 纵向排列多个窗口

<framesetcols=“30%,20%,50%”>
  <frame src="A.html">
  <frame src="B.html">
  <frame src="C.html">
</frameset>

(2) 横向排列多个窗口

<framesetrows=25%,25%,50%>
  <frame src="A.html">
  <frame src="B.html">
  <frame src="C.html">
</frameset>

<Frameset>标签是可以嵌套使用的,也就是说,可以将其中某

一个或某几个子窗口再划分为若干个更小的窗口。

<html>

<frameset cols="30%,90,*">

<framesrc="td1.html" name=cont>

<framesetrows="120,*">

<frame src="Tulip.jpg">

<frame src="蒲公英的约定.mp3">

</frameset>

<framesrc="td2.html" name=another>

</frameset>

</html>

5.2 各窗口间相互操作

由Frames分出来的几个窗口的内容并不是静止不变的,往往一

个窗口的内容随着另一个窗口的要求而不断变化,这就提高了

Frames的利用价值。为了完成各窗口之间的相互操作,我们必

须为每一个窗口起一个名字,这个名字用属性Name来定义。

<framesrc=url name=“窗口名”>

例如:<frame src="a.html" name=“left”>

定义了窗口名称,还应该有Target来配合使用,Target属性指

定了所链接的文件出现在哪一窗口。Target的值可以是name定

义的名称,也可以是以下四类值:

<a href=urltarget=_blank>  显示一个新窗口

<a href=urltarget=_self>   显示在同一个窗口

<a href=urltarget=_parent>  显示在Frameset的前一份文

件的窗口

<a href=urltarget=_top>   显示在整个浏览器窗口

时间: 10-24

HTML+CSS学习笔记的相关文章

CSS学习笔记09 简单理解BFC

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>BFC</title> 6 <style type="text/css"> 7 .div1 {background-color: #FCE38A; width: 200px; height: 100px;}

css 学习笔记 一

 css学习笔记1 1.选择特定元素的选择符: 上下文选择符 标签1 标签2 {声明}      其中标签2是要选择的目标,而只有在标签1是其祖先元素(不一定是父元素)的情况下才会被选中.     css代码: body代码: 理解:section标签 article标签就属于上下文的关系,即article为section的后代,只有应用了section的样式,才能应用article的样式.注意:继承关系中的空格问题,有空格的表示祖先与后代的关系,css写法,body的代码为,说明页面样式表文件

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

html+css学习笔记 3[浮动]

inline-block/float(浮动) 回顾:inline-block 特性:      1.块在一排显示 2.内联支持宽高 3.默认内容撑开宽度 4.标签之间的换行间隙被解析(问题) 5.ie6 ie7不支持块属性标签的inline-block(问题) float浮动: 1.块在一排显示     2.内联支持宽高     3.默认内容撑开宽度      4.脱离文档流     5.提升层级半层 文本流 float:left | right | none | inherit; 文档流是文档

html+css学习笔记 2[标签]

img标签/a标签 <img src="图片地址" alt="图片名"/>  图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用:     a标签: 链接/下载/锚点 href地址等于标签id     target 链接打开方式     blank  新窗口     self     当前窗口     <base target="_blank"/> 定义页面链接默认打开方式   常见标签 div        

CSS学习笔记总结和技巧

跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!! 如图:页面下拉还有侧栏,中间内容等. 可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示. 收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面.就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀.

CSS学习笔记:溢出文本省略(text-overflow)

原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文本溢出时显示省略标记,省略标记插入的位置是最后一个字符. ellipsis-word:表示当对象文本溢出时显示省略标记,省略标记插入的位置是最后一个词(word). 实际上,text-overflow属性仅用于决定当文本溢出时是否显示省略标记,并不具备样式定义的功能,要实现溢出时产生省略号的效果,应

html+css学习笔记 5[表格、表单]

表格 -- 默认样式重置 表格标签:     table 表格     thead 表格头     tbody 表格主体     tfoot 表格尾     tr 表格行     th 元素定义表头     td 元素定义表格单元 表格样式重置 table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充   单元格合并 rowspan  属性规定单元格可横跨的行数.     <td rowspan="2"

html+css学习笔记 4[定位]

如何让图1中的div2移动到如图2上的位置: 思路:哪些css命令能够影响盒子显示的位置呢? relative相对定位/定位偏移量 position:relative;  相对定位         a.不影响元素本身的特性: b.不使元素脱离文档流: c.如果没有定位偏移量,对元素本身没有任何影响: 定位元素位置控制         top/right/bottom/left  定位元素偏移量. absolute绝对定位/定位层级 osition:absolute;  绝对定位 a.使元素完全脱

css学习笔记.1--以校园资讯平台为例

#id .class 这两个是最先要记住的..id是<a id="Sth">中的Sth,class是<ul class="Oth">中的Oth,挺好记得 margin 老记成marign...看来是align害的,介绍是"层的边框以外留的空白"-以下图片来自 这里 如图: 就是说最外层的是margin,最内层的是padding,是盒模型{主要定义四个区域:内容(content).边框距(padding).边界(border