整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好，我是 网络系统技艺者，点击右上方“关注”，每天和大家分享 关于 网络设备及系统和企业组网 方面干货。码字不易，如果您觉得文章还可以，就点赞+关注+收藏吧，也许在以后某个时间能够用得到。
要使浏览器在输入网址时自动跳转到 HTTPS，你可以通过几种方式来实现：
1、使用服务器端重定向：这是最常见的方法。你可以配置服务器，使其在接收到 HTTP 请求时，将请求重定向到对应的 HTTPS 地址。具体实现方式取决于你使用的服务器软件（例如 Apache、Nginx、IIS 等），可以通过配置文件来完成这个设置。
2、使用 HSTS（HTTP Strict Transport Security）：HSTS 是一个安全策略，它告诉浏览器在一段时间内强制使用 HTTPS 连接。在服务器响应的 HTTP 头中包含 HSTS 头信息，浏览器会记住并在指定的时间内自动将 HTTP 请求转为 HTTPS。但请注意，一旦启用 HSTS，客户端浏览器将会记住这个设置，即使服务器停止发送 HSTS 头信息，客户端仍然会强制使用 HTTPS。因此，在启用 HSTS 之前，请确保你的网站已经完全支持 HTTPS，并且你愿意承担由此带来的长期影响。
3、JavaScript 重定向：虽然不是最佳的，但你也可以使用 JavaScript 在页面加载时检测协议，并将页面重定向到 HTTPS 版本。这种方法不如服务器端重定向或 HSTS 安全可靠，因为它依赖于客户端浏览器执行 JavaScript。在 HTML <head> 标签中插入如下代码可以实现简单的 JavaScript 重定向：
<script>
if (location.protocol !=='https:') {
location.replace(`https:${location.href.substring(location.protocol.length)}`);
}
</script>
无论选择哪种方法，始终确保你的网站服务器已正确配置，并且已经在你的网站上使用了有效的 SSL/TLS 证书。
我是“网络系统技艺者”，系统运维工程师一枚，持续分享【网络技术+系统运维技术】干货。码字不易，如果您觉得文章还可以，就关注+收藏吧，也许在以后某个时间能够用得到。
本文主要记录常用的html标签使用说明，用起来的时候偶尔查查。
标签 | 英文全拼 | 作用 | 特点 |
?<html></html>?? | html | 网页的根标签 | 所有的标签都要写在这一对根标签里面 |
??<head></head>?? | head | 网页的头标签 | 包括完档的属性和信息 |
??<body></body>?? | body | 网页的主题 | 包含文档的所有内容 |
??<div></div>?? | division | 定义一个区域 | 浏览器通常会在??<div>??前后放置一个换行符 |
??<!-- 注释 -->?? | - | 注释 | 单标签 |
??<br>或<br/>?? | break | 换行 | 单标签，不会在其前后创建空白行 |
??<hr>或<hr/>?? | horizontal rule | 添加水平线 | 单标签 |
??<img src="">?? | image | 添加图片 | 单标签 |
??<embed src="">?? | embed | 嵌入外部应用 | 单标签 |
??<meta>?? | meta | 提供有关页面的元信息 | 单标签，??<meta>???标签通常位于??<head>??区域内 |
??<link>?? | link | 定义文档与外部资源的关系 | 单标签，??<link>???标签只能存在于??<head>??区域内，不过它可出现任何次数。 |
??<p></p>?? | paragraph | 定义段落 | 自动在其前后创建空白行 |
??<h1> to <h6>?? | Header 1 to Header 6 | 定义标题 | h1在一个页面里只能出现一次 |
??<strong></strong>?? | strong | 文本加粗 | 加粗标记该文本 |
??<b></b>?? | bold | 文本加粗 | 加粗显示文本，不推荐使用 |
??<em></em>?? | emphasize | 文本倾斜 | 倾斜标记文本 |
??<i></i>?? | italic | 文本倾斜 | 倾斜显示文本，不推荐使用 |
??<del></del>?? | delete | 文本添加删除线 | - |
??<s></s>?? | strike | 文本添加删除线 | 不推荐使用 |
??<ins></ins>?? | insert | 文本添加下划线 | - |
??<u></u>?? | underline | 文本添加下划线 | 不推荐使用 |
??<a href="">填写内容</a>?? | anchor | 添加超链接 | 最好使用CSS来改变链接的样式 |
??<ul></ul>?? | unordered list | 定义无序列表 | 通常与??<li>??标签一起使用 |
??<ol></ol>?? | ordered list | 定义有序列表 | 通常与??<li>??标签一起使用 |
??<li></li>?? | list item | 创建列表项 | 可与各种列表定义标签一起使用 |
??<dl></dl>?? | definition list | 定义描述列表 | 通常与??<dt>???和??<dd>??一起使用 |
??<dt></dt>?? | definition term | 定义条目 | 定义描述列表的项目 |
??<dd></dd>?? | definition description | 定义描述 | 对描述列表中的项目进行描述 |
??<table></table>?? | table | 定义HTML表格 | 尽可能通过样式改变表格外观 |
??<tr></tr>?? | table row | 定义表格的行 | 一个??<tr>???标签包含一个或多个??<th>???或??<td>??标签 |
??<th></th>?? | table headline | 定义表格每一列的标题 | 该标签的文本通常呈现为粗体且居中 |
??<td></td>?? | table data | 定义表格中的单元格数据 | 该标签的文本呈现为普通且左对齐 |
??<caption>表格标题</caption>?? | caption | 定义整个表格的标题 | ??<caption>???标签必须直接放在??<table>??标签后 |
??<input type="">?? | input | 定义输入控件 | 输入字段可通过多种方式改变，取决于type属性 |
??select?? | select | 定义下拉列表 | ??<select>???中的??<option>??标签定义了列表中的可用选项 |
??<option></option>?? | option | 定义下拉列表中的可用项 | ??<option>??标签不可自由定义宽高 |
??<optgroup></optgroup>?? | options group | 定义选项组 | ??<optgroup>??标签用于把相关的选项组合在一起 |
??<textarea></textarea>?? | textarea | 定义多行的文本输入控件 | 文本的默认字体是等宽字体 |
??<form></form>?? | form | 定义表单 | ??<form>??可以包含多个元素 |
??<fieldset></fieldset>?? | field set | 定义围绕表单中元素的边框 | ??<legend>???为??<fieldset>??定义标题 |
??<legend></legend>?? | legend | 为??<fieldset>??定义标题 | ??<legend>??通过css设定样式 |
??<progress></progress>?? | progress | 定义运行中的任务进度 | ??<progress>???是HTML5中的新标签，??<progress>??标签不适合用来表示度量衡 |
??<meter></meter>?? | meter | 度量衡 | ??<meter>???是HTML5的新标签，??<meter>??标签不适合用来表示进度条 |
??<audio></audio>?? | audio | 添加音频 | ??<audio>??标签是HTML5的新标签 |
??<video></video>?? | video | 添加视频 | ??<video>??标签是HTML5的新标签 |
??<source>?? | source | 定义媒介资源 | ??<source>??标签是HTML5中的新标签 |
普通用法
锚点链接
锚点链接通过点击超链接，自动跳转到我们设置锚点的位置，类似于word的目录导航。建立锚点的元素必须要有id或name属性，最好两个都有。这里只跳转本页面元素，其他页面跳转自行搜索。
具体做法如下：
示例如下。为了显示效果，通过使用lorem自动生成随机文本（具体使用方法搜索，一般直接输入就行），lorem*50表示重复lorem15次。
<a href="#id2">a</a>
<p id="id1">
(lorem*15)
</p>
(lorem*15)
<p id="id2">
(lorem*15)
</p>超链接全局设置
在页面head中写入代码可以设置超链接的全局跳转设置
<head>
<!-- 让页面所有的超链接新页面打开 -->
<base target="_blank">
</head>charset编码
name
网页自动跳转
无序列表
无序列表使用粗体圆点进行标记。简单示例如下。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
...
</ul>有序列表
有序列表使用数字进行标记，我们可以通过整数值start指定列表编号的起始值。简单示例如下。
<ol start="2">
<li>a</li>
<li>b</li>
<li>c</li>
...
</ol>描述列表
通过描述列表自定义列表，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。简单示例如下。
<dl>
<dt>A</dt> <!-- 小标题 -->
<dd>A1</dd> <!-- 解释标题 -->
<dd>A2</dd> <!-- 解释标题 -->
<dt>B</dt> <!-- 小标题 -->
<dd>B1</dd> <!-- 解释标题 -->
<dd>B2</dd> <!-- 解释标题 -->
</dl>基础表格
简单示例如下。
<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格标题</caption> <!-- 定义表格标题 -->
<tr>
<!-- 定义表格的行 -->
<td>A1</td> <!-- 定义表格该行第一列中的数据 -->
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<!-- 定义表格的行 -->
<th>A</th> <!-- 定义表格每一列的标题 -->
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
</table>单元格合并
简单示例如下。
<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格标题</strong></caption> <!-- 定义表格标题 -->
<tr height="100">
<!-- 定义表格的行 -->
<td colspan="2">A1</td> <!-- 定义该行可以横跨两列 -->
<td>B1</td>
</tr>
<tr height="100">
<td>A2</td>
<td>B2</td>
<td rowspan="2">C</td> <!-- 定义该行可以横跨两行 -->
</tr>
<tr height="100">
<td>A3</td>
<td>B3</td>
</tr>
</table>对于??<input>??不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
文本输入框
简单示例如下。
<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">密码输入框
简单示例如下。
<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密码">单选框
示例一，两个单选框都可以被选中
<div>
<input type="radio" name="man" checked="checked">男
</div>
<div>
<input type="radio" name="woman">女
</div>示例二，两个单选框只能有一个被选中
<div>
<input type="radio" name="gender" checked="checked">男
</div>
<div>
<input type="radio" name="gender">女
</div>下拉列表
??<select>??
??<optgroup>??
??<option>??
示例一，单选下拉列表
<select>
<option value="a">a</option>
<option value="b">b</option>
<option value="c" selected='selected'>c</option> <!-- 默认选中 -->
</select>示例二，带组合的单选下拉列表
<select>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1">b1</option>
<option value="b2">b2</option>
</optgroup>
</select>示例三，带组合的多选下拉列表
<select multiple=”multiple”>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1" selected='selected'>b1</option>
<option value="b2">b2</option>
</optgroup>
</select>多选框
简单示例如下。
<input type="checkbox" checked="checked">A
<input type="checkbox">B文本框
简单示例如下。
<textarea cols="5" rows="2" placeholder="text"></textarea>文本上传控件
简单示例如下。
<input type="file" accept="image/gif, image/jpeg"/>其他类型按钮
<input type="submit">文件提交按钮
<input type="button" value="">普通按钮
<input type="image" src="">图片按钮
<input type="reset">重置按钮
<input type="url">网址控件
<input type="date">日期控件
<input type="time">时间控件
<!--email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交-->
<input type="email">邮件控件
<input type="number" step="3">数字控件
<input type="range" step="100">滑块控件
<input type="color">颜色控件表单
示例一，普通表单
<form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>示例二，带分组信息表单
<form>
<fieldset>
<legend>Personalia:</legend>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</fieldset>
First nameA: <input type="text" name="fname"><br>
Last nameB: <input type="text" name="lname"><br>
</form>??<progress>???与??<meter>??主要区别和用法见??HTML5 progress和meter控件??
??<progress>??
简单示例如下。
<progress value="60" max="100"></progress>??<meter>??
简单示例如下
<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>??<audio>??
简单示例如下
<audio src="demo.mp3" controls autoplay></audio>??<video>??
简单示例如下
<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>??<source>??
简单示例如下
<video controls>
<source src="demo.mp3" type="audio/mp3">
<source src="demo.mp4" type="video/mp4">
您的浏览器不支持video元素。
</video>??HTML特殊字符编码对照表??
荐使用gulp-rev + gulp-rev-collector是比较方便的方法，结果如下:
"/css/style.css"=> "/dist/css/style-1d87bebe.css"
"/js/script1.js"=> "/dist/script1-61e0be79.js"
"cdn/image.gif"=> "//cdn8.example.dot/img/image-35c3af8134.gif"
但是由于公司发布系统限制，如果用上面方法实现，每次更新都会积压过多过期无用的文件，我们预期效果是:
"/css/style.css"=> "/dist/css/style.css?v=1d87bebe"
"/js/script1.js"=> "/dist/script1.js?v=61e0be79"
"cdn/image.gif"=> "//cdn8.example.dot/img/image.gif?v=35c3af8134"
怎么破?改上面两个Gulp插件是最高效的方法了。
1.安装Gulp
npm install --save-dev gulp
2.分别安装gulp-rev、gulp-rev-collerctor
npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector
3.打开node_modules\gulp-rev\index.js
第133行 manifest[originalFile]=revisionedFile;
更新为: manifest[originalFile]=originalFile + '?v=' + file.revHash;
4.打开node_modules\gulp-rev\node_modules\rev-path\index.js
10行 return filename + '-' + hash + ext;
更新为: return filename + ext;
5.打开node_modules\gulp-rev-collector\index.js
31行 if ( path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !==path.basename(key) ) {
更新为: if ( path.basename(json[key]).split('?')[0] !==path.basename(key) ) {
6.配置gulpfile.js, 可参考下面gulpfile.js代码
7.结果达到预期，如下：
Css
background: url('../img/one.jpg?v=28bd4f6d18');
src: url('/fonts/icomoon.eot?v=921bbb6f59');
Html
href="css/main.css?v=885e0e1815"
src="js/main.js?v=10ba7be289"
src="img/one.jpg?v=28bd4f6d18"
目录
├── package.json
├── gulpfile.js
├── src/
│ ├── css/
│ │ ├── main.less
│ │ └── normalize.less
│ ├── js/
│ │ ├── xx.js
│ │ └── xx.js
│ ├── img/
│ │ ├── xx.jpg
│ │ └── xx.png
│ ├── fonts/
│ │ ├── xx.svg
│ │ └── xx.ttf
│ ├── rev/
│ ├── index.html
package.json:
{
"devDependencies": {
"apache-server-configs": "2.14.0",
"archiver": "^0.14.3",
"del": "^1.1.1",
"glob": "^5.0.5",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.1.0",
"gulp-changed": "^1.2.1",
"gulp-csslint": "^0.1.5",
"gulp-header": "^1.2.2",
"gulp-if": "^1.2.5",
"gulp-jshint": "^1.11.2",
"gulp-less": "^3.0.3",
"gulp-load-plugins": "^0.10.0",
"gulp-minify-css": "^1.2.0",
"gulp-minify-html": "^1.0.4",
"gulp-rev": "^5.1.0",
"gulp-rev-collector": "^1.0.0",
"gulp-uglify": "^1.2.0",
"gulp-util": "^3.0.6",
"jquery": "1.11.3",
"jshint": "^2.8.0",
"jshint-stylish": "^2.0.1",
"mocha": "^2.2.4",
"normalize.css": "3.0.3",
"run-sequence": "^1.0.2"
},
"engines": {
"node": ">=0.10.0"
},
"h5bp-configs": {
"directories": {
"archive": "archive",
"dist": "dist",
"src": "src",
"test": "test"
}
},
"homepage": "",
"license": {
"type": "MIT",
"url": ""
},
"name": "gulp-auto-version",
"private": true,
"scripts": {
"build": "gulp build",
"test": ""
},
"version": "1.0.0",
"dependencies": {}
}
gulpfile.js
var gulp=require('gulp'),
runSequence=require('run-sequence'),
gulpif=require('gulp-if'),
uglify=require('gulp-uglify'),
less=require('gulp-less'),
csslint=require('gulp-csslint'),
rev=require('gulp-rev'),
minifyCss=require('gulp-minify-css'),
changed=require('gulp-changed'),
jshint=require('gulp-jshint'),
stylish=require('jshint-stylish'),
revCollector=require('gulp-rev-collector'),
minifyHtml=require('gulp-minify-html'),
autoprefixer=require('gulp-autoprefixer'),
del=require('del');
var cssSrc=['main.less', 'layer-box.less', 'tag.less'],
cssDest='dist/css',
jsSrc='src/js/*.js',
jsDest='dist/js',
fontSrc='src/fonts/*',
fontDest='dist/font',
imgSrc='src/img/*',
imgDest='dist/img',
cssRevSrc='src/css/revCss',
condition=true;
function changePath(basePath){
var nowCssSrc=[];
for (var i=0; i < cssSrc.length; i++) {
nowCssSrc.push(cssRevSrc + '/' + cssSrc[i]);
}
return nowCssSrc;
}
//Fonts & Images 根据MD5获取版本号
gulp.task('revFont', function(){
return gulp.src(fontSrc)
.pipe(rev())
.pipe(gulp.dest(fontDest))
.pipe(rev.manifest())
.pipe(gulp.dest('src/rev/font'));
});
gulp.task('revImg', function(){
return gulp.src(imgSrc)
.pipe(rev())
.pipe(gulp.dest(imgDest))
.pipe(rev.manifest())
.pipe(gulp.dest('src/rev/img'));
});
//检测JS
gulp.task('lintJs', function(){
return gulp.src(jsSrc)
//.pipe(jscs()) //检测JS风格
.pipe(jshint({
"undef": false,
"unused": false
}))
//.pipe(jshint.reporter('default')) //错误默认提示
.pipe(jshint.reporter(stylish)) //高亮提示
.pipe(jshint.reporter('fail'));
});
//压缩JS/生成版本号
gulp.task('miniJs', function(){
return gulp.src(jsSrc)
.pipe(gulpif(
condition, uglify()
))
.pipe(rev())
.pipe(gulp.dest(jsDest))
.pipe(rev.manifest())
.pipe(gulp.dest('src/rev/js'));
});
//CSS里更新引入文件版本号
gulp.task('revCollectorCss', function () {
return gulp.src(['src/rev/**/*.json', 'src/css/*.less'])
.pipe(revCollector())
.pipe(gulp.dest(cssRevSrc));
});
//检测CSS
gulp.task('lintCss', function(){
return gulp.src(cssSrc)
.pipe(csslint())
.pipe(csslint.reporter())
.pipe(csslint.failReporter());
});
//压缩/合并CSS/生成版本号
gulp.task('miniCss', function(){
return gulp.src(changePath(cssRevSrc))
.pipe(less())
.pipe(gulpif(
condition, minifyCss({
compatibility: 'ie7'
})
))
.pipe(rev())
.pipe(gulpif(
condition, changed(cssDest)
))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false,
remove: false
}))
.pipe(gulp.dest(cssDest))
.pipe(rev.manifest())
.pipe(gulp.dest('src/rev/css'));
});
//压缩Html/更新引入文件版本
gulp.task('miniHtml', function () {
return gulp.src(['src/rev/**/*.json', 'src/*.html'])
.pipe(revCollector())
.pipe(gulpif(
condition, minifyHtml({
empty: true,
spare: true,
quotes: true
})
))
.pipe(gulp.dest('dist'));
});
gulp.task('delRevCss', function(){
del([cssRevSrc,cssRevSrc.replace('src/', 'dist/')]);
})
//意外出错？清除缓存文件
gulp.task('clean', function(){
del([cssRevSrc ,cssRevSrc.replace('src/', 'dist/')]);
})
//开发构建
gulp.task('dev', function (done) {
condition=false;
runSequence(
['revFont', 'revImg'],
['lintJs'],
['revCollectorCss'],
['miniCss', 'miniJs'],
['miniHtml', 'delRevCss'],
done);
});
//正式构建
gulp.task('build', function (done) {
runSequence(
['revFont', 'revImg'],
['lintJs'],
['revCollectorCss'],
['miniCss', 'miniJs'],
['miniHtml', 'delRevCss'],
done);
});
gulp.task('default', ['build']);
*请认真填写需求信息，我们会在24小时内与您取得联系。
