HTML网页基础

HTML网页基础

1.基本结构

<!--网页基本结构-->      <header> <h2>网页的头部</h2> </header>      <section> <h2>网页主体</h2> </section>      <footer> <h2>网页脚步</h2> </footer> 

2.内联框架

<!--内联框架 iframe  width宽度  height高度-->     <iframe src="https://www.baidu.com" name="hl" frameborder="0" width="300px" height="500px"></iframe> <!--通过a标签来跳转到hl里面-->     <a href="https://user.qzone.qq.com/3187311481" target="hl">点击跳转</a>  

3.表单语法

<!--表单语法      表单提交的位置:action 可以是一个网站,也可以是一个请求处理     method: post ,  get 提交方式     get提交方式会在浏览器上方显示我们输入的账号密码,所以不安全     post比较安全,传输大文件 -->  <form action="Deom1.html" method="get">  <!-- 文本输入框:input type=text       密码框: input  type=password -->     <p>账号:<input type="text" name="username"> </p>     <p>密码:<input type="password" name="pwd"> </p>     <p>         <input type="submit">         <input type="reset">     </p> </form> 

4.按钮

单选按钮

<!--单选按钮 name值一样的情况下才可以只选择其中一个,否则会全部选中-->      <input type="radio" name="sex"><input type="radio" name="sex">

多选按钮

<!--多选按钮 -->      <input type="checkbox" >睡觉     <input type="checkbox" >泡澡     <input type="checkbox" >沐浴 

5.下拉列表

<!--下拉列表-->       <select>          <option>1</option>         <option>2</option>         <option>3</option>         <option>4</option>      </select> 

6.文件域

<!--文件域  input标签都是name加上上传的东西 以键值对的形式昂-->      <p>         <input type="file" name="files">     </p> 

7.email邮件判断

<!--email邮件判断  这只是初级验证,往后咱们用JS来进行验证-->  <input type="email" name="email"> 

8.滑块

<!--滑块--> 音量: <input type="range" min="0" max="100" name="voice"> 

9.搜索

<!--搜索-->     <input type="search" name="search"> 

10.禁用&隐藏

<input type="submit" disabled> <input type="submit" hidden> <!--disabled 是禁用域--> <!--hidden   是隐藏域--> 

11.增强

<!--增强鼠标可用性  点击文字可以直接选中所属ID的文本框-->      <label for="mark">你点我试试看</label>     <input type="text" id="mark"> 

12.表单初级验证

<!-- 	 placeholder:提示性的消息 	 required:非空判断,必须填写内容	 	 pattern: 正则表达式 	 正则表达式速查表网址:https://www.jb51.net/tools/regexsc.htm	 --> 	<p>账号:<input type="text" name="username" placeholder="请输入用户名" required  pattern=""> </p>     <p>密码:<input type="password" name="pwd"> </p> 
版权声明:玥玥 发表于 2021-03-10 13:59:24。
转载请注明:HTML网页基础 | 女黑客导航