JavaWeb最新
HTML和CSS
介绍
表示方式 |
表示含义 |
取值 |
关键字 |
预定义的颜色名 |
red、green、blue… |
rgb表示法 |
红绿蓝三原色,每项取值范围:0-255 |
rbg(0,0,0)、rbg(255,255,255)、rbg(255,0,0) |
十六进制表示法 |
#开头,将数字转换成十六进制表示 |
#000000、#ff0000、#cccccc,简写:#000、#ccc |
排版一
- 标题标签
- 标签:<h1>…</h1>
- 注意:HTML标签都是预定义好的,不能自己随意定义
- 水平线标签 <hr>
- 图片标签 <img src=“…” width=“…” height=“…”>
- 绝对路径:绝对磁盘路径
- 相对路径:从当前文件开始查找
样式一
- CSS引入方式
- 行内样式:<h1 style=“…”>
- 内嵌样式:<style>…</style>
- 外联样式:xxx.css <link href=“…”>
- 颜色表示
- 关键字:red、green…
- rgb表示法:rbg(255,0,0)、rbg(134,100,89)
- 十六进制:#ff0000、#cccccc、#ccc
- 颜色属性
样式二
- <span>标签
- <span>是一个在开发网页时大量会用到的没有语义的布局标签
- 特点:一行可以显示多个(组合行内元素),宽度和高度默认由内容展开
- CSS选择器
- 元素选择器:标签名 {…}
- id选择器:#id属性值 {…}
- 类选择器:.class属性值 {…}
- 优先级:id选择器 > 类选择器 > 元素选择器
- CSS属性
- color:设置文本的颜色
- font-size:字体大小(注意:记得加px)
超链接
- 超链接
1 2 3 4 5 6
| 标签: <a> 属性: href: 指定资源访问的url target: 指定在何处打开资源链接 _self: 默认值,在当前页面打开 _blank: 在空白页面打开
|
- CSS属性
1 2
| text-decoration: 规定添加到文本的修饰,none表示定义标准的文本 color: 定义文本的颜色
|
排版二
- 音频、视频标签
- 换行、段落标签
- 文本加粗标签
- CSS样式
1 2 3
| ling-height: 设置行高 text-indent:定义第一个行内容的缩进 text-align: 规定元素中的文本的水平对齐方式
|
- 注意
1
| 在HTML中无论输入多少个空格,只会显示一个。可以使用空格占位符:
|
页面布局
- 盒子:页面中所有的元素(标签),都可以看作是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局
- 盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)
- CSS盒子模型
1
| 组成: 内容(content)、内边距(padding)、边框(border)、外边框(margin)
|
- CSS属性
1 2 3 4 5 6 7
| width: 设置宽度 height: 设置高度 border: 设置边框的属性,如:1px solid #000; padding: 内边距 margin: 外边距
如果只需要设置某一个方位的边框、内边距、外边距,可以在属性名后加上 -位置,如:padding-top、padding-left、padding-right...
|
表格标签
- 场景:在网页中以表格(行、列)形式整齐展示数据,如:班级表
- 标签:
标签 |
描述 |
属性/备注 |
<table> |
定义表格整体,可以包裹多个 <tr> |
border:规定表格边框的宽度 width:规定表格的宽度 cellspacing:规定单元之间的空间 |
<tr> |
表格的行,可以包裹多个 <td> |
|
<td> |
表格单元格(普通),可以包裹内容 |
如果是表头单元格,可以替换为 <th> |
表单标签
表单项
- <input>:表单项,通过type属性控制输入形式
type取值 |
描述 |
text |
默认值,定义单行的输入字段 |
password |
定义密码字段 |
radio |
定义单选按钮 |
checkbox |
定义复选框 |
file |
定义文件上传按钮 |
date/time/datetime-local |
定义日期/时间/日期时间 |
number |
定义数字输入框 |
email |
定义邮件输入框 |
hidden |
定义隐藏域 |
submit / reset / button |
定义提交按钮 / 重置按钮 / 可点击按钮 |
- <select>:定义下拉列表,<option>:定义列表项
- <textarea>:文本域
HTML-表单项标签