HTML笔记

HTML笔记

基本标签

标题标签

• <h1>一级标签</h1>
  <h1>二级标签</h1>
  ...
  

段落标签

• <p>用来分段的</p>
  

换行标签

• <hr><!--换行标签,文字行距会很紧凑-->
  

水平先标签

• <hr/>
  

文字标签

• <strong>字体加粗</strong>
  <em>文字斜体</em>
  

特殊符号

• &nbsp;<!--空格符号-->
  &gt;<!--大于符号-->
  &lt;&<!--小于符号-->
  &copy<!--版权符号-->
  <!--万能方法:IDEA直接输入&会自动提示不用记忆-->
  

图像标签

<img src="" alt="" title="" width="" high="">
<!--src表示图片路径(推荐使用相对路径,假当前项目下的图片地址),alt表示出错显示的名称
title表示鼠标停留在图片上悬停的文字-->

链接标签

• 文本超链接

• <!--(1)页面间链接即从一个页面链接到另一个页面-->
  <a href="点击跳转到第一个网页.HTML" target="">点击跳转到第一个网页</a>
  <!--
  a标签
  href:必填,表示要跳转到哪个页面	
  target:表示窗口在哪里打开
  	_blank表示在新标签打开
  	_self表示在自己网页中打开
  	-->
  <!--(2)锚链接-->
  <a name="top">顶部</a>
  .
  .
  .
  <a href="#top">回到顶部</a>
  <!--邮件链接-->
  	<a href="mailto+邮件账号">点击联系我 </a>
  

行内元素和块元素

• 块元素: 无论内容多少,该元素独占一行
• 行内元素: 内容撑开宽度,左右都是行内元素的可以排在一行

列表标签

• 分类:

  • 无序列表

  • <ul>
    <li>内容</li>
    </ul>
    

  • 有序列表

  • <ol>
    <li>内容</li>
    </ol>
    

  • 自定义列表

  • <dl><!--标签-->
        <dt>列表名称</dt>
        <dd>列表内容</dd>
    </dl>
    

表格标签

<!--(行tr);(列td)-->
<!--在td标签中加colspan="n"跨n列-->
<!--在td标签中加rowspan="n"跨n行
	border生成边框-->
<table border="1px">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>2-1</td>
        <td>2-2</td>
    </tr>
</table>

视频和音频标签

• 视频元素:video
• 音频元素:audio
• 参数:controls表示自动播放
• 参数:src表示路径

iframe内联框架

• src:地址
• w–h:宽度高度
• name:框架标识名

<iframe src="path"name=""></iframe>

表单

• action:表单提交的位置,可以是网站,也可以是请求处理的地址

• radonly:只读属性,disable:禁用属性

• hidden:隐藏属性

• get:在url可以看到提交的信息

• Post:较为安全,传输大文件

             
    <!--文本输入框:input type="text" 文本框的提示信息:placeholder="xxx" 文本框的非空判断required-->           <p>名字:<input type="text"name="username"></p>
      <p>密码:<input type="text" name="pwd"></p>
      <!--单选框
  input: type+"radio"
  value: 单选框的值
  name: 表示组
  -->
      <p>性别:
      <input type="radio" value="boy"name="sex">男
      <input type="radio" value="girl"nmae="sex">女
      </p>
  <!--多选框
  
  input type="checkbox"
  -->
      <p>爱好:
          <input type="checkbox" value="sleep"  nmae="hobby">睡觉
          <input type="checkbox" value="code"  nmae="hobby">敲代码
      </p>
  <!--普通按钮-->
      <p>按钮
         <input type="button" name="btn1" value="点击变长">
  //图片按钮
          <input type="image" src="image--->path">
      </p>
      <!--submit提交按钮,reset重置按钮-->
      <p>
          <input type="submit" name="button" >
          <input type="reset">
      </p>
  </form>>
  
  

表单其他元素

• <!--下拉框-->
  <p>下拉框:
      <selsect name="列表名称">
          <option value="选项的值">中国</option>
          <option value="选项的值">美国</option>
          <option value="选项的值">瑞士</option>
      </selsect>
  </p>
  <!--文本域 cols/rows行列的数据大小-->
  <p>
      <textarea name="textarea" cols="10" rows="50">文本内容</textarea>
      //上传文件
  <input type="file" name="files">
  </p>
  

邮件验证

• <p>
      <input type="email" name="email">
  </p>
  

数字验证

<P>商品数量
  <input type="number" name="num" max="100" min="0" step="10">
</P>

滑块验证

• <p>滑块
      <input type="range" name="voice" min="0" max="100" step="2">
  </p>
  <!--搜索框-->
  <p>搜索:
      <input type="search" name="search">
  </p>
  

表单的应用

增强鼠标可用性

• <p>
   <!--增强鼠标的可用性--> 
      <label for="mark">点我试试 </label>
      <input type="text">
  </p>
  

表单的验证

• 常用方式:

  • placeholder: 文本框提示信息

  • required: 非空判断

  • 正则表达式

    <p>自定义邮箱
        <input type="text" name="diymail" pattern="填写相应需求的正则表达式"> 
    </p>