HTML总结3

表单标记

向网页上输入内容

文本框，密码框，单选框，复选框，按钮，下拉列表，文本域

  <!-- div和span -->
    <div>div标记</div>
    <div>div标记</div>
    <span>span标记</span>
    <span>span标记</span>
    <!-- 表单标记 -->
    <!-- 
​
  name  定义名字
  value 给文本框/密码框输入的值
  disabled  是否禁用  布尔类型属性，写上就有效(禁用)，不写无效
 -->
    <div>文本框: <input type="text" name="user" value="内容" /></div>
​
    <div>
      密码框: <input type="password" name="pass" value="123" disabled />
    </div>
​
    <!-- 
      name  名字
      value  值
      checked      默认选中
     -->
    <div>
      性别： <input type="radio" name="sex" value="男" checked />男
      <input type="radio" name="sex" value="女" />女
    </div>
​
    <!-- 下拉列表
    name  名字
    value  值
    selected  默认选择
    
    -->
    <select name="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州" selected>广州</option>
    </select>
    <div>
      文本域
      <textarea name="ly" rows="5" cols="4">留言</textarea>
    </div>
    <!-- 
  disabled  禁用
 -->
    <div>
      普通按钮
      <input type="button" value="提交" name="anniu" disabled />
      <button type="button" disabled>按钮</button>
    </div>
    <div>
      提交按钮
      <input type="submit" value="提交" name="tj" />
      <button type="submit" disabled>按钮</button>
    </div>
    <!-- 普通按钮和提交按钮 外观上没有区别  功能上有区别，js中讲 -->

 

路径

相对路径

./          同级目录
./目录名     进入该目录名下
​
../   上一级目录

绝对路径

北京市海淀区xxx路32号xx小区4号楼401室

C:\Users\Administrator\AppData\Roaming\secoresdk\360se6\Application\360se.exe

完整的路径

 

HTML5特点以及新增标签

<body>
    <!-- 1:更简洁 -->
    <img />
    <!-- 2 标签语义化 -->
    <div></div>
    <span></span>
    <header>头部</header>
    <footer>底部</footer>
    <main>主体</main>
    <nav>导航连接</nav>
​
    <section>内容区块</section>
    <article>内容</article>
​
    <video controls width="400" height="400" autoplay>
      <source type="video/mp4" src="./videos/c.mp4" />
    </video>
    <audio controls src="./music/MC高迪 - 一人我饮酒醉.mp3"></audio>
    <!-- 设置多个音频 -->
    <audio controls>
      <source src="./music/MC高迪 - 一人我饮酒醉.mp3" type="audio/mp3" />
    </audio>
​
    <!-- datalist   提供一个事先定义好的列表  通过id和input关联-->
    <p>浏览器版本<input list="words" /></p>
​
    <datalist id="words">
      <option value="Firefox">Firefox</option>
      <option value="opera">opera</option>
      <option value="sogou">sogou</option>
      <option value="safari">safari</option>
    </datalist>
    
     <!-- H5新增的表单元素 -->
​
    <!-- form 用来收集用户提交的数据，发送到服务器 -->
    <form>
      <!-- 专门用来输入email地址的文本框，如果内容不是email地址 就不允许提交 -->
      <!-- label配合input一起使用
        label的for属性和input的id属性值是一致的
        使用label点击文本，浏览器就会自动将焦点转到和该标签相关联的控件上
       -->
      <label for="email">
        邮箱
        <input type="email" id="email" name="a" />
      </label>
      <!-- 专门用来输入url地址的文本框 如果内容不是url地址格式 就不允许提交 -->
      地址
      <input type="url" name="b" />
      <!-- 专门用来输入数字的文本框  提交时会检查内容是否为数字-->
      <input type="number" name="n" />
      <!-- 只允许输入一段范围内数值的文本框  value当前的值   min最小值  max最大值 step每次拖动的步幅 -->
      <input type="range" value="25" min="0" max="100" step="5" />
​
      <input type="date" />
      <input type="month" />
      <input type="week" />
      <input type="datetime" />
      
       <!--placeholder 文本框处于未输入状态时 文本框中显示的提示信息 
      autofocus  自动获取焦点  一个页面只能有一个
      required  必填项 
    -->
      <input
        type="text"
        required
        name="user"
        autofocus
        placeholder="请输入用户名"
      />
      <!-- 提交按钮 -->
      <input type="submit" />
    </form>
  </body>
</html>
​
 

posted on 2022-07-07 20:28  7891asdf156  阅读(28)  评论(0)    收藏  举报

导航