速通web前端的sun-----web前端三剑客之html（二）

本文链接：https://blog.youkuaiyun.com/pinenutssg1/article/details/121786456

每个知识点都需要勤加练习，每天进步一点点，共勉。

超链接

1.1. 空链接
在这里插入图片描述

1.2. 锚点链接
在这里插入图片描述

这里对于锚点（maodian）链接，也可以设置name属性，详情可以参见：
https://web.qianguyihao.com/01-HTML/05-HTML%E6%A0%87%E7%AD%BE%EF%BC%9A%E5%AD%97%E4%BD%93%E6%A0%87%E7%AD%BE%E5%92%8C%E8%B6%85%E9%93%BE%E6%8E%A5.html#_2%E3%80%81%E9%94%9A%E9%93%BE%E6%8E%A5

插入图和背景图的区别
列表
3.1. 无序列表

3.2. 有序列表
在这里插入图片描述

3.3. 自定义列表
在这里插入图片描述

表格

自己实现：

<!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 align="center" border="1" cellspacing="0" width="800" height="400">
    <caption><h1>课程表</h1></caption>
    <tr align="center" bgcolor="red">
      <td>项目</td>
      <td colspan="5">上课</td>
      <td colspan="2">休息</td>
    </tr>
    <tr align="center" bgcolor="#00ccff">
      <td>星期</td>
      <td>星期一</td>
      <td>星期二</td>
      <td>星期三</td>
      <td>星期四</td>
      <td>星期五</td>
      <td>星期六</td>
      <td>星期日</td>
    </tr>
    <tr align="center">
      <td rowspan="4">上午</td>
      <td>语文</td>
      <td>数学</td>
      <td>体育</td>
      <td>生理</td>
      <td>情感</td>
      <td>电竞</td>
      <td rowspan="4">休息</td>
    </tr>
    <tr align="center">
      <td>语文</td>
      <td>数学</td>
      <td>体育</td>
      <td>生理</td>
      <td>情感</td>
      <td>电竞</td>
    </tr>
    <tr align="center">
      <td>语文</td>
      <td>数学</td>
      <td>体育</td>
      <td>生理</td>
      <td>情感</td>
      <td>电竞</td>
    </tr>
    <tr align="center">
      <td>语文</td>
      <td>数学</td>
      <td>体育</td>
      <td>生理</td>
      <td>情感</td>
      <td>电竞</td>
    </tr>
    <tr align="center">
      <td rowspan="2">下午</td>
      <td>语文</td>
      <td>数学</td>
      <td>体育</td>
      <td>生理</td>
      <td>情感</td>
      <td>电竞</td>
      <td rowspan="2">休息</td>
    </tr>
    <tr align="center">
      <td>语文</td>
      <td>数学</td>
      <td>体育</td>
      <td>生理</td>
      <td>情感</td>
      <td>电竞</td>
    </tr>
  </table>
</body>
</html>

表单

自己实现：

<!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 action="https://www.baidu.com/">
    <label for="name">姓名：</label>
    <input type="text" value="请输入您的名字" id="name">
    <br>
    性别：<input type="radio" id="male" name="gender" checked><label for="male">帅哥</label></input>
         <input type="radio" id="female" name="gender"><label for="female">靓妹</label></input>
    <br>
    密码：<input type="password">
    <br>
    邮件：<input type="text">
    <br>
    地址：<input type="text">
    <br>
    国家：<select name="guojia" id="goujia">
      <option value="China" checked>中国</option>
      <option value="Japanse">日本</option>
    </select>
    <select name="guojia" id="guojia">
      <optgroup label="亚洲">
        <option value="China">中国</option>
        <option value="Japanse">日本</option>
      </optgroup>
    </select>
    <br>
    邮寄方式：<input type="checkbox" name="youtype">电子邮件
            <input type="checkbox" name="youtype">邮寄
            <input type="checkbox" name="youtype">自取
    <br>
    公司简介：<textarea></textarea>
    <br>
    <input type="submit">
    <input type="reset">
  </form>
</body>
</html>

特殊字符