1. iframe标签

作用：嵌套界面

<iframe name=xxx src="#" frameborder="0"></iframe>
<a target=xxx href="http://qq.com">QQ</a>

可以在嵌套界面里打开指定界面QQ
frameborder="0"设置隐形边框

嵌套界面支持相对路径

src="./index2.html"
可以支持嵌套本地相对路径的文件

2. a标签(anchor定义锚)

作用：跳转页面（HTTP GET 请求），href 属性指示链接的目标。
target属性：

<a href="http://qq.com" target="_blank">blankQQ</a>
_balnk在空界面打开
<a href="http://qq.com" target="_self">selfQQ</a>
_self在本界面打开
<a href="http://qq.com" target="_parent">parentQQ</a>
_parent在父亲界面打开，意思就是如果该标签在嵌套的iframe里面，则打开它的上一级界面
<a href="http://qq.com" target="_top">topQQ</a>
_top如果存在iframe三级嵌套，就在最top界面打开

download属性
<a href="http://qq.com" download>下载</a>
会直接下载HTML文件（有时候会出现浏览器兼容问题）
href属性

href ="http://qq.com"跳转http协议下的某个域名
href="//qq.com"表示与当前文件协议相同，当前文件如果是file协议，如果想成功访问http://qq.com，需要将当前页面变成http协议，
方法1：上传至github，使用页面预览功能
方法2：下载一个工具http-server,命令行输入 hs -c-1，相当于运行一个node.js服务器，访问http协议下的IP地址http://127.0.0.1:8080/
href=#xxx跳转页面内的锚点，#表示锚点
href="?name=qq"查询字符串,自动发起GET请求
href="./xxx.html"跳转本地路径的的文件
href="JavaScript: alert(1);"/href="JavaScript:;"JS伪协议，点击可以出现有一个对话框，或者满足一种需求，点击一个标签，不要跳转。

3. form标签

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <form action="users" method="post">
    <label for="yyy">用户名</label>
    <input type="text" name="用户名" id="yyy">
    <label >密码<input type="password" value="密码"></label>
    <br>
    喜欢的水果
    <label><input type="checkbox" name="fruit" value="apple">苹果</label>
    <label><input type="checkbox" name="fruit" value="banana">香蕉</label>
    <hr>
    爱我
    <label><input type="radio" name="loveme" value="yes">爱</label>  
    <label><input type="radio" name="loveme" value="no">不爱</label>    
    <select name="group" multiple>
      <option value="">--</option>
      <option value="1">第一组</option>
      <option value="2">第二组</option>
      <option value="3" disabled>第三组</option>
      <option value="4" selected>第四组</option>
    </select>
    <br>
    <textarea name="爱好" style="resize: none;width: 100px;height:50px;"></textarea>
    <!-- <textarea name="爱好" cols="30" rows="10"></textarea> -->
    <input type="submit" value="提交">
  </form> 
</body>
</html>

作用：<form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段（textarea）、复选框(checkbox)、下拉菜单（select）、单选框(radio)、提交按钮(submit)等等。只有声明name属性才能提交：name表示提交名字，value表示提交的值，表单用于向服务器传输数据。（发送HTTP POST 请求）

<form action="users" method="POST">
      <input type="text" name="用户名">
      <input type="password" value="密码">
      <input type="submit" value="提交">
 </form>

target属性和<a>一样，可以支持iframe标签
input标签里的type

submit/button
必须要有提交按钮，否则表单内的内容无法提交
<input type="submit" value="提交">,<input type="button" value="提交">
type="submit"表示提交，type="button"只表示普通按钮，
但是只有<button>button</button>时默认为提交。
text
表示输入的用户名用户名<input type="text" name="用户名" >
password
表示输入的密码密码<input type="password" value="密码">
checkbox(复选框)

<input type="checkbox" name="fruit" value="apple">苹果
<input type="checkbox" name="fruit" value="banana">香蕉

radio(单选框)

<input type="radio" name="loveme" value="yes">爱我
<input type="radio" name="loveme" value="no">不爱

name设置相同时设置单选

text/password/checkbox/radio设置文字与输入或选中部分相关联的两种方法
1 用<label></label>将input包含（常用）
<label><input type="checkbox" name="fruit" value="apple">苹果</label>
2 设置label的for与input的id对应

<label for="yyy">用户名</label>
<input type="text" name="用户名" id="yyy">

select(下拉菜单)

<select name="group" multiple>
        <option value="">--</option>
        <option value="1">第一组</option>
        <option value="2">第二组</option>
        <option value="3" disabled>第三组</option>
        <option value="4" selected>第四组</option>
</select>

默认选择：selected，不可选：disabled，可多选：multiple

textarea(文本字段)

<textarea name="爱好" style="resize: none;width: 100px;height:50px;"></textarea>
<!-- <textarea name="爱好" cols="30" rows="10"></textarea> -->

设置文本框大小：用CSS精确设置；或者用默认的cols和rows（不精确）

4. table标签（表格）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
   table{
    border-collapse: collapse;
   }
  </style>
</head>
<body>
 <table border="2">
   <colgroup>
    <col width =100>
    <col width =50 bgcolor= gray>
    <col width =150>
   </colgroup>
  <tbody>
    <tr>
     <th>姓名</th><th>班级</th><th>分数</th>
    </tr>
    <tr>
     <td>小明</td><td>1</td><td>95</td>
    </tr>
    <tr>
      <td>小红</td><td>2</td><td>96</td>
    </tr>
  </tbody> 
 </table> 
</body>
</html>

border="2"设置边框粗细
tabel是逐行写的：<tbody>表示主题，<tr>每行，<th>标题，<td>数据
<colgroup>设置每一列的宽和颜色
<style>里设置每列距离为0

5. 几种列表

描述列表<dl>，通常用于展示词汇表或者元数据 (键-值对列表)。

<dl>
  <dt>年龄</dt>    (Description Term)
  <dd>18</dd>     (Description Details)
  <dt>所在城市</dt>
  <dd>北京</dd>
</dl>

有序列表<ol>

      <ol>
        <li>HTML 5 &amp; CSS 3</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue</li>
        <li>React</li>
        <li>HTTP</li>
      </ol>

无序列表

        <ul >
          <li><a href="#">关于</a></li>
          <li><a href="#">技能</a></li>
          <li><a href="#">作品</a></li>
          <li><a href="#">博客</a></li>
          <li><a href="#">日历</a></li>
          <li><a href="#">联系方式</a></li>
          <li><a href="#">其他</a></li>
        </ul>

HTML标签

HTML标签

1. iframe标签

2. a标签(anchor定义锚)

3. form标签

4. table标签（表格）

5. 几种列表

相关阅读更多精彩内容

友情链接更多精彩内容