HTML 基础语法与常用标签详解 | 极客日志

HTML 基础语法与常用标签详解 | 极客日志

<a href="https://example.com">个人主页</a> <!-- href，代表点击后跳转的页面 --> <!-- target，打开方式，默认是_self，如果是_blank，则是打开新的标签页 -->

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>专业</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>18</td>
    <td>计科</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>20</td>
    <td>软工</td>
  </tr>
</table>

<!-- px 是像素 -->
<table style="width: 100%; border: 1px solid black;">
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>专业</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>18</td>
    <td>计科</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>20</td>
    <td>软工</td>
  </tr>
</table>

<!-- 文本框 -->
<input type="text">
<!-- 密码框 -->
<input type="password">

<!-- 单选框：多个选项只能选一个，单选题 -->
你上课在干嘛？
<input type="radio" name="1">睡觉
<!-- name 的值是可以随便取的，但三者必须一致 -->
<input type="radio" name="1">学习
<input type="radio" name="1">看手机

<!-- 复选框：多个选项可以选多个，多选题 -->
你的爱好是什么？
<input type="checkbox">干饭
<input type="checkbox">睡觉
<input type="checkbox">玩

<!-- 普通按钮 -->
你的爱好是什么？
<input type="button" value="干饭">
<input type="button" value="睡觉">
<input type="button" value="玩">

<form>
  姓名：
  <input type="text">
  <!-- 提交按钮 -->
  <input type="submit" value="提交">
</form>

标签用于创建下拉列表或滚动列表。它通常与标签一起使用，标签用于定义列表中的选项。家庭住址： <select> <option>北京</option> <option>上海</option> <option>深圳</option> <option>广州</option> </select> textarea 标签 textarea 标签用于创建一个多行文本输入框，可以通过 rows 与 cols 来指定行数与列数。综合以上的标签，我们可以写一个有关个人简介的页面。像下面这样：代码实现： <form action="./Demo3.html">  用户名：<input type="text"><br>  密码：<input type="password"><br>  性别：<input type="radio" name="gender">男 <input type="radio" name="gender">女 <input type="radio" name="gender">保密<br>  兴趣：<input type="checkbox" name="hobby">敲代码 <input type="checkbox" name="hobby">干饭 <input type="checkbox" name="hobby">睡觉 <input type="checkbox" name="hobby">以上都是<br>  专业:<select> <option>计算机科学与技术</option> <option>软件工程</option> <option>网络安全</option> <option>人工智能</option> <option>物联网</option> <option>其他</option> </select><br>  个人描述：<textarea rows="5" cols="50"></textarea><br>  <input type="submit" value="提交"> </form> 运行效果：无语义标签 div&span 无语义的意思就是不表示什么含义。这两个标签可以看成是两个盒子。 div 是一个大盒子，其可以独占一行；span 是一个小盒子，其不能独占一行。注意：div 与 span 标签中是几乎可以放置 HTML 中所有的标签。列表标签列表标签有两种，一种是有序列表，ol；另一种是无序列表，ul。 li 标签表示的是列表项。综合练习：用户登录实现一个下面这样用户登录界面：代码实现： <h1>用户注册</h1> <form action="../图片/1.jpg">  <table>  <tr> <td>用户名</td> <td><input type="text" placeholder="请输入用户名"></td> </tr>  <tr> <td>手机号</td> <td><input type="text" placeholder="请输入手机号"></td> </tr>  <tr> <td>密码</td> <td><input type="password" placeholder="请输入密码"></td> </tr> </table>  <div> <input type="submit" value="注册">已有账号?<a href="#">登录</a> </div> </form> 上面用到了一个新的属性，placeholder，这是一个占位符，当输入框为空时，就会占据输入框，当用户输入时，就会消失。