-
666
找到
2
篇与
html
相关的结果
-
HTML标签大全 基本结构标签1.<!-- 这是注释标签-->注释标签使我们的代码更加清楚明了，在网页中不起到任何作用也不会显示到桌面上2.文档类型声明标签：<!DOCTYPE>DOCTYPE是Document Type的简写，含义为文档类型。HTML文档基础结构中第一行就是HTML的DOCTYPE声明。3.根标签：<html>除了文章开头的文档类型声明以外，所有的HTML文档都是以<html>标签开始,以</html>结束，在<html>和</html>标签内部还包含了两个重要的标签/<head>首部标签和/<body>主体标签，分别标记文档的首部和主体部分。4.首部标签：<head>html文档首部以<head>开始，以</head>标签结束。<head>标签中的内容不会显示在网页的页面中。<head>标签中可含有<title>和<meta>等标签，用于声明页面标题，字符集，关键字等。5.网页标题标签：<title>html文档使用<title>和<title>标签标记网页标题，该标题会显示在浏览器窗口的标题栏中，若省略了该标签，则网页标题会显示为“无标题文档”。6.基础地址标签：<base><base>标签用于为页面上所有的链接设置默认URL地址或目标target当html文档中使用了相对路径，浏览器会用<base>标签指定的URL进行补全。<head> <base href="http://loacalhost/images"/> </head> <body> <img arc="sunflower.jpg"/> </body>此时在图像标签<img>中src属性填写的是一个相对路径，由于<base>标签的作用，该路径会被浏览器自动补全为：<img src="http://loacalhost/imagessunflower.jpg/" /><base>标签也可以为该网页上所有超链接统一设置打开方式，其中target="_blank"指的是该网页文档中所有未指定打开方式的超链接将在新窗口打开。<head> <base target="_blank"> </head> <body> <a href="http://www.baidu.com">百度</a> <a href="http://www.163.com">网易</a> </body>7.元数据标签:<meta><meta>标签用于提供当前HTML文档的元数据，这些数据不会直接显示在网页上，但是对于机器是可读的，适用于搜索引擎索引。通常可以用于定义网页的字符集，关键词，描述，作者信息等。8.样式标签:<style>样式标签可用于定义文档中指定区域的字体风格、背景颜色，对齐方式等各类样式信息。<head> <style> p </style> <body> <p>这是一个段落标签</p> </body>这段代码是将HTML文档中未指定字体颜色的段落显示为红色。9.链接标签:<link><link>标签用于连接外部资源和当前HTML文档，它只出现在首部标签<head>和</head>中，通常用于链接外部样式表。例如：<head> <link rel="stylesheet" href="yangshi.css"/> </head>10.脚本标签：<script><script>标签为可选，取决于当前页面是否需要使用脚本内容，比如JavaScript。该标签可以直接引用外部脚本文件，也可以直接将脚本命令写在<script>和</script>标签中。例如：<head> <script src="text.js"></script> </head>11主体标签：<body>HTML文档的主体部分以<body>标签开始，以</body>标签结束。<body>标签中的内容全部显示在网页的页面中。<body>标签中可直接添加文本内容，也可继续嵌套其它标签，形成多元化的显示效果。实例：html代码<!DOCTYPE html> <html> <head> <title>这是标题标签</title> <link rel="stylesheet" type="text/css" href="./yangshi.css"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--style属性标签 --> <style> .div{ width:100px; height:100px; background:green; } </style> </head> <!--主体标签--> <body> <p>这是段落标签</p> <div class="div">这是块级元素</div> </body> </html>yangshi.css代码@CHARSET "UTF-8"; p{color:red; font-size:9; font-family:隶书; background-color:blue; }基础标签1.段落标签：<p>段落标签<p>和</p>用于形成一个新的段落，段落与段落之间默认为空一行进行分割。<head> <style> .p1{ background-color:red; } .p2{ background-color:green; } </style> </head> <body> <p class="p1">这是段落一</p> <p class="p2">这是段落二</p> </body>2.标题标签：<h1>~<h6>HTML使用<hn>和</hn>来标记文本中的标题，其中n的范围是1~6，<h1>标签所标记的字体最大，依次减小，标题标签的默认状态是左对齐显示的黑体字。<body> <h1>h1效果</h1> <h2>h2效果</h2> <h3>h3效果</h3> <h4>h4效果</h4> <h5>h5效果</h5> <h6>h6效果</h6> </body>3.水平线标签：<hr>水平线标签是在网页上画出一条水平线，从而在视觉上将文本分段。<hr>没有结束标签可以单独使用。<body> <h1>h1效果</h1> <hr> <h2>h2效果</h2> <hr> <h3>h3效果</h3> <hr> <h4>h4效果</h4> <hr> <h5>h5效果</h5> <hr> <h6>h6效果</h6> </body>4.粗体标签<b>和<strong>粗体标签<b>和<strong>均可以将其首位标签之间的文本内容显示为粗体字型效果。区别在于使用<strong>标签的内容被认为是重要的内容。<body> 我是非粗体标签<br> <b>我是粗体标签（使用了标签b）</b><br> <strong>我是粗体标签（使用了标签strong）</strong> </body>5.上标标签<sup>和下标标签<sub>它们的作用是使显示的文本内容可以是上标的形式，比如x的平方。<body> 上标的样式：2<sup>10</sup>=1024<br> 下标的样式：二氧化碳CO<sub>2</sub> </body>6.修订标签<del>和<ins>修订标签有两种，分别为文本内容添加删除线和下划线 <body> 删除线标签的应用：<del>错误内容</del><br> 下划线标签的应用：<ins>正确内容</ins> </body>7.预格式化标签<pre>预格式化标签可以将所标记的文本内容在显示时保留换行与空格的排版效果。<body> 静夜思 床前明月光。 疑是地上霜。 举头望明月， 低头思故乡。 <br> <!--加了<pre>和不加的对比--> <pre> 静夜思 床前明月光。 疑是地上霜。 举头望明月， 低头思故乡。 </pre> </body> 列表标签1.有序列表<ol>有序列表用于定义带有编号的有序列表，需要和列表项目标签<li>配合使用。属性：<ol type="类型">| a | 英文字母小写(a,b,c) || —- | ———————- || A | 英语字母大写(A,B,C) || i | 罗马数字小写(i,ii,iii) || I | 罗马数字大写(I,II,III) || 1 | 阿拉伯数字(1,2,3) |<body> <ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ol> </body>2.有序列表<ul>无序列表标签用于定义不带编号的无序列表，也需要和列表项目标签配合使用。属性：<ul type="属性">| disc | 实心圆形 || —— | ——– || circle | 空心圆形 || square | 方形 |<body> <ul type="circle"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul> <ul type="disc"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul> </body>3.定义列表标签<dl>定义列表标签<dl>和</dl>是用于进行词条定义的特殊列表，每条列表项需要结合词条标签<dt>和定义标签<dd>一起使用。词条标签需要标记在每个词条的开头，定义标签则需要标记在每个定义部分的开头，默认为全文缩进显示。<body> <dl> <dt>励志语句</dt> <dd>生当自勉，学习需坚持。从这一刻开始，我依旧是我，只是心境再不同。 不论今后的路如何，我都会在心底默默鼓励自己， 坚持不懈，等待那一场破茧的美丽。</dd> </dl> <dl> <dt>浪漫语句</dt> <dd>不知道从什么时候开始，在人群中一眼找到你成了我最擅长的事情。 思念所达之地，目光所及之处都是你。</dd> </dl> </body>图像标签1.图像标签<img>用于在网页中嵌入图片，该标签无结束标签，可单独使用。<body> <img src="image/haitun.jpg" alt="照片"> </body>在网页中显示一张图片超链接标签1.外部链接<a>用于在网页中标记文本或图像从而形成超链接，用户单击后将跳转到另一个指定的页面，从而实现浏览空间的跨越。两个重要的属性：（1）href—目标内容的URL地址（2）target—目标内容的打开方式| _self | 自身 || ——- | ——– || _blank | 新窗口 || _top | 顶层框架 || _parent | 父框架 |<body> <a href="http://www.baidu.com" target="_blank">百度</a><br> <a href="https://blog.csdn.net/qq_46285118/article/details/118294080?spm=1001.2014.3001.5502 " target="_blank">标签大全第一篇</a> </body>2.内部链接<a>超链接也可以通过单击跳转到同一页面的指定区域格式如下：<a href="#指定的区域">链接文本或图像</a><body> <a href="#top">跳转到顶部</a><br> <a href="#bottom">跳转到底部</a> </body>如果一个网页有不止一页的时候，就可以在底部添加跳转到顶部的超链接，方面用户使用。也可以在顶部添加跳转到底部的超链接。表格标签1.表格标签<table>表格标签<table>和</table>用于定义一个完整的表格。2.表格行标签<tr>表格行标签<tr>和</tr>用于定义表格中的一行。3.单元格标签<td>单元格标签<td>和<td>用于定义表格行中的一个数据单元格。数据单元格中可以包含表单、文本、水平线、图片、列表、段落、甚至新的表格等内容。默认状态下，单元格的内容为左对齐。4.表头标签<th>表头标签<th>和</th>用于定义表格的第一行表头，默认为粗体字、居中字体。5.表格标题标签<caption>表格标题标签<caption>和</caption>可用于为表格添加标题，该标题默认为居中并对齐显示在表格的顶部。<body> <table border="1"> <!--表格标题标签--> <caption>学生成绩</caption> <!--表头标签--> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> </tr> <tr> <td>张三</td> <td>98</td> <td>90</td> </tr> <tr> <td>李四</td> <td>95</td> <td>80</td> </tr> <tr> <td>王五</td> <td>90</td> <td>83</td> </tr> </table> </body>框架标签内联框架标签<iframe>框架标签用于在网页的框架内定义子窗口。.html代码<body> <h3>iframe标签的应用</h3> <iframe src="iframe/news.html"></iframe> </body>news.html代码<body> <p> 前端开发是创建WEB页面或APP等前端界面呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互 。 前端开发从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。 随着互联网技术的发展和HTML5、CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。 前端开发跟随移动互联网发展带来了大量高性能的移动终端设备应用。HTML5，Node.js的广泛应用，各类UI框架，JS类库层出不穷，开发难度也在逐步提升 </p> </body>容器标签1.<div>标签标签<div>可将网页页面分割成不同的独立部分，通常用于定义文档中的区域或节。该标签是一个块级元素，浏览器会自动在<div>和</div>所标记的区域前后放置一个换行符。<body> <div style="background-color:pink">这是div标签1</div> <div style="background-color:red">这是div标签2</div> <div style="background-color:green">这是div标签3</div> </body>我并没有在结尾加换行标签，块级元素自动换行，加以颜色容易区分。2.<span>标签标签<span>通常作为文本的容易，它没有特定的含义和样式，只有与CSS同时使用才可以为指定文本设置样式属性。与块级元素相反，内联元素不会自动换行，因此<span>标签内容都显示在一行。<body> <!-- 这是块级元素div --> <div style="background-color:pink">这是div标签1</div> <div style="background-color:red">这是div标签2</div> <div style="background-color:green">这是div标签3</div> <!-- 这是span标签 --> <span style="background-color:pink">这是span标签1</span> <span style="background-color:red">这是span标签2</span> <span style="background-color:green">这是span标签3</span> </body>换行标签<br>换行标签是我们常用的标签，起到换行的作用字体标签<font>最正统的字体标签，操作网页上的文字属性:颜色：color大小：size默认值是3，最小值是1，最大值是7+2，默认值加2，加到最大值7为止-2，默认值减2，减到最小值1为止如果想让字体变大更大或更小，需要用CSS来完成。字体类型：face隶书，楷书，还支持英文字体<body> <font size="15">我是字体标签</font><br /> <font size="7">我是字体标签</font><br /> <font size="6">我是字体标签</font><br /> <font size="1">我是字体标签</font><br /> <font size="-6">我是字体标签</font><br /> <font size="3">我是字体标签</font><br /> <font >我是字体标签</font><br /> <font size="5">我是字体标签5</font><br> <font size="+2">我也是字体标签5</font> </body>对比着看就很清晰了斜体标签斜体标签:<i>和</i>注意点：（1）HTML标签不区分大小写（2）HTML标签可以嵌套使用，但不允许交叉嵌套举例：<b><i>既是粗体又是斜体</i></b> （√） <b><i>既是粗体又是斜体</b></i> （×）<body> <b>我是粗体标签</b><br> <i>我是斜体标签</i><br> <b><i>我是粗体加斜体标签</i></b> </body>表单标签<form>和</form> 封装表单标签的范围属性：（1）action表示表单要提交的地址（2）method表示表单提交的方式，有get和post两种get和post的区别：1、get方式进行提交时，参数列表内容以明文形式显示到地址栏上。post方式提交时，封装到请求体中，不会显示在地址栏中。这种方式比较安全2、get方式提交时，安全级别比较低。post方式提交，安全级别比较高。3、get方式提交时，对参数列表的数据大小有限制。地址栏大小是一定的。默认是1KB。post方式提交时， 对大数据没有限制。支持大数据的传输。<input> ：用户输入项的内容，例如：普通的文本框、普通的密码框注意：input标签上有两个属性：name(必须要指定）value（不一定要指定）。name和value是（键值对，name是名称，value是值。name属性必须要指定值，value属性值不一定要指定，根据具体的业务来确定。type：属性值的不同，显示不同的输入框。type=”text” ：普通的文本框type=”password” ：密码框，非明文的type=”radio” ：单选按钮。属性：name：必须加入组的概念。指定相同的属性name值，组内的按钮才可以完成单选。name属性相同，才算是一组。checked：默认值。用户少操作一步，提高了用户的体验。例如：checked=”checked”。只要在radio上出现了checked属性，就默认是被选中的。type="checkbox" ：多选按钮组的概念：指定相同的name默认值：checked=”checked”type="file"：文件上传name：属性值一定要指定的type="hidden" ：隐藏组件。用户不需要看不到的数据，使用该该组件隐藏起来。type="button" ：按钮（常与JS语言一起使用）name：属性不用写，没有用。value：按钮上显示的文字，可以没有。type="submit" ：提交。默认显示“提交查询”。表单收集用户数据，点击后就可以把表单数据提交到后台。type="reset" ：重置。默认显示“重置”。恢复到最初的状态。怎么证明不是清空内容？<select> </select> ：选择下拉框。name ：name属性必须指定，并且指定在select标签上。<option> </option>：value：value属性必须指定，并且指定在option标签上selected ：默认值属性。例如：selected=”selected”<textarea></textarea>：文本域。可以写入多行多列的内容rows：行数。cols：列数。<form action="success.html" method="get" > 输入姓名：<input type="text" name="" value=""/> <br /> 输入密码：<input type="password" name="password" value="" /> <br /> 选择性别：<input type="radio" name="sex" value="nan"/>男<input type="radio" name="sex" value="nv" />女 <br /> 选择爱好：<input type="checkbox" name="love" value="lq" />篮球 <input type="checkbox" name="love" value="sj" />跑步 <input type="checkbox" name="love" value="yx" checked="checked" />游戏 <br /> 上传附件：<input type="file" name="myfile" /> <br /> 隐藏组件：<input type="hidden" name="userId" value="001" /> 选择城市：<select name="city"> <option value="none">--请选择--</option> <option value="bj" selected="selected">北京</option> <option value="sh">上海</option> <option value="tj">天津</option> </select> <br /> 个人简介：<br> <textarea rows="10" cols="10"></textarea> <br /> <input type="button" value="按钮" /> <input type="submit" value="注册" /> <input type="reset" /> </form> HTML5新增的常用标签1.页眉标签header页眉标签<header>和</header>用于定义网页文档或节的页眉，通常为网站名称。2.导航标签<nav>导航标签<nav>和</nav>用于定义网页文档的导航菜单，可通过超链接跳转到其它页面。3.节标签<section>节标签用于定义独立的专题区域，里面可以包含一篇或多篇文章。4.文章标签<article>文章标签用于定义独立的文章区域，里面根据文章内容的长短也可以包含一个或多个段落元素。5.侧栏标签<aside>侧栏标签用于定义正文两侧的相关内容，常用作文章的栅栏。6.页脚标签<footer>页脚标签用于定义整个网页文档或节的页脚，通常包含整个文档的作者、版权、联系方式等信息。7.记号标签<mark>记号标签用于突出显示指定区域的文本内容，通常在指定的文本前后加上<mark>和</mark>标签标记，可以为文本添加黄色底色。8.进度标签<progress>进度标签用于显示任务的进度状态，可配合JavaScript使用使以显示任务进度的动态进行效果。9.度量标签<meter>度量标签用于显示标量测量结果，通常用于显示磁盘使用量、投票数据统计等。该标签通常应用于已知范围内的恒定数值标记，不用于任务进度指示。补充<em> 呈现为被强调的文本。<strong> 定义重要的文本。<dfn> 定义一个定义项目。<code> 定义计算机代码文本。<samp> 定义样本文本。<kbd> 定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。<var> 定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。小知识：块级元素:div、h1~h6、blockquote、dl、dt、dd、form、hr、ol、p、pre、table、ul …行内元素:span、a、b、br、code、em、i、img、input、label、select、textarea …HTML元素嵌套一般遵循以下规定：块级元素可以包含行内元素或某些块级元素，行内元素不能包含块级元素，行内元素只能包含其它的行内元素h1 - h6、p、dt 这些块级元素，只能包含行内元素以上规定并非强制，不遵循以上规定进行嵌套，代码也是可以被执行的。 -
前端性能优化之首屏渲染优化 首屏介绍指用户打开网站开始，到浏览器首屏内容渲染完成的时间。对于用户体验来说，首屏时间是用户对一个网站的重要体验因素。通常一个网站，如果首屏时间在5秒以内是比较优秀的，10秒以内是可以接受的，10秒以上就不可容忍了。超过10秒的首屏时间用户会选择刷新页面或立刻离开。首屏时间计算首屏模块标签标记法统计首屏内加载最慢的图片的时间自定义首屏内容计算法首屏模块标签标记法通常适用于首屏内容不需要通过拉取数据才能生存以及页面不考虑图片等资源加载的情况，我们会在 HTML 文档中对应首屏内容的标签结束位置，使用内联的 JavaScript 代码记录当前时间戳。如下所示：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首屏</title> <script type="text/javascript"> window.pageStartTime = Date.now(); </script> <link rel="stylesheet" href="common.css"> <link rel="stylesheet" href="page.css"> </head> <body> <!-- 首屏可见模块1 --> <div class="module-1"></div> <!-- 首屏可见模块2 --> <div class="module-2"></div> <script type="text/javascript"> window.firstScreen = Date.now(); </script> <!-- 首屏不可见模块3 --> <div class="module-3"></div> <!-- 首屏不可见模块4 --> <div class="module-4"></div> </body> </html>此时首屏时间等于 firstScreen - performance.timing.navigationStart事实上首屏模块标签标记法 在业务中的情况比较少，大多数页面都需要通过接口拉取数据才能完整展示统计首屏内加载最慢的图片的时间通常我们首屏内容加载最慢的就是图片资源，因此我们会把首屏内加载最慢的图片的时间当做首屏的时间。DOM树构建完成后将会去遍历首屏内的所有图片标签，并且监听所有图片标签 onload 事件，最终遍历图片标签的加载时间的最大值，并用这个最大值减去 navigationStart 即可获得近似的首屏时间。此时首屏时间等于 加载最慢的图片的时间点 - performance.timing.navigationStart自定义首屏内容计算法由于统计首屏内图片完成加载的时间比较复杂。因此我们在业务中通常会通过自定义模块内容，来简化计算首屏时间。如下面的做法：忽略图片等资源加载情况，只考虑页面主要 DOM只考虑首屏的主要模块，而不是严格意义首屏线以上的所有内容首屏优化方案项目背景项目较为复杂，模块较多，（当然不比大型电商网站），首页的请求就有8个，并且是精简之后的，稍有不慎，白屏现象就会很严重。体验极差。 首页模块划分分类 2. 轮播图 3. 推荐 4. 收藏数 5. 购买数 6. 案例展示 7. 主内容展示 8. 合作机构展示其中位于首屏的是1、2、3、4、5，对于6在大屏幕上也会展示。请求优化利用prerender-spa-plugin + Skeleton Screen (骨架屏) 对SPA进行预渲染前端的资源动态加载：a. 路由动态加载，最常用的做法，以页面为单位，进行动态加载。b. 组件动态加载(offScreen Component)，对于不在当前视窗的组件，先不加载。c. 图片懒加载(offScreen Image)，同上。值得庆幸的是，越来越多的浏览器支持原生的懒加载，通过给img标签加上loading="lazy"来开启懒加载模式(vue-lazyload)。Promise异步调用，控制首屏请求数量浏览器缓存(localStorage)静态文件缓存方案：这个最常看到。现在流行的方式是文件hash+强缓存的一个方案。比如hash+ cache control: max-age=1年。pwa主要是用了它的离线缓存引入http2.0：http2.0对比http1.1，最主要的提升是传输性能，特别是在接口小而多的时候。开启gzip优化全局WebView（移动spa）部分前端请求改为服务端内网请求.打包优化添加externals，减少vendor.js体积，通过CDN的方式引入tree-shaking：去除没用过的代码UglifyJsPlugin：压缩代码ExtractTextPlugin：提取css出来开启gzip压缩，生成压缩文件静态图片都传到阿里云上了，然后建了一个常量文件，进行管理icon处理渲染优化利用好async和defer这两个属性：如果是独立功能的js文件，可以加入async属性。如果是优先级低且没有依赖的js，我们可以加入defer属性。使用ssr渲染：服务器性能一般都很好，那么可以先在服务器先把vdom计算完成后，再输出给前端，这样可以节约的时间为：计算量/(服务器计算速度 - 客户端计算速度)。第二个是服务器可以把首屏的ajax请求在服务端阶段就完成，这样可以省去和客户端通过tcp传输的时间。拆分接口，页面分批渲染，部分接口数据做localstorage缓存图片优化选择先进的图片格式：使用 JPEG 2000, JPEG XR, and WebP 的图片格式来代替现有的jpeg和png，当页面图片较多时，这点作用非常明显。把部分大容量的图片从BaseLine JPEG切换成Progressive JPEG（理解这两者的差别）也能缩小体积。jpeg 有损压缩，体积小，不支持透明。png 无损压缩，高保真，支持透明。png - 8 2 ^ 8种色彩 256种png - 24 2 ^ 24种色彩 1600w种png - 32 2 ^ 24 ^ 8种 （还有8种透明度色彩通道）颜色支持越多，体积越大svg 矢量图 体积小 不失真，适用于小图标base64 减小http请求，但不宜处理大图片，因为大图片增加页面大小，webpack的url - loader已经支持webP 新兴格式，支持有损和无损压缩，支持透明，体积还特别小，与 PNG 相比，通常提供 3 倍的文件大小，浏览器兼容性低，局限性较大。项目中的支持webp（参照自京东gaea）： 在index.html中判断是否支持webPwindow.supportWebp = false; if (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0) { document.body.classList.add('webp'); window.supportWebp = true; }css中写两套样式，比如.banner .webp .banner在js中根据window.supportWebp去判断用哪种图片。页面性能测试工具PageSpeed ToolsLighthouseOneAPM
