当我们对HTML有一点了解之后,就会想做一个自己的网页,这时我们就需要对一些基础知识的巩固和加深了,盒子布局(也叫div布局),使用div布局的时候就不像table布局那么直观了,需要对它的属性及用法有一定的掌握。从而操作它们,对样式有一定的认识至少知道怎么写,如何用。
- 标签:排版标签
- </br>换行
- </hr>水平
- color:颜色
- <p>断落标签</p>
- align:对齐方式
- div:块级元素
- span:行内元素
- <b>加粗</b>
- <i>斜体</i> 标签可以内嵌内容
- font:字体标签
- size:最大值为:7,最小值为:1
- 特殊字符
- <<>> & &
- 滚动的字幕
- <marquee>内容</marquee>
- 列表标签
- 数据格式化列表
- <dl>
- <dt>上层项目</dt>
- <dd>下层项目</dd>
- <dd>下层项目</dd>
- </dl>
- <dl>
- 数据格式化列表
- 有序列表:
- <ol>
- <li>内容</li>
- </ol>
- <ol>
- 无序列表:
- <ul>
- <li>内容</li>
- </ul>
- <ul>
- 图片标签
- <img src="图片地址 "/>
- 属性:宽高
- alt :图片说明
- <img src="图片地址 "/>
- 超链接标签
- <a href="链接地址"><a/>
- 属性:href="链接地址"
- name:属性的用法 <a name="top"></a>
- <a href="#top"><a/>(上中下,用于本页面返回)描点
- <a href="链接地址"><a/>
- 表格标签
- <form>用户输入的内容
- input type=“类型”
- text文本框
- password密码框
- radio单选按钮
- checkbook多选按钮
- 默认值checked或true
- reset重置
- submit提交
- file 选择文件
- hidden 隐藏的组件
- button按钮一般和js一起用绑定事件
- type=“image”图片
- 表提交
- select文本域(下拉)
- 多媒体文件的使用<bgsound src=”媒体文件” loop=”-1”>无限循环
- 框架标签
- <frameset rows=”80,*”>
- <frame name=”属name的名称” src=”页面”>
- </frameset>
- <frameset rows=”80,*”>
Css的简介:层叠样式
- Css做什么用:设置网页的显示效果
- CSS将网页显示的效果分离,减少耦合性,方便修改和管理
CSS与HTML结合
CSS与HTML结合有四种方式:
- (1)、在HTML的标签上,提供一个属性,style=’’CSS代码”(内嵌样式)
- (2)、在HTML的文件,提供一个标签<style type=”text/css”>CSS代码<style>
- (3)、引用外部样式@import url(“CSS文件的地址”);
- (4)、链接样式<link rel=”styesheet” type=”text/css” href=”文件.CSS”>CSS的优先级和规范
- 由上到下,由外到内,由低到高。(一般情况下)
- CSS的写法div{css的属性名称:值......}
- 如果一个属性有多个值,值与值之间使用空格隔开
CSS的选择器:
- 选择器就是告诉CSS的代码作用在哪个标签上。
- (1)、基本选择器
- ①、类选择器:在HTML的标签上,提供了属性class(经常用的样式)设置不同的标签,具有相同的样式
- ②、 ID选择器:在HTML的标签上,属性 设置样式(一般情况下设置不同的ID)多半是给js语言来使用的
- 优先级:(特殊情况下)
- 标签名<类选择器<ID选择器<style属性
- (2)、扩展选择器
- ①、关联选择器:标签可以嵌套,标签与标签之间的关系
- 写法:中间用空格隔开 例子 div font{ }
- ②、组合选择器:对多个不同的选择器进行相同的样式
- 写法:早多个不同的选择器之间有逗号(,)隔开
- ①、关联选择器:标签可以嵌套,标签与标签之间的关系
- ③、伪元素选择器:定义好一些选择器,用就ok。
- 如果使用超链接的伪元素选择器,使用是有顺序的:Link、visited、hover、active(L、V、H、A)
- (1)、基本选择器