a标签

a标签的作用

  1. 跳转外部页面
  2. 跳转内部锚点
  3. 跳转到邮箱或电话

属性

a的href的取值

h:hyper 超级 ref:reference 引用； 表示a是一个超链接

网址
  1. https://google.com
  1. <a href= https://google">超链接</a>
  1. http://google.com
  1. <a href= http://google">超链接</a>
  1. //google.com
    • 无协议网址
    • 会自动适用，如果写网址的话就写这个就好了
  1. <a href= //google">超链接</a>

路径
  1. /a/b/c以及a/b/c/
    • 为什么这个/a/b/c不是绝对路径了
    • 那是因为我们之前讲路径都是基于文件的，当我们使用http之后就不在是文件了，当我们开启了http之后根目录就是文件了
  2. index.htm以及./index.html
    • 很多时候前面加不加./是一样的

伪协议
  1. javascript:代码；
  1. <a href="javascript:;">空的伪协议</a>
  • 冒号和分号不能删
  • 可以直接执行JS代码，但是现在基本不用了。
  • 现在一般直接写一个空的JS代码，因为只有这种方法会得到一个什么都不做的a标签，其他方法都会做一些事情，比如如果href为空，点击就会刷新，如果在里面写井号，他虽然不会刷新，但是页面会自动滚到顶部。
  • 因为他相当于执行一段JS代码，只不过访问了一段不存在的代码而已。
  1. mailto：邮箱
  1. <a href="mailto:123456@163.com">发邮件</a>
  1. tel:手机号

会自动呼起打电话界面并把电话填入

  1. <a href="tel:123456">打电话</a>

id

1.href-#xxx

跳转到一个指定的标签

  1.     <p>1</p>
  2.     <p>2</p>
  3.     <p id="xxx">3</p>
  4.     <p>4</p>
  5.     <p>5</p>
  6.     <a href="#xxx">跳转到3</a>

a的target的取值

指定在哪个窗口打开超链接；

内置名字
  1. _blank

在新的页面打开

  1. _top

在顶层窗口打开

  • 页面可以通过iframe引用另一个页面，这两个页面是一个层级关系，外面的窗口包含里面的窗口。

在白色区域打开

  1. <a href="https://google.com" target="_top">google</a>
  2.     <div>
  3.       <iframe src="a-target-iframe.html" frameborder="0"></iframe>
  4.     </div>
  1. <body style="background: red">
  2.     我是iframe
  3.     <a href="//google.com" target="_top">打开谷歌</a>
  4.   </body>

在红色区域打开

  1. <a href="https://google.com" target="_top">google</a>
  2.     <div>
  3.       <iframe src="a-target-iframe.html" frameborder="0"></iframe>
  4.     </div>
  1. <body style="background: red">
  2.     我是iframe
  3.     <a href="//google.com" target="_self">打开谷歌</a>
  4.   </body>
  1. _parent

父窗口

  • 用法和_top差不多，在这一个窗口的父窗口打开
  1. _self

默认值，在当前的页面打开

程序员命名
  1. window的name

arget=”xxx” 的意思是如果有一个xxx窗口就用它，如果没有，就创建一个叫xxx窗口

  1.     <a href="https://google.com" target="xxx">google</a>
  2.     <a href="https://baidu.com" target="xxx">baidu</a>
  1. iframe的name

可以把iframe调的和页面一样大，这样就可以既访问谷歌也访问百度

  1.     <a href="https://google.com" target="xxx">google</a>
  2.     <a href="https://baidu.com" target="yyy">baidu</a>
  3.     <br />
  4.     <iframe src="https://google.com" name="xxx"></iframe>
  5.     <iframe src="https://baidu.com" name="yyy"></iframe>

a的donwload

了解就行了，不是所有浏览器都支持，尤其手机浏览器可能不支持； 不是打开网页，而是下载网页。

rel=noopener

为了防止一个bug，学JS时候在讲。

iframe标签

内嵌窗口 现在已经很少使用了，有一些老的系统还在用，不用过多了解

table标签

表格

  • table标签里只能有三个标签:thead、tbody、tfoot ,其他的都是错的。
  • 这个标签和你写的顺序无关，它一定是:thead、tbody、tfoot的顺序显示的。

相关的标签

thead

表的头部，可以没有

tbody

表的头部

  • 如果没写thead、tbody或是tfoot的时候,它就会把tr放进tbody里。
  • 如果直接写了td，会自动帮你加上tr和tbody。

thead

表的尾部，可以没有

tr

table row

th

表示它是一个表头。

td

table data

  1.     <table>
  2.       <thead>
  3.         <tr>
  4.           <th></th>
  5.           <th>小红</th>
  6.           <th>小明</th>
  7.           <th>小花</th>
  8.         </tr>
  9.       </thead>
  10.       <tbody>
  11.         <tr>
  12.           <th>数学</th>
  13.           <td>91</td>
  14.           <td>82</td>
  15.           <td>86</td>
  16.         </tr>
  17.         <tr>
  18.           <th>语文</th>
  19.           <td>74</td>
  20.           <td>65</td>
  21.           <td>82</td>
  22.         </tr>
  23.         <tr>
  24.           <th>英语</th>
  25.           <td>91</td>
  26.           <td>82</td>
  27.           <td>86</td>
  28.         </tr>
  29.       </tbody>
  30.       <tfoot>
  31.         <tr>
  32.           <th>总分</th>
  33.           <td>256</td>
  34.           <td>229</td>
  35.           <td>254</td>
  36.         </tr>
  37.       </tfoot>
  38.     </table>

