html初体验#2

时间 2019-12-04

标签 html 体验栏目 HTML 繁體版

原文原文链接

碎碎念

关于布局javascript

css布局：横向、纵向
2019年新进展：css grid

git bash 上安装 http servercss

目的在于不使用 file:// 打开本身写的文件，使用 http:// 打开
npm i -g http-server    安装 http-server
http-server -c-1        不带缓存的（-c-1）运行 http-server

git bash 上卸载 http serverjava
```
npm uninstall -g http-server
```

一些常见标签的基本用法与点

弹框用<button>
跳转页面用<a>
<iframe>用于在页面嵌套页面（可能致使程序变卡）git
1. <iframe>的经常使用方法npm
```
<iframe src="" frameborder="" width="" height="" name="xxx">
```
2. <iframe>设置name后，而后经过<a>标签的target=xxx，来指定新窗口开启位置
3. <iframe>的更多属性见：后端
```
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe
```

<a>标签用于指定跳转超连接缓存

<a>标签的经常使用方法：bash

<a href="" target="_blank\_self\_parent\_top" download></a>

属性target的四种值布局

_blank:新窗口
_self:本页面（能够是iframe页面）
_parent:父辈页面
_top:最上层页面

属性download用来标识该标签<a>是用来下载

属性href的几种值post

绝对路径
相对路径
javascript:;
javascript:js代码
#
#xxx
？name=xxx            发送name=xxx请求；

<a>标签href值的具体例子

<a href="#"></a>          让页面跳到页面顶部，在location.href后面增长#号

<a href="#none"></a>      页面里面有id为none的元素，会执行锚点机制跳转到这个元素上缘

<a href="###"></a>        不跳转，能够阻止默认的跳转行为。但在后端代码中容易识别成注释，慎用

<a href="javascript:"></a>           忘记加分号啦

<a href="javascript:;"></a>          执行JavaScript为协议，这里意思为不执行任何命令

<a href="javascript:void(0)"></a>    忘记加分号啦

<a href="javascript :void(0);"></a>  执行JavaScript为协议，这里意思为不执行任何命令

<form>标签也用于跳转页面，但必须有按钮（<button>或者<input type="button">）点击才能跳转
1. 完整样式
```
<form action="网址" method="post" target="同<a>标签">
    <input type="text" name="">
    <input type="password" name="">
    <input type="submit" value="提交">
</form>
```
2. input必须写name属性才能被提交。事实上，全部内容都须要写name属性才能被提交
<input>经常使用的样式
1. 复选框
  - 形式
```
<label><input type="checkbox" id="xxx" name="" value="爱"></label>
```
  - 经过添加<label>...</label>标签，这样点击 “爱” 也可勾选复选框
    经过添加name ，使它能被提交，而且提交名为 name
    经过添加value，呈现复选框的选项，并使它提交内容为 value
2. 单选框
  - 形式
```
<label><input type="radio" name="" value=""></label>
```
  - 经过给多个单选框一样的name，使它变成【真正的】单选框（不添加 name，多个单选框都能选中）
  - <label>的用处和【复选框】里讲的同样
3. 滑动条
  - 形式
```
<input type="range" name="points" min="1" max="10" step="2" value="3">
```
  - ```
  min    规定滑动的最小值
     max    规定滑动的最大值
     step   规定滑动步长，本例中能取得值就只有一、四、七、10
     value  规定默认值
```
- 去取range的值时，取出来的值是字符串类型，不是数字类型！！！和别的值作操做的时候会有影响！！！

<select><option>下拉菜单

<select name="" multiple>
    <option value=""></option>
    <option value="" disabled></option>
    <option value="" selected></option>
</select>

multiple   表示可否多选
disabled   表示该选项不可选
selected   表示该选项默认选中

<textarea>多行文字

<textarea cols="" rows="" name="">

能够用css控制大小           width:--px;
                           height:--px;
能够用css控制大小是否可变    resize:none;