HTML

HTML

1.网页的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

2.网页的基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <p>段落标签</p>
    <strong>加粗</strong>
    <em>斜体</em>
    <!--换行<br/>-->
    <p>tttt<br/>ttttt</p>
<!--    水平线  <hr>  -->
    <hr>
<!--    空格符 &nbsp; -->
    <p>空&nbsp;&nbsp;&nbsp;&nbsp;格</p>
</body>
</html>

3.图像标签（img）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--    图像标签-->
    <img src="../resource/10001.jpeg" alt="夜欢的图片" title="img">
</body>
</html>

4.超链接（a）

  • 一定要有href
  • target
    • _blank:跳转到新的页面
    • _self：默认在当前页面跳转
<a href="1.我的第一个网页.html" target="_blank">点击进入第一个页面</a>

锚链接：（回到顶部）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--锚链接-->
<a id="top">顶部</a>
<a href="1.我的第一个网页.html" target="_blank">点击进入第一个页面</a>
<p>
  <img src="../resource/10002.jpeg" alt="">
</p>
<p>
  <img src="../resource/10002.jpeg" alt="">
</p><p>
  <img src="../resource/10002.jpeg" alt="">
</p>
<p>
  <img src="../resource/10002.jpeg" alt="">
</p>
<p>
  <img src="../resource/10002.jpeg" alt="">
</p>
<p>
  <img src="../resource/10002.jpeg" alt="">
</p>
<p>
  <img src="../resource/10002.jpeg" alt="">
</p>

<a href="#top">回到顶部</a>
</body>
</html>

5.行内元素和块元素

  • 行内元素不从新行开始，只占用必要宽度；
  • 块级元素总是从新行开始，并占用其父元素的可用的全部宽度。（独占一行）

6.列表

  • 有序列表
  • 无序列表
  • 自定义列表
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表的学习</title>
</head>
<body>
<!-- 有序列表-->
<ol>
  <li>Java</li>
  <li>Python</li>
  <li>运维</li>
  <li>前端</li>
  <li>C</li>
</ol>
<!-- 无序列表-->
<hr>
<ul>
  <li>Java</li>
  <li>Python</li>
  <li>运维</li>
  <li>前端</li>
  <li>C</li>
</ul>
<!-- 自定义列表-->
<dl>
  <dt>学科</dt>

  <dd>JAVA</dd>
  <dd>Python</dd>
  <dd>运维</dd>
  <dd>前端</dd>
</dl>
</body>
</html>

7.表格（table）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格学习</title>
</head>
<body>
<table border="1px">
  <tr>
<!--  colspan  跨列-->
    <td colspan="4">1-1</td>
  </tr>
  <tr>
    <td rowspan="2">1-1</td>
    <td>1-2</td>
    <td>1-3</td>
    <td>1-4</td>
  </tr>
  <tr>
    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>
  </tr>
</table>
</body>
</html>

8.媒体元素

  • 视频元素 vedio
  • 音频元素 audio

controls：控制器

autoplay：自动播放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<video src="#" controls autoplay></video>
<audio src="#" controls autoplay></audio>
</body>
</html>

9.网页的简单布局

  • header——标题头部区域的内容（用于页面或页面中的一块区域）

  • footer——标记脚部区域的内容（用于整个页面或页面的一块区域）

  • section——Web页面中的一块独立区域

  • article——独立的文章内容

  • aside——相关内容或应用（常用于侧边栏）

  • nav——导航类辅助内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>
<hearder>
    <h2>头部</h2>
</hearder>

<footer>
    <h4>脚部</h4>
</footer>
<!--nav：导航-->
</body>
</html>

10.内联框架（iframe）

在新创建的页面里面首先会展示iframe src所指向的地址的内容，如果是视频则是视频，如果是网站则是网站，根据自己的界面设计要求设置该引用界面的长宽。

然后再设置便签a，使其通过点击跳转到所要的界面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<iframe src="" name="hello" frameborder="0" width="1000px" height="800px"></iframe>
<a href="1.我的第一个网页.html" target="hello">点击跳转</a>
</body>
</html>

11.表单

  • type——指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button，默认为text。

  • name——指定表单元素的名称

  • value——元素的初始值。type为radio时必须制定一个值

  • size——指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位

  • maxlength——type为text或password时，输入的最大字符数

  • checked——type为radio或checkbos时，指定按钮是否是被选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
  <h1>注册</h1>
  <form action="1.我的第一个网页.html" method="get">
    <p>用户名：<input type="text" name="usename" placeholder="请输入用户名" required maxlength="8" size="30" ></p>
    <p>密码：<input type="password" name="psd" hidden="hidden"></p>

    <!--
       单选框
       input type="radio"
       value:单选框的值
       name:表示组
       -->
    <p>性别：
      <input type="radio" value="boy" name="sex" checked disabled>男
      <input type="radio" value="girl" name="sex">女
    </p>

<!--
    多选框
    input type:"checkbox"
-->
    <p>爱好：
      <input type="checkbox" value="sleep" name="hoppy">睡觉
      <input type="checkbox" value="code" name="hoppy" checked>敲代码
      <input type="checkbox" value="chat" name="hoppy">聊天
      <input type="checkbox" value="game" name="hoppy">游戏
    </p>

<!--    按钮-->
    <p>按钮
      <input type="button" value="点击变长" name="btn1">
      <input type="image" src="../resource/10005.jpeg">
    </p>
<!--下拉框-->
    <p>国家：
      <select name="列表名称">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="eth" selected>瑞士</option>
        <option value="yindu">印度</option>
      </select>
    </p>

<!--    文本域-->
    <p>反馈：
      <textarea name="textarea"  cols="30" rows="10"></textarea>
    </p>

    <!--    文件域-->
    <p>
      <input type="file" name="files">
      <input type="button" value="上传" name="btn2">
    </p>

<!--    邮件验证-->
    <p>邮箱：
      <input type="email" name="email">
    </p>

    <!--    URL-->
    <p>URL：
      <input type="url" name="url">
    </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" id="mark">
    </p>

  <p>自定义邮箱：
    <input type="text" name="diymail" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$">
  </p>

    <p>
      <input type="submit" value="提交">
      <input type="reset" value="重置">
    </p>


  </form>

</body>
</html>

12.表单应用

  • 隐藏域 hidden
  • 只读 readonly
  • 禁用 disabled

13.表单的初级验证

  • 用户提示 placeholder
  • 非空判断 required
  • 正则表达式 pattern
posted @ 2025-02-25 19:50  昼冷夜欢  阅读(15)  评论(0)    收藏  举报