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（位图）。。。

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

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

超链接标签

a标签

<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标签

列表

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

列表分为：

  • 无序列表
  • 有序列表
  • 定义列表
<!--有序标签-->
<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>

表格标签

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

<!--表格 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

<!--
音频和视频
video标签：
  src 指定路径
  controls 参数指定视频控制条
  autoplay 指定自动播放
audio标签：

--->
<video src="视频资源路径" controls autoplay></video>

<audio src="路径" controls autoplay> </audio>

页面结构分析

<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内联框架

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

表单

<!--表单标签 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 必填。

<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>

功能性标签：

<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

增强鼠标可用性：

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

表单的初级验证

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

  <input type="text" name="diyemail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
posted @ 2022-03-25 17:24  ymj68520  阅读(59)  评论(0)    收藏  举报
分享到：