[webgis 0基础到找工作]------HTML day02

最新推荐文章于 2024-09-22 17:20:33 发布

a1209083572

最新推荐文章于 2024-09-22 17:20:33 发布

阅读量501

点赞数 24

文章标签： html 前端

本文链接：https://blog.csdn.net/a1209083572/article/details/141932847

版权

1.列表

作用：布局内容排列整齐的区域。

1.1无序列表

作用：布局排列整齐的不需要规定顺序的区域。

标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。

注意事项：

• ul 标签里面只能包裹 li 标签

• li 标签里面可以包裹任何内容

1.2有序列表

作用：布局排列整齐的需要规定顺序的区域。

标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。

注意事项：

• ol 标签里面只能包裹 li 标签

• li 标签里面可以包裹任何内容

1.3定义列表

标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情。

注意事项：

• dl 里面只能包含dt 和 dd

• dt 和 dd 里面可以包含任何内容

2.表格

标签：table 嵌套 tr，tr 嵌套 td / th。

2.1表格结构标签(了解)

可以省略的,只不过是语义化而已

2.2合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。

– 跨行合并，保留最上单元格，添加属性 rowspan

– 跨列合并，保留最左单元格，添加属性 colspan

注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）

<!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>表格结构标签</title>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>99</td>
        <td rowspan="2">100</td>
        <td>199</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>98</td>
        <!-- <td>100</td> -->
        <td>198</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>总结</td>
        <td colspan="3">全市第一</td>
        <!-- <td>全市第一</td>
        <td>全市第一</td> -->
      </tr>
    </tfoot>
  </table>
</body>
</html>

3.表单

作用：收集用户信息。

3.1input 标签基本使用

input 标签 type 属性值不同，则功能不同。

3.2input 标签占位文本

占位文本：提示信息。

3.3单选框 radio

3.4上传文件 - file

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。

3.5多选框 - checkbox

3.6下拉菜单

标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

3.7文本域

作用：多行输入文本的表单控件。

注意点：

• 实际开发中，使用 CSS 设置文本域的尺寸

• 实际开发中，一般禁用右下角的拖拽功能

3.8label 标签

作用：网页中，某个标签的说明文本。

经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。

写法一

写法二

支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

3.9按钮 - button

按钮需配合 form 标签（表单区域）才能实现对应的功能。

4.语义化

5.字符实体

6.综合案例一

<ul>
    <li>
      <img src="./images/1.jpg" alt="">
      <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
    </li>
    <li>
      <img src="./images/2.jpg" alt="">
      <h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3>
    </li>
    <li>
      <img src="./images/3.jpg" alt="">
      <h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
    </li>
  </ul>

7.综合案例二

<body>
  <h1>注册信息</h1>
  <form action="">
    <!-- 表单控件 -->
    <!-- 个人信息 -->
    <h2>个人信息</h2>
    <label>姓名：</label><input type="text" placeholder="请输入真实姓名">
    <br><br>
    <label>密码：</label><input type="password" placeholder="请输入密码">
    <br><br>
    <label>确认密码：</label><input type="password" placeholder="请输入确认密码">
    <br><br>
    <label>性别：</label>
    <input type="radio" name="gender" id="man"> <label for="man">男</label>
    <label><input type="radio" name="gender" checked> 女</label>
    <br><br>
    <label>居住城市：</label>
    <select>
      <option>北京</option>
      <option>上海</option>
      <option>广州</option>
      <option>深圳</option>
      <option>武汉</option>
    </select>
    <!-- 教育经历 -->
    <h2>教育经历</h2>
    <label>最高学历：</label>
    <select>
      <option>博士</option>
      <option>硕士</option>
      <option>本科</option>
      <option>大专</option>
    </select>
    <br><br>
    <label>学校名称：</label><input type="text">
    <br><br>
    <label>所学专业：</label><input type="text">
    <br><br>
    <label>在校时间：</label>
    <select>
      <option>2015</option>
      <option>2016</option>
      <option>2017</option>
      <option>2018</option>
    </select>
    --
    <select>
      <option>2019</option>
      <option>2020</option>
      <option>2021</option>
      <option>2022</option>
    </select>
    <!-- 工作经历 -->
    <h2>工作经历</h2>
    <label>公司名称：</label><input type="text">
    <br><br>
    <label>工作描述：</label>
    <br>
    <textarea></textarea>
    <br><br>
    <!-- 协议 和 按钮 -->
    <input type="checkbox"><label>已阅读并同意以下协议：</label>
    <ul>
      <li><a href="#">《用户服务协议》</a></li>
      <li><a href="#">《隐私政策》</a></li>
    </ul>
    <br><br>
    <button>免费注册</button>
    <button type="reset">重新填写</button>
  </form>
</body>

总结,表单记得用form,单选框的name属性要相同才能做到单选,并且用label标签扩大范围