相关的样式

table-layout

auto

默认值 自动计算每一行和每一列的宽和高，表格及单元格的宽度取决于内容。

fixed

表格和列的宽度通过表格的宽度来设置，某一列的宽度仅由该列首行的单元格决定。在当前列中，该单元格所在行之后的行并不会影响整个列宽。

border-collapse

定义了表格单元的内容和边框之间的空间。如果它是一个像素长度单位，这个像素将被应用到所有的四个侧边；如果它是一个百分比的长度单位，内容将被作为中心，总的垂直（上和下）长度将代表这个百分比。这同样适用于总的水平（左和右）空间。

  1. border-collapse: collapse;

border-spacing

两个单元格之间空间的大小

  1. border-spacing: 0;

img标签

图片，后面默认带一个src，src一般接一个图片地址，可以是相对路径、绝对路径、网络地址。

作用

发出一个get请求，请求到了之后展示一张图片

属性

  1. alt

如果这个图加载失败了就显示alt里的字来提示用户

  1. <img src="tj51.jpg" alt="不知道什么歌的封面" />
  1. height

只写高度宽度会自适应

  • 永远不要让图片变形
  1. width

只写宽度高度会自适应

  • 永远不要让图片变形
  1. src

图片地址

事件

监听图片是否加载成功，加载成功调用onload，加载失败调用onerror

  1. onload
  2. onerror
  1. <script>
  2.       xxx.onload = function () {
  3.         console.log("图片加载成功");
  4.       };
  5.       xxx.onerror = function () {
  6.         console.log("图片加载失败");
  7.       };
  8.     </script>

有这两个事件，就可以在图片加载失败的时候进行挽救 首先制作一个挽救的图，然后把图拖进去后改名为404，如果加载失败了就调用404

  1. <script>
  2.       xxx.onload = function () {
  3.         console.log("图片加载成功");
  4.       };
  5.       xxx.onerror = function () {
  6.         console.log("图片加载失败");
  7.         xxx.src = "/404.png";
  8.       };

响应式

图片最大宽度百分之百，就是响应式的了，

  1.  max-width: 100%;

可替换元素

可替换元素“%3Ehttps://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element%3C/a%3E)

form标签

表单 里面一般有输入框和提交按钮 form里面必须有一个 type=”submit”的按钮，如果不写，比如用button默认它就是submit；如果写别的，这个按钮就不能提交这个表单。

作用

发get或post请求，然后刷新页面

属性

  1. action
  • 默认给一个action，就像img里的src,就是问你往哪里发请求
  • action里写什么，就会发送请求到那个页面
  1.     <form action="/xxx">
  2.       <input type="text" />
  3.       <input type="submit" />
  4.     </form>
  1. method

控制是用GET方式还是POST方式

  1. <form action="/yyy" method="POST">
  2.       <input type="text" />
  3.       <input type="submit" />
  4.     </form>
  1. autocomplete

自动填充

  1.     <form action="/yyy" method="POST" autocomplete="on">
  2.       <input name="username" type="text" />
  3.       <input type="submit" />
  4.     </form>
  1. target

告诉浏览器我要提交到哪一个页面，哪一个页面应该刷新

事件

如果写了一个，那么浏览器会根据你当前使用的语言自动的变成你能看懂的字。

  1. <input type="submit" value="点一下" />

用button也可以刷新页面提交 他们的区别是，input里面不能有其他标签只能是纯文本，button里还可以有标签、图片。

  1. <button type="submit">
  2.         <strong>点一下</strong>
  3.       </button>

input标签

作用

让用户输入内容

属性

  1. 类型 type：
  • button
  • checkbox（多选，要是是一个name）
  • email
  • file （选择文件，默认只能选一个，选择几个文件要加multiple）
  • hidden（看不见的输入，这种不是给人输入的，而是给JS填字符串或id的）
  • number
  • password（不展示具体内容)
  • radio（单选，要让两个radio是一个name)
  • submit
  • tel
  • text
  • color（颜色）
  1. 其他 ：name / autofocus / checked / disabled / maxlength / pattern / value / placeholder

事件

  1. onchange

当用户输入改变的时候触发

  1. onfocis

当用户把鼠标集中到它身上时触发

  1. onblur

当用户把鼠标移出它身上时触发

验证器

HTML5 新增功能

  • required
  1. <input type="text" required />

其他输入标签

标签

  1. select+option
  1. <select>
  2.         <option value="1">星期一</option>
  3.         <option value="2">星期二</option>
  4.       </select>
  1. textarea（右下角可以拖动，可以用css固定）
  1. <textarea style="resize: none;"> </textarea>
  1. label

注意事项

  • 一般不监听input的click事件
  • form里面的input要有name
  • from里要放一个type=sunmit才能触发submit事件

其他标签

标签

  • video 视频
  • audio 音频
  • canvas 画画
  • svg 可缩放矢量图形

注意事项

  • 这些标签的兼容性一定要查看文档

其他

1.不要双击打开页面，如果这样打开，和普通用户打开页面就是不一样的，可能会出现问题。

  • 如果直接打开就是以文件形式打开，这个时候再找绝对路径的文件就会去硬盘的根目录去找。
  • 可以先安装yarn global add http-server，然后hs . -c-1
  • 或者先安装yarn global add parcel，然后parcel [文件]
  1. lang既可以写成zh-Hans也可以写成zh-CN；
  • Hans是用汉语来表示；
  • CN是用国家来表示；

3.用gender表示性别