HTML5

m0_48468417

已于 2022-07-09 08:58:25 修改

阅读量59

点赞数

文章标签： html5 前端 html

于 2022-07-08 21:33:06 首次发布

本文链接：https://blog.csdn.net/m0_48468417/article/details/125676740

版权

W3C标准：

WWWC：万维网联盟，国际中立性技术标准机构

W3C包括：

结构化标准语言（HTML,XML）

表现标准语言（CSS）

行为标准（DOM,ECMAScript）

块元素：

无论内容多少，都独占一行 p h1

块内元素：

可以排在一行（a.strong.em）

页面结构分析：

header:标题头部域的内容

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

section:web页面中的一块独立区域

article:独立的文章内容

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

nav：导航类辅助内容

表单语法：

规定如何发送表单数据常用值

<body>
<h1>注册</h1>
<!--表单form
action:表单提交的位置，可以是网站，也可以是一个请求处理地址
method:post,get提交方式
get方式提交：我们可以在url中看到我们提交的信息，不安全，高效,不可以传输大文件
post：比较安全，传输大文件
-->
<form action="1.我的第一个网页.html" method="get">
<!--文本输入框：input type="text"
value="刘伟不伟" 默认初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
value="admin" readonly 只读，不允许修改
-->
<p>名字：<input type="text" name="username" placeholder="请输入用户名" required></p>
<!--密码框：input type="password"-->
<p>密码：<input type="password" name="pwd" hidden value="123456"required></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="hobby">睡觉
    <input type="checkbox" value="code" name="hobby" checked>敲代码
    <input type="checkbox" value="sleep" name="hobby">聊天
    <input type="checkbox" value="game" name="hobby">游戏
  </p>
<!--  按钮
input type="button" 普通按钮
input type="image"  图像按钮
input type="submit" 提交按钮
input type="reset"  重置按钮
-->
  <p>按钮
    <input type="button" name="btn1" value="点击变长">
    <input type="image" src="../resources/image/4k3.jpg" width="160px" height="90px">
  </p>
<!--  下拉框，列表框-->
  <p>下拉框
    <select name="表单名称国家">
      <option value="china">中国</option>
      <option value="US">美国</option>
      <option value="swiss" selected>瑞士</option>
      <option value="india">印度</option>
    </select>
  </p>
<!--  文本域
 cols="50" 列
 rows="10" 行
 -->
<!--  文件域
input type="file" name="files"-->
  <p>
    <input type="file" name="files">
    <input type="button" value="上传" name="upload">
  </p>
  <p>
    反馈：
    <textarea name="textarea" id="" cols="50" rows="10">文本内容</textarea>
  </p>
<!--  邮箱验证-->
  <p>邮箱：
    <input type="email"name="email"required>
  </p>
<!--  URL获取网址-->
  <p>URL:
    <input type="url" name="url">
  </p>
<!--  数字验证-->
  <p>商品数量
    <input type="number" name="num" max="100" min="0" step="10"required>
  </p>
<!--  滑块
input type="range"
-->
  <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>
<!--  正则表达式检查
https://www.cnblogs.com/licin/p/8118913.html-->
  <p>自定义邮箱：
    <input type="text" name="diymail" pattern="^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$">

  </p>
  <p>
  <input type="submit">
  <input type="reset" value="清空表单">
</p>
</form>
</body>