day4

复习

表单:表单是为数据而存在的!

<form  action=”abc.php”  method=”post”>

<input type=”text”  name=”n1” value=”初始文字”  size=”10”  maxlength=”15” readonly=”readonly” />

<input type=”password” name=”n2” />

<input type=”radio” name=”n3”  value=”1” checked=”checked” /><input type=”radio” name=”n3”  value=”2” />

<input type=”checkbox” name=”n4”  value=”1” checked=”checked” /><input type=” checkbox” name=”n4”  value=”2” />

<input type=”file”  name=”n5” />

<input type=”submit” name=”n6” value=”提交” />

<input type=”reset” name=”n7” value=”重置” />

<input type=”button” name=”n8” value=”按钮” />

<input type=”image” name=”n9” src=”图片地址url” />

<input type=”hidden”  name=”n10 />

<select name=”n11” size=”行数”  multiple=”multiple” >

<option  value=”1” selected=”selected” >文字1</option>

</select>

<textarea  name=”n12”  rows=”5” cols=”10”></textarea>

</form>

框架:

框架标签是用于将“当前窗口”进行瓜分成更小窗口的一种技术。framseset代替body标签,并要使用框架文档类型。

<frameset  rows=”行高度划分”  cols=”列宽度划分”>

<frame src=”第1个小窗口中的网页地址url” border=”0”  scrolling=”no” />

<frame src=”第2个小窗口中的网页地址url”  />

</frameset>

css基本概念:

css是用于这样一个目的: 将网页中的某个(些)标签(元素)的某(些)方面特性设置为某(些)个值。

css的语法基本模式为:

选择器 {  css属性1:值1;css属性2:值2;………  }

所谓选择器,其实就是某种可以对应到网页中的某个(些)标签的语法形式。

css选择器分类:

标签选择器:

一个英文单词{….}

所谓一个英文单词,其实也就是一个应该存在的标签名

类选择器(class选择器)

.类名{…}

<p  class=”类名1”  align=”center”> 啊啊啊啊啊</p>

<img src=”某图片路径”  width=”100”  class=”类名2”  />

<input  type=”text”  name=”name名”  class=”类名3”  />

id选择器:

#id名{…..}

<input  type=”text”  name=”name名”  class=”类名3”  id=”id名” />

特别注释:title,  class,  id就是我们所谓的“通用属性”——即谁都可以用。

通用选择器:

*{….}

伪类选择器:

a:link{…}

a:visited{…}

a:hover{。。。}

a:active{….}

注意:上述4个伪类用于a标签通常就必须按上述顺序写。

另外,实际应用中,常常简化为这样:

a{……} 

a:hover{….}

含义是:a连接标签只分“鼠标放上去状态”和“其他状态”

层级选择器:

选择器1  选择器2{。。。。。}

分组选择器:

选择器1, 选择器2{。。。。。}

文字段落的样式属性

color:设定一个标签中的文字的颜色,颜色值可以使用英文单词,16进制语法和rgb语法:

color: red;    color: #f0fcf8; color:rgb(123, 88, 205);

font-size: 设定文字大小,单位通常为像素(px)—— 一般的商业网站的文字大小通常都是12px。

font-weight: 设置文字粗体(bold)或非粗体(normal)。

font-style: 设置文字斜体(italic) 或非斜体(normal)

font-family:设置文字的字体名字,可以使用多个字体名,中间用逗号分开,表示的含义是:首先使用第一个字体,如果用户电脑中没有第一个,则是用第二个,以此类推。举例:

font-family: 宋体,仿宋,微软雅黑,arial, “Times New roman”;

line-height:设置文字的行高,单位通常也是px,即一行文字所占据的空间高度——行高不是文字的高度。

letter-spacing:设置字符(或字母)之间的间隔距离,中文其实就是“字”的间隔。

word-spacing:设置单词之间的间隔距离——通常只对西方拉丁语系的字符有效。

text-align:设定文字的水平对齐方式。其功能是相当于标签属性中的align属性。但要注意:align作为html属性,其实只在其中的某几个标签中使用,但text-align是几乎所有标签都可以用的。

text-indent: 设定一个段落中的首行缩进距离,单位通常也是px。

text-decoration:设置文字的“修饰线”:下划线(underline),中划线(line-through),上划线(overline),none(无)

vertical-align: 设定文字在一个表格盒子(单元格)的垂直对齐方式:top(顶对齐),middle(中对齐),bottom(底对齐)

盒子模型初步

盒子是css中最重要的概念。

盒子

首先先建立一个观念: 几乎所有标签其实都是一个盒子——而所谓盒子,无非就是一个“矩形的区域范围而已”。其实所谓网页,无非是一个盒子套一个盒子。

一个盒子有如下一些区域(结构)构成:

边框(border):一个线型的区域,可以是实线或虚线或其他形状。

外边距(margin):也叫“边界”,边框线之外的一块空白区域,其含义是“不能放置物体”

内边距(padding):也叫“补白”,边框线之内的一块空白区域,其含义也是“不能放置物体”

内容区(没有对应的css属性名):指一个盒子中可以放置“物体”的区域——也就是盒子的主要区域。其中放置的物体可以是普通的文字或其他标签——对应我们之前学的html中的“内容部分”。内容区通常只能设置其宽高属性(width,height)。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,029评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,395评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,570评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,535评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,650评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,850评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,006评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,747评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,207评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,342评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,964评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2 349

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,737评论 1 92
  • 文字段落的样式属性 color:设定一个标签中的文字的颜色,颜色值可以使用英文单词,16进制语法和rgb语法,如:...
    在路上_80f5阅读 410评论 0 0
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,066评论 0 40
  • 文丨晓寒因梦 朋友阿猫说,再刷《从你的全世界路过》,依然感动到落泪。 只是这一次,跟上一次不同。 上次哭,是为生命...
    喵淼电影阅读 591评论 2 3
  • 评论这个功能在在现如今的各类平台中随处可见,可以说成为一个基础功能。虽然说评论功能很常见,但是你会发现,不同平台的...
    Lighthouse_47阅读 2,189评论 6 24