前端开发体系+html文件详解

自由的羽毛  论坛元老 | 2024-7-16 19:45:15 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1025|帖子 1025|积分 3075

目录
html骨架
body主体内基本元素
基本元素
超文本（超链接跳转）
锚点
图片标签
 列表标签
表格标签
 框架标签（窗口标签）
音频标签
视频标签
VScode编译器
输入框
字体样式
实例展示：

 起首扼要介绍前端的团体体系：

html骨架

html标签（元素）由三部分构成：标签，标签属性，标签内容。
例如：
  1. <div style="color: red" id="zzz">1020前端体系</div>
复制代码
  1. <!DOCTYPE html>
  2. <!-- 英文状态下！生成框架 -->
  3. <!-- 英文状态下Ctrl+?标记为注释 -->
  4. <html lang="en">
  5. <head>
  6. <!-- <head></head>标签设置页面配置信息 -->
  7.     <meta charset="UTF-8">
  8.     <!-- 设置页面编码配置信息 -->
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10.     <title>Document</title>
  11.     <!-- <title></title>设置页面标题 -->
  12. </head>
  13. <body>
  14. <!-- <body></body>设置页面主题 -->
  15.    
  16. </body>
  17. </html>
复制代码
body主体内基本元素

基本元素

  1. <h1>zzzz</h1>
  2.     <h2>zzzz<h2> 换行、行间空隙、加粗、分级
  3.     <p>aaaa</p> 换行、行间空隙
  4.     <div>dddd</div> 换行
  5.     <span>qqqq</span> 无明显格式，作用：形成独立空间便于单独操作
  6.     <hr> 水平线
  7.     <br> 换行，可用在内容之间
复制代码
超文本（超链接跳转）

  1. <a href="https://www.bilibili.com" target="_blank">a标签跳转至b站</a>
  2. 配套属性：href：指定超文本资源路径
  3.                  target：指定超文本资源路径打开方式   _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口)  _top（跳出顶级窗口)
复制代码
配套属性：href：指定超文本资源路径
target：指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top（跳出顶级窗口)
锚点

  1. <a name="top">指定的位置</a>
  2. .
  3. .
  4. .
  5. <a href="#top">回到指定位置</a>        #后面跟的是所要对应a标签的名字
复制代码
此时的a标签为为锚点，如果要跳到另一个同目录页面的一个指定位置，在href后加其他页面路径
  1. <a href="#top" style="position:fixed;right:10px;top:10px;"></a>(将锚点固定位置，右上角)
复制代码
图片标签


 列表标签

  1.        <ul>
  2.             <li>无序列表1</li>
  3.             <li>无序列表2</li>
  4.             <li>无序列表3</li>
  5.             <li>无序列表4</li>
  6.         </ul>
  7.         <ol type="a" start="3" >     <!-- type为序号类型，start表示从第几个开始编写 -->
  8.             <li>有序列表1</li>
  9.             <li>有序列表2</li>
  10.             <li>有序列表3</li>
  11.             <li>有序列表4</li>
  12.         </ol>
复制代码
表格标签

  1. <table></table>标签表示建立表格
  2. border="1"     表格边框  
  3. cellpadding="10px"  单元格的填充度
  4. cellspacing="10px"   控制单元格与单元格之间的距离，通常为0
  5. width="30px"
  6. height="40px"
  7. <tr>   表示行
  8. <td>  单元格
  9. <th>   字体加粗并且居中
  10. <thead></thead>    用此封装的部分永远在表格的最上方，为表头
  11. <tbody></tbody>     永远在表格的中间位置
  12. <tfoot></tfoot>        永远在表格的最下面
  13. 表格封装的作用：让表格的不同成分封装为独立空间互不影响
  14. rowspan 列合并
  15. colspan行合并
复制代码
 

 表现效果如下：

 框架标签（窗口标签）

  1. <iframe src="https://www.bilibili.com" frameborder="0" width="600px" height="400px" name="test1">这是一个窗口框架标签，默认打开bilibili</iframe>
复制代码
frameborder="0"作用：去掉窗口边框
href后面也可以加自制网页的网址
name="test1"窗口名称
  1. <a href="https://www.csdn.net/" target="test1">窗口内打开CSDN </a>
  2. <a href="https://www.hbu.edu.cn/" target="test1">窗口内打开河北大学 </a>
复制代码
利用a标签可以让窗口内跳转别的页面
音频标签

  1. <audio src="img/bj.mp3" controls="true" >音频</audio>
复制代码
controls="true"手动控制音频播放，也可换为autoplay（进入网页自动播放）或loop（循环播放）
视频标签

  2. <video src="20220908_185521_7215.mp4" controls width="500px" height="300px"></video>
复制代码
 controls 手动播放   autoplay   自动播放    loop 循环播放 
width="500px" height="300px"可改变视频窗口巨细但不会改变原视频外框的外形
VScode编译器

