关于html的简单学习

Skyloer

已于 2022-03-30 17:34:02 修改

阅读量306

点赞数

文章标签： html 前端

于 2022-01-08 11:55:05 首次发布

本文链接：https://blog.csdn.net/Skyloer/article/details/122376651

版权

学习自【HTML+CSS+JS】基础知识介绍，靠谱学院星月主讲_哔哩哔哩_bilibili

0.一些补充

1.关于标签

div换行

span不换行

2.一些语义字符（手机上才显示出格式）

header	头部
nav	导航栏
footer	尾部
aside	网页侧边栏
section	网页区块
article	网页文章

1.简单表格

示例

<!DOCTYPE htm1>
<html lang="en">
    <head>
<meta charset="UTF-8">
<title>创建表格</title>
    </head>
  <body>
<table border="1px">
   <thead>
<tr>
   <th>用户名</th>
   <th>性别</th>
   <th>密码</th>
</tr>
   </thead>
<tbody>
<tr>
   <td>Admin</td>
   <td>男</td>
   <td>123</td>
</tr>
<tr>
   <td>靠谱学院</td>
   <td>男</td>
   <td>123</td>
</tr>
<tr>
   <td>星月</td>
-  <td>男</td>
   <td>123</td>
</tr>
</tbody>
<tfoot>
<tr>
   <th>用户名</th>
   <th>性别</th>
   <th>密码</th>
</tr>
</tfoot> 
</table>

1.2文本格式化标签

<br>换行

<hr>分割线

ps：重要的用第二种，除了语境，两种效果没啥区别

2.列表

3.表单

什么是表单？

1.表单是HTML中获取用户输入的手段，对于web应用系统极其重要，但是HTML定义的功能落后于表单的使用方式已经有很多年了。
2.HTML5中，整个表单已经彻底改造过，标准的步伐已经跟上表单的应用实践。

示例

<!DOCTYPE html>
<htm1 lang="en">
    <head>
    <meta charset="UTF-8"><title>创建表单</title>
    </head>
    <body>
        <form>
    <input type="text"><!--单行文本框--><br><br>
    <input type="text" value="靠谱学院"><!--占位符--><br><br>
    <input type="text" placeholder="靠谱学院"><!--不占文本框内的--><br><br>
    <input type="text" placeholder="maxlength" maxlength="8"><!--最大能输入的字符--><br><br>
    <input type="text" placeholder="靠谱学院"size="50"><!--拓宽单行文本框--><br><br>
    <input type="text" va1ue="靠谱学院"readonly><!--只读--><br><br>
    <input type="password" placeholder="密码"><br><br>
  
       
            <input type="text" placeholder="用户名" name="user"><!-- <占占位符> --> <br>
            <input type="password" placeholder="密码" name="password">
            <input type="submit" value="按钮">
          </form>
    </body>
</html>

示例

<button>按钮</button>
<br>
<input type="submit" value="提交"><!-- 提交表单 -->
<br>
<!--功能：数字滑动-->
<input type="range" min="-100" max="500" step="100">
<!-- 最大最小值，变化单位值 -->
<input type="range" min="-100" max="500" step="1o0" value="-100">
<!-- 初始位置 -->
<br>

<!--功能：手动输入数字-->
<input type="number" min="-100" max="100" value="0">

<br>
<!-- 功能：选择勾选 -->
<input type="checkbox">记住我<br><!-- 可修改 -->
<input type="radio">慎点<br><!-- 不可修改 -->
<!-- 功能：选择题 -->
那一对cp最香？
<br><!-- 三选一（给相同命名，必选，否则默认（cheaked选第一 -->
<input type="radio"name="a" checked>露中
<input type="radio"name="a">露中
<input type="radio"name="a">露中
<br>
<!-- 功能：区域内选择1 -->
<!-- 给定区域，不可输入 -->
如果这世界上有一对cp能永远不翻车，你觉得会是?
<br><select>
    <option>露中</option>
    <option>露中</option>
    <option>露中</option>
</select>
<br>
<!-- 功能：区域内选择2(其实是input) -->
<!-- 给定区域，不喜欢你可以自己输入 -->
究极混乱体邀请你选择APH自由组合
<br><input list="cp">
<datalist id="cp">
        <option>红色组</option>
        <option>金钱组</option>
        <option>冷战组</option>
        <option>好茶组</option>
        <option>百合组</option>
        <option>爱丽舍</option>
        <option>西北风</option>
        <option>花夫妇</option>
        <option>亲子分</option>
        <option>初恋组</option>
        <option>极东组</option>
        </datalist>
<br><!-- 获取时间 -->
<input type="date">
<input type="datetime-local">
<br><!--验证格式-->
<input type="emaiL ">
<input type="tel">
<input type="urL">
<br><!--获取时间-->
<input type="date">
<br><!--获取颜色-->
<input type="color">
<br><!--隐藏文本框，
    解释: hidden 属性值在浏览器中没有任何效果，
    不会显示该元素，但是用户提交表单时会发送出去-->
<input type="hidden" value="123">
<br><!--导入图片，限定大小-->
<input type="image" src="我滴亲亲老婆小媚娃老王.jpg" width="1080px">
<br><!--导入文件-->
<input type="file">
   </form>  
</body>

4.分区响应

<title>悬停时文字提示

相对路径，丢进文件夹，然后按如下格式

下级格式/

上级格式./

上上级../(上几级几个点）

示例

<!-- 功能：图标超链接 -->
 <a href="https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&page=2">
 <img src="冻雨.png" width="30" alt="冻雨"> <!-- 功能：像素，备注 -->
 </a>
 <br><br><br>
 
  <!-- 功能：同上 另起一页 -->
 <a href="随便.html" target="-blank">
 <img src="暴雨 大暴雨 特大暴雨.png" width="30">
 </a>
 <img src="加入导航.png" usemap="#map1">
 <!-- usemap使用分区 -->
 <form>
     <input type="image" src="加入导航.png">
 </form>
 <!-- rect矩形分区 coords边界x，y，x，y -->
 <!-- circle圆形分区 coords边界左边界-圆心，右边界-圆心，半径 -->
 <map name="map1">
     <area href="随便.html" shape="rect" coords="18,20,90,86" target="-blank">
     <area href="排序2.html" shape="rect" coords="108,25,174,88"target="-blank">
     <img src="暴雨 大暴雨 特大暴雨.png" width="128" usemap="#map2">
     <map name="map2">
    <area href="排序2.html" shape="circle" coords="64px,64px,64px" target="_blank">
 </map>

5.嵌入视频

HTML5支持直接在浏览器中播放音频和视频文件，不需要使用adobe flash插件。插件是令浏览器崩溃的主要原因之一，特别是flash，不仅耗电还存在很多问题。

6.嵌入音频

示例

<!-- autoplay自动播放 -->
<!-- predload缓存 -->
<!-- poster封面 -->
<video src="声之形.mp4" controls preload="auto" poster="QQ截图20211225214741.png" height="400">
</video>
<!-- audio音频同理 -->
<audio src="">
    
</audio>

Skyloer

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于html的简单学习

1.html简单表格示例：<!DOCTYPE htm1><html lang="en"> <head><meta charset="UTF-8"><title>创建表格</title> </head> <body><table border="1px"> <thead><tr> <th>用户名</th
复制链接

扫一扫