Web之HTML（下）| 青训营笔记

已注销
95 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

一、表格标签

1.基本语法

<table>用于定义表格的标签

<tr>定义表格中的行，嵌套在<table>中

<td>定义表格中的单元格，嵌套在<tr>中

实例：

<!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 里面去 -->
    <table align="center">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>刘德华</td>
            <td>男</td>
            <td>56</td>
        </tr>
    </table>
 
</body>
 
</html>

2.表头单元格标签

<th>表头部分，文字会加粗、居中

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表头单元格标签</title>
</head>
<body>
    <table>
        <tr><th>姓名</th>  <th>性别</th> <th> 年龄 </th></tr>
        <tr><td>刘德华</td>  <td>男</td> <td> 56 </td></tr>
        <tr><td>张学友</td>  <td>男</td> <td> 58 </td></tr>
        <tr><td>郭富城</td>  <td>男</td> <td> 51 </td></tr>
        <tr><td>黎明</td>  <td>男</td> <td> 57 </td></tr>
    </table>
</body>
</html>

3.表格属性

  • align="center" 规定对齐方式
  • border="" 规定是否有边框，默认“”无边框
  • cellpadding="" 规定单元边沿与其内容之间的空白，默认1像素
  • cellspacing="" 规定单元格之间的空白，默认2像素
  • width="" 规定表格的宽度
  • height="" 规定表格的高度

4.表格结构标签

<thead>表格头部区域标签，内部必须有<tr>，一般位于第一行

<tbody>表格主题区域标签，主要放数据本体

5.合并单元格

跨行：最上侧单元格为目标单元格，<td rowspan="单元格个数">

跨列：最左侧单元格为目标单元格，<td colspan="单元格个数">

步骤：

  • 确定合并方式
  • 找到目标单元格，写上目标单元格
  • 删除多余单元格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>合并单元格</title>
</head>
<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td>
            <td colspan="2"></td>
           
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

二、列表标签

无序列表

<ul>（里边只能放<li>）
        <li>列表项</li>（里边放什么都可以）
</ul>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无序列表</title>
</head>
<body>
    <h4>您喜欢的食物?</h4>
    <ul>
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>
            <p>123</p>
        </li>
    </ul>
</body>
</html>

有序列表

<ol>（里边只能放<li>）
        <li>列表项</li>（li里边放什么都可以）
        （列表项要按顺序）
</ol>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>有序列表(理解)</title>
</head>
<body>
    <h4>粉丝排行榜</h4>
    <ol>
        <li>刘德华 10000</li>
        <li>刘若英 1000</li>
        <li>pink老师 1</li>
    </ol>
</body>
</html>

自定义列表

通常用于对术语或名词进行解释和描述

<dl>
        <dt>名词</dt>
        <dd>名词解释</dd>
（dt,dd是并列关系，dd围绕着解释说明）
</dl>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自定义列表(重点)</title>
</head>
<body>
    <dl>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
        <dt>关注我们</dt>
        <dd>新浪微博</dd>
        <dd>官方微信</dd>
        <dd>联系我们</dd>
    </dl>
</body>
</html>

三、表单标签

1.表单组成

表单域，表单控件，

2.表单域

是一个包含表元素的区域

<from>把它范围内的表单元素信息提交给服务器

<from action="页面" method="" name="名字">（现阶段不用管）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表单域(了解)</title>
</head>
<body>
   <form action="demo.php" method="POST" name="name1">
 
   </form>
</body>
</html>

3.表单控件（表单元素）

<input>标签：

  • <input>输入元素，表单元素中用于收集用户信息
  • <input>标签中包含一个type属性（必须写）
  • <input type=“属性值”/>

4.type属性值

  • text 文本框 用户可以里面输入任何文字
  • password 密码框 用户看不见输入的密码
  • radio 单选按钮 可以实现多选一
  • checkbox 复选框 可以实现多选一
  • submit 点击了提交按钮,可以把表单域 form 里面的表单元素里面的值提交给后台服务器
  • reset 重置按钮可以还原表单元素初始的默认状态
  • button 普通按钮 button 后期结合js 搭配使用
  • <input type="file" > 文件域使用场景上传文件使用的

5.input其他属性

  • name ：是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1
  • value：规定input元素的值
  • 两个主要给后台人员使用
  • 单选按钮和复选框要有相同的name值
  • checked：单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮
  • maxlength：规定输入字段中的字符的最大长度

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>input 表单元素</title>
</head>
<body>
    <form action="xxx.php" method="get">
         <!-- text 文本框 用户可以里面输入任何文字 -->
        用户名: <input type="text" name="username" value="请输入用户名" maxlength="6">   <br> 
        <!-- password 密码框 用户看不见输入的密码 -->
        密码: <input type="password" name="pwd" >  <br> 
        <!-- radio 单选按钮  可以实现多选一 -->
        <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 -->
        <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 -->
        性别: 男 <input type="radio" name="sex" value="男"> 女  <input type="radio" name="sex" value="女" checked="checked"> 人妖   <input type="radio" name="sex" value="人妖">   <br> 
        <!-- checkbox 复选框  可以实现多选 -->
        爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby">  打豆豆 <input type="checkbox" name="hobby" checked="checked"> 
        <br> 
        <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 -->
        <input type="submit" value="免费注册">
        <!-- 重置按钮可以还原表单元素初始的默认状态 -->
        <input type="reset" value="重新填写">
        <!-- 普通按钮 button  后期结合js 搭配使用-->
        <input type="button" value="获取短信验证码"> <br>
        <!-- 文件域 使用场景 上传文件使用的 -->
        上传头像:  <input type="file" >
    </form>
</body>
</html>

6.<label>标签

绑定一个标签元素。点击时光标转到对应的表单元素上

<label for="名称"> 用户名</label> <input type="属性" id="名称" >

<label for="nan">男</label><input type="radio" id="nan" name="sex">

for属性与id属性相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>label标签</title>
</head>
<body>
   <label for="text"> 用户名:</label> <input type="text" id="text" >
   <input type="radio" id="nan" name="sex"> <label for="nan">男</label>
   <input type="radio" id="nv"  name="sex"> <label for="nv">女</label>
</body>
</html>

7.select下拉表单元素

下拉列表，至少包含一对option选择

在option中定义selected=“selected”，默认选定状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>select下拉表单</title>
</head>
<body>
    <form>
    籍贯: 
    <select>
        <option>山东</option>
        <option>北京</option>
        <option>天津</option>
        <option selected="selected">火星</option>
    </select>
</form>
</body>
</html>

8.textarea文本域元素

<textarea cols="每行的字数" rows="行数">
 文本内容
</textarea>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>textarea 文本域</title>
</head>
<body>
    <form>
        今日反馈:
        <textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>
    </form>
</body>
</html>
avatar
文章
阅读
粉丝