html href拼接_nginx部署默认web页面(附带html众多小方法)

1. 打开服务器,预装好nginx,查看nginx目录(不会安装的和查看的,前面有教程)

2. 打开nginx目录,找到conf文件夹

3. 点进去找到nginx.conf的配置文件.

4. vim nginx.conf

5. 找到这个部分

location / {            root  /www/smalldragon.club/;            index  page.html;        }

       root是你的文件的根目录,\

       index是默认网址.

按你自己的目录改,怎么传就有很多种方法了.

接下来就是html小功能方法了

# hmtl1.HTML5 视频上传支持格式| 格式  | IE   || ----- | ---- || Ogg   | No   || MPEG4 | 9.0+ || WebM  | No   |实例 ```html    Your browser does not support the video tag.```| 属性                                                         | 值       | 描述                                                         || :----------------------------------------------------------- | :------- | :----------------------------------------------------------- || [autoplay](https://www.w3school.com.cn/tags/att_video_autoplay.asp) | autoplay | 如果出现该属性，则视频在就绪后马上播放。|| [controls](https://www.w3school.com.cn/tags/att_video_controls.asp) | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。|| [height](https://www.w3school.com.cn/tags/att_video_height.asp) | *pixels* | 设置视频播放器的高度。|| [loop](https://www.w3school.com.cn/tags/att_video_loop.asp)  | loop     | 如果出现该属性，则当媒介文件完成播放后再次开始播放。|| [preload](https://www.w3school.com.cn/tags/att_video_preload.asp) | preload  | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。|| [src](https://www.w3school.com.cn/tags/att_video_src.asp)    | *url*    | 要播放的视频的 URL。|| [width](https://www.w3school.com.cn/tags/att_video_width.asp) | *pixels* | 设置视频播放器的宽度。|## 1.另类的笔记# [HTML name、id、class 的区别](https://www.cnblogs.com/polk6/archive/2013/05/28/3101571.html)# 目录\1. [name](https://www.cnblogs.com/polk6/archive/2013/05/28/3101571.html#Menu1-name) ：指定标签的名称。\2. [id](https://www.cnblogs.com/polk6/archive/2013/05/28/3101571.html#Menu2-id) ：指定标签的唯一标识。\3. [class](https://www.cnblogs.com/polk6/archive/2013/05/28/3101571.html#Menu3-class) ：指定标签的类名。  1. name指定标签的名称。## 1.1 格式<input type="text" name="username" />## 1.2 应用场景①form表单：name可作为转递给服务器表单列表的变量名；如上面的传到服务器的名称为：username='text的值'。②input type='radio'单选标签：把几个单选标签的 name设为一个相同值时，将会进行单选操作。```男女```③快速获取一组name相同的标签：获取拥有相同name的标签，一起进行操作，如:更改属性、注册事件等。```function changtxtcolor() {    var txts = document.getElementsByName('txtcolor'); //获取所有name=txtcolor 的标签    for (var i = 0; i < txts.length; i++) { //循环遍历标签，并把背景色改为red        txts[i].style.backgroundColor = 'red';    }}```## 1.3 特性name属性的值，在当前page页面中并非唯一性。 # 2. id指定标签的唯一标识。## 2.1 格式<input type=password id="userpwd" />## 2.2 应用场景①根据提供的唯一id号，快速获取标签对象。如：document.getElementById(id)②用于充当label标签for属性的值：示例：<label for='userid'>用户名：label>，表示单击此label标签时，id为userid的标签获得焦点。## **2.3 特性**id属性的值，在当前的page页面要是唯一的。 # 3. class指定标签的类名。## **3.1 格式**<input type=button class="btnsubmit" />## **3.2 应用场景**①CSS操作，把一些特定样式放到一个class类中，需要此样式的标签，可以在添加此类。## **3.3 特性**可以把多个类，放在一个class属性里，但必须用空格隔开；如：class='btnsubmit btnopen'# rolerole 是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。# ul## 标签定义及使用说明<ul> 标签定义无序列表。将 <ul> 标签与<li>标签一起使用，创建无序列表。```txt    Coffee    Tea    Milk```# span## 定义和用法<span> 标签被用来组合文档中的行内元素。```txt例子解释如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。可以对同一个  元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组(类似的元素，或者可以理解为某一类元素)，而 id 用于标识单独的唯一的元素。提示：事实上，您也许已经注意到了，W3School 站点上有一些文本的样式与其他文本是不同的。比如“提示”使用了粗体的橘红色。尽管实现这种效果的方法非常多，但是我们的做法是：使用“提示”使用 span 元素，然后对这个 span 元素的父元素，即 p 元素应用 class，这样就可以对这个类的子元素 span 应用相应的样式了。```# rel```**1、rel属性定义：**标签的rel属性用于指出当前文档与被链接文档的关系。仅在有href属性存在的情况下使用，我们常在link标签中用到，比如：。```a.rel属性是指定连接的关系类型，表明所连接的文档和此连接的关系;b.把这个属性根据实际情况写的话， 对于搜索引擎来说，会起到一定的链接作用。特别是在html5中，部分属性还专门为浏览器或搜索引擎而提供的;c.部分属性，是针对一些客户终端而设计的，具体百度找下相关知识，这里暂不研究了。# style ```html 

