我的web之旅--day01
来源:互联网 发布:英制螺丝孔算法 编辑:程序博客网 时间:2024/06/07 07:27
1、url(路径)
(1)绝对路径
--资源文件的地址,是从资源文件所在的最高级目录开始算起
(2)相对路径(重点)
--a.同级目录中
直接通过文件名进行引用
--b.资源文件在子目录中
解决:先进入到子目录中,再查找资源文件名称
--c.当前文件在上级目录中
解决:进入上级目录中,再查找资源文件名称,即../red.png
2、图像
--width 宽度
--height 高度
注意:width和height如果只设一个属性图片会等比例进行缩放,如果不设置可能会变形
单位可以省略,默认单位是px
3、链接
--允许用户在页面中完成点击并跳转的行为
--用法: <a>内容</a>
属性: href 链接url
注意:只有设置了href属性之后才允许被用户点击
--target的四种选择:(1)target = "_self"--实现每次跳转都在同一个窗口
(2)target = "_blank" --浏览器总在一个新打开的未命名的窗口中载入目标文档
(3)target = "_parent"--使得文档载入父窗口或者包含老超链接引用的框架集,若这个引用在窗口或顶级框架 中,则等价于_self
(4)target = "_top"--是的文档载入包含这个超链接的窗口,会清除所有被包含的框架并将文档载入整个浏 览器窗口
--链接表现形式:(1)形式为下载资源
--设置href属性值为.rar或.zip等格式的文件,就可以实现下载而不是跳转
(2)形式为电子邮件链接
--<a herf="mailto:邮箱地址"></a>
(3)形式为返回到页面顶部的空链接
--<a href="#"></a>
(4)链接到javascript
--点击链接完成对一段javascript代码的调用操作
--锚点:为了在页面中某个位置,作业个标志,方便网页随时随地地跳转到这个标识上来
--使用:(1)定义锚点
语法:<a>内容</a>
属性:name:锚点的名称
(2)跳转到锚点
<a href="#锚点名称">内容</a>
(3)id属性定义锚点
4、表格
<table>
<tr>
<td></td>
</tr>
</table>
注:所有内容都放在td里面,<th>加粗居中</th>
属性:border
width
height
cellpadding:内边距,单元格的边框与内容之间的距离
cellspacing:外边距,单元格与单元格之间的距离
bgcolor:表格填充颜色
td属性:colspan 跨列
rowspan 跨行
5、列表
(1)有序列表
<ol>
<li></li>
<li></li>
</ol>
属性:
1)type作用:指定有序列表前的标识符类型
取值: 数值(默认) 1
小写英文 a
大写英文 A
罗马数字 i
大写罗马数字 I
2)start作用:指定有序标识符的起始编号
取值: 数字
(2)无序列表(没有顺序的标识符)
<ul>
<li></li>
<li></li>
</ul>
属性:
type: disc--实心圆
circle--空心圆
square--实心方块
none--取消标识符
less、sass、github、blog(csdn、博客园、segmentfault)
(3)定义列表
<dl>
<dt>专业术语</dt>
<dd>对专业术语的解释说明</dd>
</dl>
6、结构标记
(1)作用:用于页面的布局,提升了标签的"语义化"
(2)常用的结构标记
1)<header></header>
--用来定义页面文档的头部,代替<div id="header"></div>
2)<nav></nav>
--导航链接部分 navgition
3)<section></section>
--定义主体部分
4)<article></article>
--用于论坛的帖子、新闻的具体信息
5)<footer></footer>
--底部
6)<aside></aside>
--侧边栏
7、表单
(1)作用
<form></form>
属性: 1)action="1.php" --后台中,处理表单数据的应用程序url(由后端工程师负责提供)
2)method
--表单提交数据的方式:
i)get默认值 可以看到提交的信息,不安全,有大小限制,所提交的数据不能超过2kb,向服务器要数据时用get
ii)post 隐式提交,无大小限制
3)enctype
--表单数据进行编码的方式
i)application/x-www-form-urlencoded 默认值,允许表单中的字符、数字、特殊字符一起提交给服务器
ii)multipart/form-data 只在上传文件时使用
iiv)text/plain 不允许提交特殊字符
4)name 定义表单的名称
(2)表单控件
--接收用户输入的数据
1)控件分类
i)input
文本框:<input type="text">
密码框:<input type="password">
单选按钮:<input type="radio">
复选框:<input type="checkbox">
ii)<lable></lable>
--关联文本以及表单控件,关联之后,点击文本如同点击表单控件
<input type="text" id="txtName">
<lable for=""txtName>文本</lable>
textarea 多行文本域
select option 元素
下拉选择柱
滚动列表
(1)绝对路径
--资源文件的地址,是从资源文件所在的最高级目录开始算起
(2)相对路径(重点)
--a.同级目录中
直接通过文件名进行引用
--b.资源文件在子目录中
解决:先进入到子目录中,再查找资源文件名称
--c.当前文件在上级目录中
解决:进入上级目录中,再查找资源文件名称,即../red.png
2、图像
--width 宽度
--height 高度
注意:width和height如果只设一个属性图片会等比例进行缩放,如果不设置可能会变形
单位可以省略,默认单位是px
3、链接
--允许用户在页面中完成点击并跳转的行为
--用法: <a>内容</a>
属性: href 链接url
注意:只有设置了href属性之后才允许被用户点击
--target的四种选择:(1)target = "_self"--实现每次跳转都在同一个窗口
(2)target = "_blank" --浏览器总在一个新打开的未命名的窗口中载入目标文档
(3)target = "_parent"--使得文档载入父窗口或者包含老超链接引用的框架集,若这个引用在窗口或顶级框架 中,则等价于_self
(4)target = "_top"--是的文档载入包含这个超链接的窗口,会清除所有被包含的框架并将文档载入整个浏 览器窗口
--链接表现形式:(1)形式为下载资源
--设置href属性值为.rar或.zip等格式的文件,就可以实现下载而不是跳转
(2)形式为电子邮件链接
--<a herf="mailto:邮箱地址"></a>
(3)形式为返回到页面顶部的空链接
--<a href="#"></a>
(4)链接到javascript
--点击链接完成对一段javascript代码的调用操作
--锚点:为了在页面中某个位置,作业个标志,方便网页随时随地地跳转到这个标识上来
--使用:(1)定义锚点
语法:<a>内容</a>
属性:name:锚点的名称
(2)跳转到锚点
<a href="#锚点名称">内容</a>
(3)id属性定义锚点
4、表格
<table>
<tr>
<td></td>
</tr>
</table>
注:所有内容都放在td里面,<th>加粗居中</th>
属性:border
width
height
cellpadding:内边距,单元格的边框与内容之间的距离
cellspacing:外边距,单元格与单元格之间的距离
bgcolor:表格填充颜色
td属性:colspan 跨列
rowspan 跨行
5、列表
(1)有序列表
<ol>
<li></li>
<li></li>
</ol>
属性:
1)type作用:指定有序列表前的标识符类型
取值: 数值(默认) 1
小写英文 a
大写英文 A
罗马数字 i
大写罗马数字 I
2)start作用:指定有序标识符的起始编号
取值: 数字
(2)无序列表(没有顺序的标识符)
<ul>
<li></li>
<li></li>
</ul>
属性:
type: disc--实心圆
circle--空心圆
square--实心方块
none--取消标识符
less、sass、github、blog(csdn、博客园、segmentfault)
(3)定义列表
<dl>
<dt>专业术语</dt>
<dd>对专业术语的解释说明</dd>
</dl>
6、结构标记
(1)作用:用于页面的布局,提升了标签的"语义化"
(2)常用的结构标记
1)<header></header>
--用来定义页面文档的头部,代替<div id="header"></div>
2)<nav></nav>
--导航链接部分 navgition
3)<section></section>
--定义主体部分
4)<article></article>
--用于论坛的帖子、新闻的具体信息
5)<footer></footer>
--底部
6)<aside></aside>
--侧边栏
7、表单
(1)作用
<form></form>
属性: 1)action="1.php" --后台中,处理表单数据的应用程序url(由后端工程师负责提供)
2)method
--表单提交数据的方式:
i)get默认值 可以看到提交的信息,不安全,有大小限制,所提交的数据不能超过2kb,向服务器要数据时用get
ii)post 隐式提交,无大小限制
3)enctype
--表单数据进行编码的方式
i)application/x-www-form-urlencoded 默认值,允许表单中的字符、数字、特殊字符一起提交给服务器
ii)multipart/form-data 只在上传文件时使用
iiv)text/plain 不允许提交特殊字符
4)name 定义表单的名称
(2)表单控件
--接收用户输入的数据
1)控件分类
i)input
文本框:<input type="text">
密码框:<input type="password">
单选按钮:<input type="radio">
复选框:<input type="checkbox">
ii)<lable></lable>
--关联文本以及表单控件,关联之后,点击文本如同点击表单控件
<input type="text" id="txtName">
<lable for=""txtName>文本</lable>
textarea 多行文本域
select option 元素
下拉选择柱
滚动列表
0 0
- 我的web之旅--day01
- 我的Android学习之路day01
- 我的菜鸟之路——day01
- 我的WEB之旅
- 我的web之旅
- 我的web之旅
- 我的web之旅--day02
- day01 开启IT技术学习之旅
- web前端day01
- Android开发修炼——我的java学习 Day01
- 黑马程序员_Java基础_我的day01学习笔记
- 我的web service之旅(1)
- 我的Maven2之旅:十一.打包一个web工程.
- web的将来之我思
- 我的web生涯之路
- 我的新年作品之-Web平台
- 聂微东:我的Web前端之路
- Java Web入门之我的理解
- String学习
- 2017.4.8微软笔试题
- XML之JDOM解析
- Android 高德地图 关于INVALID_USER_KEY和INVALID_USER_SCODE的问题
- Linux基础命令
- 我的web之旅--day01
- github上传文件和编写.md格式文件
- JavaScript中创建对象过程的理解
- 接口
- unity3d animator state play once 播放一次的研究
- 自定义Echarts地理分布图tooltip显示内容
- hihocode——#1498 : Diligent Robots
- Windows网络编程之端口扫描实验
- c#写的学生管理系统的心得2