英文状态下！生成框架
英文状态下Ctrl+/标志为注释
div+回车 自动生成div标签
h1 a img iframe 同理
div{vjygbjbghvjbh} 可生成div标签加内容
div*10 可生成10个一连的div标签
div>p>a 嵌套布局生成
div>p+a+span+h3 div布局下生成同级元素
输入框

  1. <input type="text"> 单行文本框
  2. <input type="password">   单行密码框
  3. 男：<input type="radio" name="sex">女：<input type="radio" name="sex">   单选择标签，name相同的只能选择一个
  4. 体育：<input type="checkbox">   复选择标签
  5. 音乐：<input type="checkbox">
  6. 学习：<input type="checkbox">
  7. <input type="file">    文件选择器
  8. <input type="color">    颜色选择器
  9. <input type="date">     日期选择器
  10. <input type="datetime_local">    日期时间选择器
  11. <input type="week">            周选择器
  12. <input type="range" min="0" max="100" value="50">   滑动选择器，范围从0到100，初始位置是50
  13. <input type="number" min="0" max="100" value="50" step="5"> 步长为5
  15. <select name="" id="">   下拉选择器，默认展示第一个
  16.    <option value="">A型</option>
  17.    <option value="">B型</option>
  18.    <option value="">AB型</option>
  19.     <option value="">O型</option></A>
  20. </select></th>
  22. <textarea name="" id="" cols="40" rows="10">宽度为40：一行40个文字，到顶后自动换行；高度为10，共有10行，超过10行后出现滚动条
  24. <input type="button" value="按钮">  普通按钮
  25. <input type="submit" value="提交">
  26. <input type="reset" value="重置">   要放在<form></form>中才有效果
  27. <fieldset></fieldset> 可将输入框分类
  28. <lengend></lengend>  可定义标题，包装为模块
复制代码
字体样式

行内样式：
  1. <div style="color:red;background:yellow;">test</div>
复制代码
内部样式：
  1.    <head>
  2.         <title>选择器</title>
  3.         <meta charset="utf8"/>
  4.         <style>
  5.             div{
  6.                 color:blue;
  7.                 background:green;            
  8.             }
  9.         </style>
  10.     </head>
复制代码
外部样式：
  1.    <head>
  2.         <title>选择器</title>
  3.         <meta charset="utf8"/>
  4.         <link rel="stylesheet" href="css/index.css">  叔侄关系
  5.     </head>
复制代码
  1. div{
  2.     color: red;
  3.     background:pink;
  4. }
复制代码
优先级：行内样式>内部样式=外部样式
内部样式和外部样式符合刷墙原理，有覆盖效果
实例展示：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>10.14homework</title>
  5.         <meta charset="utf8"/>
  6.     </head>
  7.     <body>
  8.         <table border="1" cellspacing="0">
  10.                 <tr>
  11.                     <th>姓名</th>
  12.                     <th><input type="text"></th>
  13.                     <th>性别</th>
  14.                     <th> 男：<input type="radio" name="sex">女：<input type="radio" name="sex"></th>
  15.                     <th rowspan="3"><img src="img/666.png" alt="帝皇铠甲" height="90"></th>
  16.                 </tr>
  17.                 <tr>
  18.                     <th>生日</th>
  19.                     <th><input type="date"></th>
  20.                     <th>血型</th>
  21.                     <th><select name="" id="">
  22.                             <option value="">A型</option>
  23.                             <option value="">B型</option>
  24.                             <option value="">AB型</option>
  25.                             <option value="">O型</option></A>
  26.                         </select></th>
  27.                 </tr>
  28.                 <tr>
  29.                     <th>爱好</th>
  30.                     <th colspan="3">运动：<input type="checkbox">
  31.                         音乐：<input type="checkbox">
  32.                         学习：<input type="checkbox">
  33.                         其他：<input type="text">
  34.                     </th>
  35.                 </tr>
  36.                 <tr>
  37.                     <th>住址</th>
  38.                     <th colspan="3"><input type="text"></th>
  39.                     <th><input type="submit" value="上传头像"></th>
  40.                 </tr>
  41.                 <tr>
  42.                     <th>学历</th>
  43.                     <th><input type="text"></th>
  44.                     <th>手机号</th>
  45.                     <th colspan="2"><input type="text"></th>
  46.                 </tr>
  47.                 <tr>
  48.                     <th>个人简介</th>
  49.                     <th colspan="4"><textarea name="" id="" cols="70" rows="2"></textarea></th>
  50.                 </tr>
  51.                 <tr>
  52.                     <th>个性签名</th>
  53.                     <th colspan="2"><input type="text" name="" id=""></th>
  54.                     <th><input type="submit" value="提交"></th>
  55.                     <th><input type="reset" value="重置"></th>
  56.                 </tr>
  58.         </table>
  59.     </body>
  60. </html>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

自由的羽毛

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表