すのはら荘の雪春原庄的雪

HTML笔记

Toretto·2022-03-25 17:24·35 次阅读

目录

  1. HTML笔记
    1. 基本标签
    2. 图像标签
    3. 超链接标签
    4. 块元素和行内元素
    5. 列表
    6. 表格标签
    7. 媒体元素
    8. 页面结构分析
    9. iframe内联框架
    10. 表单
    11. 表单的初级验证

HTML笔记

HTML笔记

基本标签#

  • <!DOCTYPE html>
    表示html版本
  • <head> </head>
    网页头部标签
  • <title> </titel>
    网页标题
  • <body> </body>
    内容标签
  • <h1> </h1>
    标题标签
  • <hr/>
    自环标签，水平线标签
  • <p> </p>
    段落标签
  • <br/>
    换行标签
  • <strong> </strong>
    加粗
  • <em> <em/>
    斜体

特殊字符：

  •   空格
  • © 版权
  • > 大于符号
  • < 小于符号

图像标签#

图像格式：
JPG、GIF、PNG、BMP（位图）。。。

Copy
 highlighter-hljs
<img src="图片路径" alt="网页中显示的名字" title="悬停文字" width="300" height="400">

其中标签名img表示图像标签，src属性是图片路径；推荐使用想对地址。

超链接标签#

a标签

Copy
 highlighter-hljs
<a href="连接路径">超链接中间显示的文本</a>
<!--图片链接-->
<a href="path">
  <img src="path" alt="name">
</a>
 
<!--
  _bank 在新标签页打开
  _self 在本标签页打开
-->
<a href="" target="_blank">
 
<!--
  锚链接
  需要一个标记，标记也为链接标签，只不过用name属性表示其锚链接
  herf中使用#号加标签名
-->
<a name=""> 锚标签</a>
<a href="#name">
<!--
  邮件链接
  qq链接 qq推广
  target 参数可以跳转至任意一个iframe页面
-->
<a href="mailto:address@address">文本</a>

块元素和行内元素#

  1. 块元素：无论内容多少 该元素独占一行，p标签，h标签
  2. 行内元素：内容撑开宽度，左右都是行内元素的可以在排在一行，如a标签 strong标签 em标签

列表#

使信息结构化和条理化，并以列表的样式显示出来。

列表分为：

  • 无序列表
  • 有序列表
  • 定义列表
Copy
 highlighter-hljs
<!--有序标签-->
<ol>
  <li>content1</li>
  <li>content2</li>
  <li>content...</li>
</ol>
 
<hr/>
<!--
  无序标签
  应用范围：导航栏、侧边栏。。。
-->
<ul>
  <li>content1</li>
  <li>contion,,,,</li>
</ul>
<!--
  自定义标签
  dl:标签
  dt:列表名称
  dd:列表内容
 
  公司网站底部
-->
<dl>
  <dt>表名 </dt>
 
  <dd>content1</dd>
  <dd>content2</dd>
  <dd>content..</dd>
</dl>

表格标签#

基本结构：单元格、行、列、跨行、跨列。

Copy
 highlighter-hljs
<!--表格 table
行 tr
列 td
border 属性指定边界宽度
colspan 属性指定跨列
rowspan 属性指定跨行
-->
<table border="1px">
  <tr>
    <td colspan="2">1-1</td>
    <td>1-2</td>
    <td>1-3</td>
  </tr>
  <tr>
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>
  <tr>
    <td>3-1</td>
    <td>3-2</td>
    <td>3-3</td>
  </tr>
</table>

媒体元素#

视频元素：video
音频元素：audio

Copy
 highlighter-hljs
<!--
音频和视频
video标签：
  src 指定路径
  controls 参数指定视频控制条
  autoplay 指定自动播放
audio标签：
 
--->
<video src="视频资源路径" controls autoplay></video>
 
<audio src="路径" controls autoplay> </audio>

页面结构分析#

Copy
 highlighter-hljs
<body>
 
<header> <h2> 网页头部 </h2> </header>
 
<section>
  <h2>网页主体</h2>
</section>
 
<footer>
  <h2>网页页脚</h2>
</footer>
 
<article>
  <h2>网页文章</h2>
</article>
 
<aside>
  <h2>网页侧边栏</h2>
</aside>
 
<nav>
  <h2>导航类辅助内容</h2>
</nav>
 
</body>

iframe内联框架#

Copy
 highlighter-hljs
