我的web之旅--day01

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 元素
    下拉选择柱
    滚动列表