HTML
- 超文本编辑语言
-
- 超越文本的限制;除了文字信息,还可以定义图片、音频、视频等内容;
- 标记语言
-
- html标签都是预定义好的,不可以随意的更改;
- html代码直接在浏览器中运行,html标签由浏览器解析;
CSS
- css:层叠样式,用于控制页面样式
基础标签&样式
标题
- 图片标签:<img>
-
- src:指定图片的url(绝对路径/相对路径)
-
-
- 绝对路径:绝对磁盘路径(属性中安全) 绝对网络路径(http://****)
- 相对路径:从当前文件开始查找(./:当前目录 ../:上级目录)
-
-
- width:图像的宽度(像素/相对于父元素的百分比)
- height:图像的高度(像素/相对于父元素的百分比)
- 标题标签:<h1>-<h6>
- 水平线标签:<hr>
标题样式
- CSS引入方式:
-
- 行内样式:写在标签的style属性中(不推荐);
-
- 内嵌样式:写在style标签中(可以卸载页面的任何位置,默认卸载head标签中);
-
- 外联样式:写在一个单独的.css文件中(需要通过link标签在网页中引入);
- 颜色表现形式:
关键字 | 预定义的颜色名 | red、green、blue... |
rgb表示法 | 红绿蓝三原色,每项取值范围:0-255 | rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0) |
十六进制表示法 | #开头,将数字转换成十六进制表示 | #000000、#ff0000、#cccccc,简写:#000、#ccc |
- 颜色属性
-
- color:设置文本内容的颜色;
- CSS选择器:用来选取需要设置样式的元素(标签)
-
- 元素选择器:
-
- id选择器:
-
- 类选择器:
超链接
- 标签:<a>
-
- 属性:
-
-
- href:指定资源访问url;
- target:指定在何处打开资源链接;
- _self:默认值,在当前页打开;
- _blank:在空白页打开;
-
- CSS属性:
-
- text-decoration:规定添加到文本的修饰,none表示定义标准的文本;
- color:定义文本的颜色;
排版
- 音频、视频标签
-
- <audio> <video>
- 换行、段落标签
-
- 换行:<br>;
- 段落:<p>;
- 文本加粗
-
- <b>;
- <strong>;
- CSS样式
-
- line-height:设置行高;
- text-indent:定义一个行内容的缩进;
- text-align:归档元素中文本的水平对齐方式;
- 注意
-
- 在html中无论输入多少个空格,只会显示一个。可以使用展位符 ;
页面布局
- 盒子:
-
- 页面中所有的元素都可以看做是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更加方便的进行页面布局;
- 盒子模型的组成:
-
- 内容区域(content);
- 内边距区域(padding);
- 外框区域(border);
- 外边距区域(margin);
- 布局标签
-
- <div>标签:
-
-
- 一行只显示一个(独占一行);
- 宽度默认是父元素的宽度,高度默认由内容展开;
- 可以设置宽高(width、height);
-
-
- <span>标签:
-
-
- 一行可以显示多个;
- 宽度和高度默认由内容展开;
- 不可以设置宽高(width、height);
-
表格、表单标签
表格
- 场景:
-
- 在网页中以表格(行、列)形式整齐展示数据;
- 标签:
表单
- 场景:
-
- 在网页中主要负责数据采集功能,注册登录等;
- 标签:
-
- <form>
- 表单项:
-
- 不同类型的input元素,下拉列表,文本域等;
- <input>:定义表单项,通过type属性控制输入形式;
- <select>:定义下拉列表;
- <textarea>:定义文本域;
- 属性:
-
- action:规定当提交表单时向何处发送表单数据,URL;
- method:规定用于发送表单数据的方式。GET、POST;
-
-
- GET:直接在地址栏返回提交的值,参数过大不能使用;
- POST:在消息体(请求体)中传递的,参数大小没有限制;
-
表单项
- <input>:
-
- 表单项,通过type属性控制输入形式;
- <select>:
-
- 定义下拉列表;
- <textarea>:
-
- 定义文本域;
- input中value和name 的区别
-
- value:
-
-
- value属性规定<input>元素的值;
- 不同的input值,用法不同:
-
-
-
-
- 对于“button”、“reset”、“submit”类型-定义按钮上的文本;
- 对于“text”、“password”、“heidden"类型-定义输入字段的初始(默认值);
- 对于“checkbox”、“radio”、“image”类型-定义与input元素相关的值,当提交表单时该值会发送到表单的actionURL;
- 注意:
-
-
-
-
-
-
- value 属性对于 <input type="checkbox">和 <input type="radio"> 是必需的;
- value 属性不适用于 <input type="file">
-
-
-
-
- name:
-
-
- name属性规定<input>元素的名称;
- name属性用于jsp中引用元素,或者在表单提交后引用表单数据;
- 只有设置了name属性的表单元素才能在表单时传递它们的值;
-
-
- id:
-
-
- id属性规定HTML元素唯一的id;
- id在HTML文档中必须唯一;
- id属性可以用作连接锚,通过jsp或css为指定id的元素改变或者添加样式;
-