A Blue Heading

A red paragraph.

```演示内容：```htmlA Blue HeadingA red paragraph.```# 空格**&nbsp**# css内容Cascading Style Sheets层叠样式表# html和css![img](https://pic2.zhimg.com/80/v2-54d86e0e87668510b39a11619fe3b4f9_720w.jpg)![img](https://pic2.zhimg.com/80/v2-c0f89bc3d8aedbcb61ebd90574922b99_720w.jpg)行内元素和块内元素相互转换相对定位和绝对定位# html如何增加音乐```txt在html文档中插入音乐可以用如下的代码其中：hidden="true" 表示隐藏播放器按钮hidden="false"开启autostart="true" 表示打开网页加载完后自动播放loop="true" 表示循环播放 ，如果仅想播放一次，代码为：loop="false" 标签定义嵌入的内容，比如插件，可以用来插入各种多媒体，它是 HTML 5 中的新标签。```# html添加背景图```txt background-image:url(../img/81585358_p0_master1200.jpg); /* 让图片在中间显示 */ background-position: center center; background-repeat: no-repeat; /* 消除因为图片尺寸不够导致拼接 */ background-attachment: fixed; /* 自适应大小 */ background-size: cover; background-color: #CCCCCC; display: block;```# form标签输入框required使用```txt

用户

密码

```# html通过css来设置半透明背景```txtbackground-color:rgba(0,152,50,0.7);// -->70%的不透明度 background-color:transparent;支持完全透明```# 设置阴影```text/* 这个阴影太骚了 */ box-shadow:0 25px 25px rgba(2, 0, 1, 0.692);```# 圆角``` /* 圆角一下子提升逼格 */ border-radius: 30px;```# 字体加粗```font-weight: bolder;```# 调位置神代码``` position: absolute; top: 0; left: 0;```# 字体倾斜```font-style: italic;```# pointer-events```pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。```# 焦点元素```CSS伪类 :focus表示获得焦点的元素(如表单输入)。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。/* Selects any when focused */input:focus { color: red;}```# 高亮```:valid CSS 伪类表示内容验证正确的 或其他 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。```两个配合着用,一下子就闪了起来# input按钮加链接``````# box-shadow```txt/* x偏移量 | y偏移量 | 阴影颜色 */box-shadow: 60px -16px teal;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */box-shadow: 10px 5px 5px black;/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */box-shadow: inset 5em 1em gold;/* 任意数量的阴影，以逗号分隔 */box-shadow: 3px 3px red, -1em 0 0.4em olive;/* 全局关键字 */box-shadow: inherit;box-shadow: initial;box-shadow: unset;```