HTML学习笔记（3）

[陈潇奇]

一.超链接标签

功能：实现不同页面的跳转

写法：

<a href="路径" title="鼠标悬停上去之后的提示信息" target="规定在何处打开页面">内容</a>

注意：Target属性：规定在何处打开文档（target="下划线+self" 默认值 target="_blank"新窗口打开）

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>    
    <br>
    <a href="https://www.baidu.com" target="_blank">百度</a>    
    <a href="04-百科词条.html" target="_blank">百科词条</a>
    <a href="04-百科词条.html" target="_blank" title="百科词条">
        <img src="./R-C.jpg" >
    </a>
    
</body>
</html>

 

效果：

二.table表格

写法：

<table>
    ​<tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
</table>

相关属性：

1. 宽度 width(支持单位px和百分比(相对于父元素的百分比)，高度也可以)

2. 高度 heigth

3. 边框 border(只变外围的像素)

4. 边框颜色 bordercolor

5. 背景颜色 bgcolor

6. 水平对齐 align="left或right或center"

7. cellspacing="单元格与单元格之间的间距"

8. cellpadding="单元格与内容之间的空隙"

行tr属性：

1. 高度 height

2. 背景颜色 bgcolor

3. 文字水平对齐 align="left或right或center"

4. 文字垂直对齐 valign="top或middle或bottom"；

单元格td属性

1. 宽度 width(如果一个单元格设置宽度，影响的是这一整列的宽度)

2. 高度 height(如果一个单元格设置高度，影响的是这一整行的高度)

3. 背景颜色 bgcolor

4. 文字水平对齐 align="left或right或center"

5. 文字垂直对齐 valign="top或middle或bottom"；

表格合并

1. colspan="所要合并的单元格的列数"必须给td。

2. rowspan="所要合并的单元格的行数"必须给td。

 例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
        <table border="5" width="50%"  height="400"
         align="center" bordercolor="blue"
         bgcolor="yellow"
         cellspacing="0"
         cellpadding="50">
           <tr height="500" bgcolor="green" 
           align="center" valign="top">
            <td width="200">1</td>
            <td height="500">2</td>
           </tr> 
           <tr height="200" align="right" valign="bottom">
            <td bgcolor="red">3</td>
            <td align="right" valign="top">4</td>
           </tr> 
        </table>

</body>
</html>

效果：

 

三.表单标签

写法：

<form method="get或者post" action="向何处发生表单数据">

  <input/>

   (A.属性type定义输入框的类型

       a）文本框 type="text" 密码框 type="password"

       b）提交框 type="submit"和<button>提交按钮</button>一样(提交信息到action指定的地址)

       c）按钮框 type="button"单纯的按钮

       d）重置框 type="reset"清空的效果

   B.属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上

   C.属性 name必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器

   D.属性 value)

</form>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Form中method有两种方式，分别为post和get，get是从服务器上获取数据，post是向服务器传送数据-->
    <form action="http://www.jd.com/" method="post">
        用户信息：<input type="text" placeholder="请输入你的用户信息" name="username"><br>
        密码：<input type="password" placeholder="请输入密码" name="mima"><br>
        <!-- <input type="submit" value="登录"> 功能一样-->
        <button type="submit">登录</button>
        <!-- <input type="reset" value="重置"> -->
        <button type="reset">重置</button>
        <input type="button" value="aaaaa">
    </form>
</body>
</html>

效果：