HTML

标签分类

• 块级标签(block) 独占一行

• 内联标签(inline) 按文本内容占位

标签

• 标题标签 h后的数字是标题的等级 1--6级

  <h1>
       标题
   </h1>

• 段落标签

  <p>
       段落一
   </p>

• 换行标签

  <br/>

• 文本格式化标签

  <b>定义粗体文本</b><br />
   <strong>定义粗体文本方式2</strong><br />
   <em>定义斜体字</em><br />
   <i>定义斜体字方式2</i><br />
   <del>定义删除文本</del><br />

• 超链接标签

  <a href="http://www.baidu.com" title="度娘11" target="_blank">度娘</a>

  • href: 网络地址

  • title: 鼠标停放时显示的信息

  • target: _black 新窗口打开

    _self 本身窗口打开

    _parent 父级框架打开

    _top 顶层框架打开

• 锚点标签(可实现页面内的跳转或者返回顶点功能)

  <a href="#c3" id="top">第一章</a>
   <div id="c3"><a href="#top">返回顶点</a></div>

  上述代码可以实现:点击第一章标签跳转到id=c3的标签

  点击返回顶点标签跳转到第一章

• 图片标签

  <img src="" alt="">

  src是图片的地址 本地或者网络地址都可以，地址错误时显示错误

  alt是当图片显示错误时给用户的提示文字

  图片与链接

  <a><img src="" alt=""></a>

• 列表标签

  <!--unorder list--> 无序列表
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>
   <!--order list-->  有序列表
   <ol start="100">
       <li>4</li>
       <li>5</li>
       <li>6</li>
   </ol>

  有序列表可以设置初始值start

• 表格列表

  <table border="1">
     <tr>
       <td>单元格的内容</td>
       ……
     </tr>
     ……
   </table>

  border是设置整个表格的边框宽度 默认0 表示不显示边r框

  <tr></tr>是一行的开始和结束，计算表格中的<tr>对子可以知道表格又多少行

  <td></td>是一个单元格的开始和结束，计算<tr>中有多少<td>可以知道表格有多少单元格

• 表格属性

  属性	值	描述
  width	px、%	规定表格的宽度。
  height	px、%	规定表格的高度。
  align	left、center、right	规定表格相对周围元素的对齐方式。
  bgcolor	rgb(x,x,x)、#xxxxxx、colorname	规定表格的背景颜色。
  background	url	规定表格的背景图片。
  border	px	规定表格边框的宽度。
  cellpadding	px、%	规定单元格边框与其内容之间的空白。
  cellspacing	px、%	规定单元格之间的空隙。

• 单元格属性

  属性	值	描述
  height	px、%	规定单元格的高度。
  width	px、%	规定单元格的宽度。
  align	left、center、right	规定单元格内容的对齐方式。
  valign	top、middle、bottom	规定单元格内容的垂直对齐方式。
  bgcolor	rgb(x,x,x)、#xxxxxx、colorname	规定单元格的背景颜色。
  background	url	规定单元格的背景图片。
  rowspan	number	规定单元格合并的行数
  colspan	number	规定单元格合并的列数

• 表单标签FORM

  表单包括：表单标签 包括了提交的方法

  表单域 文本框 密码框 隐藏域 多行文本 单选复选框 下拉等

  表单按钮 提交 复位 一般按钮

  form属性

  属性	值	描述
  action	访问服务器地址	服务器端表单处理程序的URL地址
  method	post、get[默认值]	表单数据的提交方法
  target	参考超链接的target属性	表单数据提交时URL的打开方式
  enctype	application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送]	表单提交数据时的编码方式

  <h3>用户注册</h3>
   ​
     <form action="http://127.0.0.1:8800" method="get">
          <p><label for="user">姓名</label>： <input type="text" name="user" id="user"></p>
          <p>密码： <input type="password" name="pwd"></p>
          <p>爱好：
              <input type="checkbox" name="hobby" value="basketball">篮球
              <input type="checkbox" name="hobby" value="football">足球
              <input type="checkbox" name="hobby" value="shuangseqiu" checked>双色球
          </p>
          <p>性别：
              <input type="radio" name="gender" value="men">男
              <input type="radio" name="gender" value="female">女
              <input type="radio" name="gender" value="qita">其他
          </p>
         <p>生日：<input type="date" name="birth"></p>
         
         <p>籍贯：
             <select name="province" id="" multiple size="2">
                 <option value="">广东省</option>
                 <option value="" selected>山东省</option>
                 <option value="">河北省</option>
             </select>
         </p>
         <p>
             <textarea name="" id="" cols="30" rows="10" placeholder="个人简介"></textarea>
         </p>
   ​
         <div>
             <p><input type="reset" value="重置"></p>
             <p><input type="button" value="普通按钮"></p>
             <p><button>普通按钮</button></p>
             <p><input type="submit" value="提交"></p>
         </div>
   ​
     </form>
   ​

  一般向服务端发送信息时，使用post方法，get方法会将输入的键值对放在地址的后面，暴露信息

  <label for="user">姓名</label>： <input type="text" name="user" id="user">设置点击姓名时会使光标定位在后面的input type=“text”的文本框中

  <input type="password" name="pwd">可以使输入的信息显示······

  <input type="checkbox" name="hobby" value="basketball">篮球 复选框

  <input type="radio" name="gender" value="men">男 单选框

  <select name="province" id="" multiple size="2">
                 <option value="">广东省</option>
                 <option value="" selected>山东省</option>
                 <option value="">河北省</option>
   </select>

  下拉框 selected="selected" 是默认值

  <textarea name="" id="" cols="30" rows="10" placeholder="个人简介"></textarea> 多行文本框

  <p><input type="reset" value="重置"></p>
             <p><input type="button" value="普通按钮"></p>
             <p><button>普通按钮</button></p>
             <p><input type="submit" value="提交"></p>

  type="reset" 重置表单域除去单选框的所有

  type="submit" 向服务端发送数据