初级HTML

HTML5

一.基本标签

 <!--标题标签-->
 <h1>一级标签</h1>
 <h2>二级标签</h2>
 <h3>三级标签</h3>
 <h4>四级标签</h4>
 <h5>五级标签</h5>
 <h6>刘级标签</h6>
 ​
 <!--段落标签-->
 <p>美术顾问：龙思良</p>
 <p>音乐：张弘毅</p>
 <p>助理制片：梁开源</p>
 ​
 <!--水平线标签-->
 <hr>
 ​
 <!--换行标签-->
 美术顾问：龙思良<br/>
 音乐：张弘毅<br/>
 助理制片：梁开源<br/>
 发型设计：麦可<br/>
 ​
 <!--粗体 斜体-->
 <h1>字体样式标签</h1>
 ​
 粗体： <strong>i love you</strong> <br/>
 斜体：<em>i love you</em>
 <br/>
 <!--特殊符号-->
 ​
 空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
 <br/>
 大于号&gt;
 <br/>
 小于号&lt;
 <br/>
 版权号&copy;版权所有

 

 ​

 

图像标签

 <!-- 图像标签-->
 <img src="../resources/img/1.jpg" alt="鹏头像" title="悬停文字" width="300" height="400">

 

 

 

二.超链接

1.超链接

 <!--
     a 标签  链接
     herf： 跳转到哪个页面
     target  表示窗口在哪里打开
         _blank  在新页面打开
         _self  在当前页面打开
 ​
 -->
 <a href="图像标签.html" target="_blank">点击我跳转到页面一</a>
 <br/>
 <a href="https://www.baidu.com" target="_self">百度</a>
 <br/>

 

 

2.锚链接

 

 ​
 

<!--
         锚链接
         1.需要一个锚标记
         2.跳转到标记
 ​
 -->
 <a name="top"></a>
 ​
 ​
 <a href="#top">回到顶部</a>

 

3.功能性链接

 <a href="mailto:675251825@qq.com">点击联系我</a>

 

 

三、列表

1.有序列表

 <!--有序列表
 ​
     应用范围;试卷、问答
     -->
 <ol>
     <li>Java</li>
     <li>前端</li>
     <li>游戏</li>
     <li>吃喝玩乐</li>
 </ol>

 

 

2.无序列表

 

 <!--无序列表
     应用范围;导航、侧边栏
 -->
 <ul>
     <li>Java</li>
     <li>前端</li>
     <li>游戏</li>
     <li>吃喝玩乐</li>
 </ul>

 

 

3.自定义列表

<!--自定义列表
     dl 标签
     dt 列表名称
     dd 列表内容
 ​
     应用范围  公司底部
     -->
 <dl>
     <dt>生活</dt>
 ​
     <dd>喝</dd>
     <dd>玩</dd>
     <dd>乐</dd>
     <dd>学</dd>
     <dd>忘</dd>
 <hr/>
     <dt>位置</dt>
     <dd>北京</dd>
     <dd>上海</dd>
     <dd>广东</dd>
 </dl>

 

 

四、表格

 <!--表格 table
     行 tr
     列 td
     border 边框
     -->
 <table border="2px">
     <tr>
         <!--colspan 跨列-->
         <td colspan="4">1.1</td>
     </tr>
 ​
     <tr>
         <!--跨行rowspan-->
         <td rowspan="2">2.1</td>
         <td>2.2</td>
         <td>2.3</td>
         <td>2.4</td>
     </tr>
 ​
     <tr>
         <td>3.1</td>
         <td>3.2</td>
         <td>3.3</td>
     </tr>
 ​

 

 

 

五、媒体

<!--音频和视频
     autoplay 打开就播放
     muted 静音
 ​
 -->
 ​
 <video muted src="../resources/video/1.mp4" controls autoplay="autoplay" width="450" height="700"></video>
 ​
 <audio src="../resources/audio/飞鸟和蝉%20-%20任然.mp3" controls autoplay></audio>
 

 

五、页面结构

元素名	描述
header	标题头部区域（用于页面或页面中的一块区域）
footer	标记脚部区域的内容（用于整个页面或页面的一块区域）
section	web页面中的一块独立区域
artcle	独立的文章内容
aside	相关内容或应用（常用于侧边栏）
nav	导航类辅助内容

 

五、内联框架

 <!--    iframe 内联框架
 -->
 <iframe src="https://www.baidu.com" frameborder="0" width="900" height="1000"></iframe>ame

 

 ​

 

六 表单

<h1>注册</h1>
 <!--表单 form
     action 表单提交位置，网站/请求处理地址
     method post get 提交方式
         get 可以在url中看见我们提交的信息， 不安全 高效
         post 比较安全 传输大文件
 -->
 <form action="first4.html" method="post">
     <!-- type="text"
     value="pengpeng" 默认初始值
     maxlength="8"   最长能写几个字符
     size="30"       文本框的长度
     -->
     <p>名字 <input type="text" name="username" ></p>
     <p>密码 <input type="password" name="userpassword"></p>
 ​
 ​
     <!--单选框
     type="radio"
     value 单选框的值
     name 表示组
     -->
     <p>
         性别：
         <input type="radio" value="boy" name="sex"/>男
         <input type="radio" value="girl" name="sex"/>女
     </p>
     
     
 ​
 ​
     <p>
         <input type="submit">
         <input type="reset">
     </p>
 ​
 </form>

 

多选框 和按钮

<!--按钮
     type="button"  普通按钮
     type="image"   图像按钮
     type="submit"   提交按钮
     type="reset"    重置按钮
 ​
     -->
     <p>
         <input type="button" name="button" value="点击">
         <input type="image" src="../resources/img/1.jpg">
     </p>
 ​
  <!--多选框-->
     <p>爱好：
         <input type="checkbox" value="sleep" name="hobby">睡觉
         <input type="checkbox" value="eat" name="hobby">吃饭
         <input type="checkbox" value="code" name="hobby">代码
         <input type="checkbox" value="chat" name="hobby">聊天
     </p>

 

列表框 文本域 文件域

<!--  下拉框，列表框  -->
     <p>国家：
         <select name="列表名称">
             <option value="选项的值">中国</option>
             <option value="选项的值">美国</option>
             <option value="选项的值">日本</option>
             <option value="选项的值" selected>韩国</option>
         </select>
     </p>
 ​
     <!--文本域
     cols="30"   列
      rows="10"  行
     -->
 ​
     <p>反馈：
         <textarea name="textarea" cols="30" rows="10">文办内容</textarea>
     </p>
 ​
     <!--文件域-->
     <p>
         <input type="file" name="files">
         <input type="button" value="上传" name="upload">
     </p>
  <!--邮箱验证-->
     <p>
         <input type="email" name="email">
     </p>
     <!--URL验证-->
     <p>
         <input type="url" name="url">
     </p>
     <!--数字验证-->
     <p>
         <input type="number" name="number" max="100" min="10">
     </p>
     <!--滑块-->
 ​
     <p>
         <input type="range" name="voice" min="0" max="100">
     </p>
     <!--搜索框-->
     <p>
         <input type="search" name="search">
     </p>