<!--内联标签
  src 指明路径，可以是网页可以是视频等等。。
  width
  height
  name
  iframe可以内联一个页面，也可以作为超链载体
-->
<iframe src="路径" name="name" width="x" height="y"></iframe>

表单#

Copy
 highlighter-hljs
<!--表单标签 form
method* ：post或get 提交方式 get方式在url中可以看到不安全但是高效，post方式安全，传输大文件
action* ：表单提交的位置，也可以是一个请求处理地址
type属性表示输入框类型
-->
<form class="" action="动作地址" method="post">
  <p>名字：<input type="text" name="username"></p>
  <p>密码：<input type="password" name="pwd"></p>
  <input type="submit" name="submit" value="">
  <input type="reset" name="reset" value="">
</form>

表单语法：
yufageshi
name 必填。

Copy
 highlighter-hljs
<body>
  <form class="" action="index.html" method="post">
    <!--type = text
    value为默认初始值
    maxlength为最多写几个字符
    size为文本框长度
    -->
    <p> <input type="text" name="123" value="123" maxlength="8" size="30"></p>
    <!--  type = radio 单选框
    value 单选框的值
    name 表示组
    checked 默认选中
    -->
    <p>性别：
    <input type="radio" name="sex" value="boy" checked>男
    <input type="radio" name="sex" value="girl">女
    </p>
    <!-- 多选框
    checkbox
    checked 默认选中
    -->
    <p>
      <input type="checkbox" name="hobby" value="sleep">睡觉
      <input type="checkbox" name="hobby" value="code" checked>敲代码
      <input type="checkbox" name="hobby" value="chat">聊天
      <input type="checkbox" name="hobby" value="game">游戏
    </p>
    <!-- 按钮
    type="button" 普通按钮
    type="image"  图片按钮
    type="submit" 提交
    type="reset"  重置
    type="file"   文件域
    -->
    <p>按钮：
      <input type="button" name="btn1" value="点击">
      <input type="image" src="path">
    </p>
    <!-- 下拉框 列表框 -->
    <p>下拉框
      <select id="" name="列表名称">
        <option value="china">中国</option>
        <option value="us">美国</option>
        <option value="eth" selected>瑞典</option>
        <option value="india">印度</option>
      </select>
    </p>
    <!-- 文本域
    rows="8" cols="80"
   -->
   <p>反馈：
     <textarea name="textarea" rows="8" cols="80"></textarea>
   </p>
   <!-- 文件域
type="file" name="upload"
  -->
  <p>
    <input type="file" name="file">
    <input type="button" name="upload" value="上传">
  </p>
  </form>
</body>

功能性标签：

Copy
 highlighter-hljs
<p>邮箱验证
  <input type="email" name="email" value="">
</p>
 
<p>url验证
  <input type="url" name="email" value="">
</p>
 
<p>数字验证
  <input type="number" name="email" max="100" min="-100" step="10">
</p>
<!-- 滑块 -->
<p>音量：
  <input type="range" name="voice" max="0" min="100" step="2">
</p>
<!-- 搜索框 -->
<p>搜索：
  <input type="search" name="search">
</p>

只读属性：readonly
禁用：disabled
隐藏：hidden

增强鼠标可用性：

Copy
 highlighter-hljs
  <label for="mark">你点我试试</label>
  <input type="text" name="mark" value="text">

表单的初级验证#

placeholder=“something” 提示信息，用于输入框
required 非空判断
pattern 正则表达式

Copy
 highlighter-hljs
  <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">

作者：Mengjie Ye
出处：https://ymj68520.cnblogs.com/

如果，您希望更容易地发现我的新文章，不妨点击一下绿色通道的【关注我】。

如果您觉得阅读本文对您有帮助，请点击一下右下方的推荐按钮，您的推荐将是我写作的最大动力！
版权声明：本文为博主原创或转载文章，欢迎转载，但转载文章之后必须在文章页面明显位置注明出处，否则保留追究法律责任的权利。如您有任何疑问或者授权方面的协商，请            .
posted @   ymj68520  阅读(36)  评论(0)  编辑  收藏  举报
相关博文：
·  AES加密算法——字节替代、列混合（c/c++）
·  字符串匹配——BF算法，RK算法（暴力求解）（C/C++）
·  html笔记1
·  HTML笔记 - HTML中的常用标签
·  HTML基础
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
分享到：

打赏

>>

欢迎打赏支持我 ^_^

扫描二维码打赏

了解更多

点击右上角即可分享
微信分享提示
目录
✕