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

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

创始人

2025-01-11 07:35:48

0次

html骨架

body主体内基本元素

基本元素

超文本（超链接跳转）

锚点

图片标签

列表标签

表格标签

框架标签（窗口标签）

音频标签

视频标签

VScode编译器

输入框

字体样式

实例展示：

首先简要介绍前端的整体体系：

html骨架

html标签（元素）由三部分组成：标签，标签属性，标签内容。

例如：

1020前端体系

                         Document

body主体内基本元素

基本元素

zzzz
     zzzz 换行、行间空隙、加粗、分级     aaaa
 换行、行间空隙     dddd
 换行     qqqq 无明显格式，作用：形成独立空间便于单独操作     
 水平线     
 换行，可用在内容之间

超文本（超链接跳转）

a标签跳转至b站 配套属性：href：指定超文本资源路径                  target：指定超文本资源路径打开方式   _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口)  _top（跳出顶级窗口)

配套属性：href：指定超文本资源路径

target：指定超文本资源路径打开方式 _self(本窗口内打开) _blank(新窗口内打开) _parent(跳出父级窗口) _top（跳出顶级窗口)

锚点

指定的位置 . . . 回到指定位置        #后面跟的是所要对应a标签的名字

此时的a标签为为锚点，如果要跳到另一个同目录页面的一个指定位置，在href后加其他页面路径

(将锚点固定位置，右上角)

图片标签

列表标签

表格标签


标签表示建立表格 border="1"     表格边框    cellpadding="10px"  单元格的填充度  cellspacing="10px"   控制单元格与单元格之间的距离，通常为0 width="30px" height="40px"    表示行   单元格    字体加粗并且居中     用此封装的部分永远在表格的最上方，为表头      永远在表格的中间位置         永远在表格的最下面 表格封装的作用：让表格的不同成分封装为独立空间互不影响 rowspan 列合并 colspan行合并

显示效果如下：

框架标签（窗口标签）

这是一个窗口框架标签&#xff0c;默认打开bilibili

frameborder="0"作用：去掉窗口边框

href后面也可以加自制网页的网址

name="test1"窗口名称

窗口内打开CSDN  窗口内打开河北大学

利用a标签可以让窗口内跳转别的页面

音频标签

controls="true"手动控制音频播放，也可换为autoplay（进入网页自动播放）或loop（循环播放）

视频标签

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结构下生成同级元素

输入框

 单行文本框    单行密码框 男：女：   单选择标签，name相同的只能选择一个 体育：   复选择标签 音乐： 学习：     文件选择器     颜色选择器      日期选择器     日期时间选择器             周选择器    滑动选择器，范围从0到100，初始位置是50  步长为5    宽度为40：一行40个文字，到顶后自动换行；高度为10，共有10行，超过10行后出现滚动条  <input type="button" value="按钮">  普通按钮 <input type="submit" value="提交"> <input type="reset" value="重置">   要放在<form></form>中才有效果 <fieldset></fieldset> 可将输入框分类 <lengend></lengend>  可定义标题，包装为模块</code></pre> <h2 id="%E5%AD%97%E4%BD%93%E6%A0%B7%E5%BC%8F">字体样式</h2><p>行内样式：</p> <pre><code class="language-html"><div style="color:red;background:yellow;">test</div></code></pre> <p>内部样式：</p> <pre><code class="language-html">   <head>         <title>选择器</title>         <meta charset="utf8"/>         <style>             div{                 color:blue;                 background:green;                         }         </style>     </head></code></pre> <p>外部样式：</p> <pre><code class="language-html">   <head>         <title>选择器</title>         <meta charset="utf8"/>         <link rel="stylesheet" href="css/index.css">  叔侄关系     </head></code></pre> <pre><code class="language-html">div{     color: red;     background:pink; }</code></pre> <p>优先级：行内样式>内部样式=外部样式</p><p>内部样式和外部样式符合刷墙原理，有覆盖效果</p><h2 id="%E5%AE%9E%E4%BE%8B%E5%B1%95%E7%A4%BA%EF%BC%9A">实例展示：</h2> <pre><code class="language-html"><!DOCTYPE html> <html>     <head>         <title>10.14homework</title>         <meta charset="utf8"/>     </head>     <body>         <table border="1" cellspacing="0">                  <tr>                     <th>姓名</th>                     <th><input type="text"></th>                     <th>性别</th>                     <th> 男：<input type="radio" name="sex">女：<input type="radio" name="sex"></th>                     <th rowspan="3"><img src="img/666.png" alt="帝皇铠甲" height="90"></th>                 </tr>                 <tr>                     <th>生日</th>                     <th><input type="date"></th>                     <th>血型</th>                     <th><select name="" id="">                             <option value="">A型</option>                             <option value="">B型</option>                             <option value="">AB型</option>                             <option value="">O型</option></A>                         </select></th>                 </tr>                 <tr>                     <th>爱好</th>                     <th colspan="3">运动：<input type="checkbox">                         音乐：<input type="checkbox">                         学习：<input type="checkbox">                         其他：<input type="text">                     </th>                 </tr>                 <tr>                     <th>住址</th>                     <th colspan="3"><input type="text"></th>                     <th><input type="submit" value="上传头像"></th>                 </tr>                 <tr>                     <th>学历</th>                     <th><input type="text"></th>                     <th>手机号</th>                     <th colspan="2"><input type="text"></th>                 </tr>                 <tr>                     <th>个人简介</th>                     <th colspan="4"><textarea name="" id="" cols="70" rows="2">                                                       个性签名

上一篇：【C++&Python&Java】字符处理详细解读_字符_ASCLL码_字母数字转换_算法竞赛_开发语言

下一篇：Memcached内存碎片清理术：优化缓存性能的策略

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

html骨架

body主体内基本元素

基本元素

zzzz

zzzz

`换行、行间空隙、加粗、分级 aaaa 换行、行间空隙 dddd 换行 qqqq 无明显格式，作用：形成独立空间便于单独操作水平线换行，可用在内容之间`

超文本（超链接跳转）

锚点

图片标签

列表标签

表格标签

框架标签（窗口标签）

音频标签

视频标签

VScode编译器

输入框

相关内容

热门资讯

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

html骨架

body主体内基本元素

基本元素

zzzz

zzzz

换行、行间空隙、加粗、分级 aaaa 换行、行间空隙 dddd 换行 qqqq 无明显格式，作用：形成独立空间便于单独操作 水平线 换行，可用在内容之间

超文本（超链接跳转）

锚点

图片标签

列表标签

表格标签

框架标签（窗口标签）

音频标签

视频标签

VScode编译器

输入框

相关内容

热门资讯

`换行、行间空隙、加粗、分级 aaaa 换行、行间空隙 dddd 换行 qqqq 无明显格式，作用：形成独立空间便于单独操作水平线换行，可用在内容之间`