Be a better web developer：day2

一、图片与超链接

1.URL ：Uniform Resource Locator 统一资源定位符标识网络或本地资源的位置，即路径

组成：协议域名文件目录文件名

绝对路径：从根目录开始查找文件，以 / 或者盘符标识开头，适用于网络路径，不适用于项目开发过程中访问本地文件

相对路径：从当前所在的文件夹开始查找资源 ../ 表示返回上一级目录

注意：URL严格区分大小写，网络URL中避免出现中文

2.图片标签：在网页中插入一张图片

<img src="" width="" height="" title="" alt="">
src：必填属性，设置图片路径
width：设置图片宽度，取值为像素值
height:设置图片高度，像素单位可以省略
title：设置图片的描述信息，在鼠标悬停在图片上方时出现
alt:设置图片加载失败之后的提示文本

3.超链接标签：提供从当前文件跳转到其他文件的功能

<a href="url" target="">内容</a>
href:必填属性，指定链接地址 属性为空表示跳转至当前页，包含网络请求，等同于刷新
　　属性为"#"表示当前页，不包含网络请求
target:设置目标文件的打开方式，指是否新建窗口打开，默认在当前窗口打开目标文件
　　取值：_self 默认值，在当前窗口打开
　　　　_blank 新建窗口打开

4.锚点链接：在指定文件的指定位置进行跳转

<a name="6"></a>
<p>曾经沧海难为水，除却巫山不是云。</p>



<a href="#6">诗</a>

二、表格标签

<!doctype html>
<html lang="en">
 <head>
 </head>
 <body>
  <table>　　表格标签
    <tr border="3px" bgcolor="pink" width="300px" height="300px"
　　　　align="center" cellspacing="2px" cellpadding="1px">　　行标签
        <td></td>　　单元格标签
        <td></td>
    </tr>
  </table>
 </body>
</html>

1.table标签属性
　　border:设置表格边框，取值为像素值
　　bgcolor：设置表格北京颜色，取值颜色的英文单词
　　width：设置表格宽度，取值像素值
　　height：设置表格高度，取值为像素值
　　align：表格的水平对齐方式，取值left center right
　　cellspacing：设置单元格的外边距（单元格与单元格之间，单元格与表格边框之间的距离），取值为像素值
　　cellpadding：设置单元格的内边距（单元格内容与单元格边框之间的距离），取值为像素值
2.tr标签属性
　　bgcolor：设置行北京颜色
　　align：设置内容水平对齐方式
　　valign：设置内容垂直对齐方式 top middle bottom 默认水平居左，垂直居中
3.td标签属性
　　bgcolor：设置单元格的背景颜色
　　width：设置单元格的宽度
　　height：设置单元格高度
　　align：设置单元格内容水平对齐方式
　　valign：设置单元格内容的垂直对齐方式
4.单元格合并（重点）：跨行合并 <td rowspan="3"></td> 从当前单元格开始，向下合并3行，最终占据三个单元格的位置
　　　　　　　　　　  跨列合并<td colspan="2"></td> 从当前单元格开始，向右合并2格，最终占据两个单元格的位置
注意：单元格合并，要时时调整表格结构，保证表格结构的完整
　　发生跨行合并，要删除后续行中多余的单元格
　　发生跨列合并，要删除当前行中多余的单元格
5.表格结构
行分组：允许将表格中的若干行划分为一组，便于管理

<thead>　　表头行分组
    <tr>
        <td></td>
    </tr>
</thead>

<tfoot>　　表格尾部
    <tr>
        <td></td>
    </tr>
</tfoot>

<tbody>　　表格主题
    <tr>
        <td></td>
    </tr>
</tbody>

注意：此结构化标签可以省略，当省略时，所有的行和单元格会被自动添加到tbody中，作为表格主体信息

　　如果涉及当行分组，需要添加结构标签，建议按照<thead></thead> <tfoot></tfoot> <tbody></tbody>的顺序书写

三、表单：用于接收用户输入的数据，并提交给服务器

表单二要素：表单标签<form></form>

　　　　　　表单控件（重点）：提供一组可以跟用户交互的可视化组件

    <form action="url" method="">
        <div>
            <input type="text" name="">　　文本输入框
            <input type="password" name="">　　密码框
        </div>
        <div>
            <input type="radio" name="" value="">　　单选按钮
            <input type="radio" name="" value="">
        </div>
        <div>
            <input type="checkbox" name="" value="">　　复选框
            <input type="checkbox" name="" value="">
            <input type="checkbox" name="" value="">
            <input type="checkbox" name="" value="">
        </div>
        <div>
            <input type="file" name="">　　文件选择框
        </div>
        <div>
            <input type="hidden" name="" value="">　　隐藏域
        </div>
    </form>

1.文本框和密码框属性

name：必填，定义控件名称

placeholder：设置提示文本

maxlength：设置最大输入长度

value：设置当前输入框的值一般不用

2.单选按钮与复选框属性

name：定义控件名称，具有分组作用，一组按钮中的name属性必须保持一致

value：必填，设置按钮对应的值

checked：默认选中

Be a better web developer：day2

猜你喜欢