HTML重点标签总结

本文的目的通过重点标签的学习前进

一、 iframe 的学习

iframe通俗的的理解就是,可以在页面里面嵌套新的页面
它的使用会使页面变卡,一般会有一个固定的尺寸,默认的。他也属于可替换元素行列。我们可以通过CSS来改变尺寸
frameborder消除边框
name属性与a标签结合

<!-- <iframe name=iframe src="http://qq.com" ></iframe> -->

<iframe name="000" src="" ></iframe>
<a target="000" href="http://qq.com">aaaa</a>

a标签的链接会在iframe的内嵌窗口里面打开

二、a标签的学习

a标签四种常见的target

       <a href="http://qq.com" target="_blank">topQQ</a> //在新的页面打开链接
        <a href="http://qq.com" target="_self">topQQ</a> //在当前窗口打开链接
        <a href="http://qq.com" target="_parent">parentQQ</a> //在父级
        <a href="http://qq.com" target="_top">topQQ</a> // 在顶级
        

a标签可以设置download属性,使其不打开链接。而是下载当前页面的HTML。
也可以把你当前目录下的文件下载

 <a href="http://qq.com" download>下载</a>
 <a href="222/分配的ip地址.xls" download>下载文件</a>

a标签会自动添加当前页面的协议。例如以下例子,如果不写http协议,会根据当前页面的协议自动加上,如果当前页面是http协议(通过下面的http-server模拟),那么就打开qq.com,如果只是本地的HTML,那么协议时file协议,不会下载

<a href="//qq.com" download>下载</a>
<a href="//qq.com" download>下载</a>

a标签会在地址栏后加上锚点,即#开始的那串字符串

<a href="#kkkk" download>下载文件</a>

a标签会在地址栏后加上?name=wushao

一定要记得a标签可以发起get请求

<a href="?name=wushao" download>下载文件</a>

a标签可以使用伪协议,这是历史遗留问题,以前的前端想在a标签里面直接打开js代码。现在常用于一些奇葩需求。
如果,你不想这个a标签,有任何动作,无法点击,就用伪协议。

<a href="javaScript:;" target="_top">topQQ</a> //无法操作了
<a href="javaScript:alert(1);" target="_top">topQQ</a>

反之如果你只是加锚点,那么会定位到开始位置。
如果你href=" ",那么会刷新页面。
综上所述,如果你对a标签什么也不想做,就用伪协议,详见MDN 的a标签

无障碍建议

锚点标签常常通过将 href 属性设置为 "#""javascript:void(0)" 来创造一个能阻止页面刷新的伪按钮的方式被滥用。 这些属性值会在拖动 / 复制链接时导致意外行为,在新窗口 / 新标签打开链接,加入书签以及 JavaScript 仍在下载时会出现错误或被禁用。这也会向辅助技术(如屏幕阅读器)传达不正确的语义。在这些情况下,推荐使用 <button>来代替。通常情况下,您应该只将锚点用于正常的 URL 导航。

那么就有三种写法了

  • href="javaScript:;"
  • href="javaScript:void(0);"
    或者直接 href="#"

小型服务器 npm i -g http-server
它会安装在npm目录下,把bin目录添加到~/.bashrc脚本配置文件里面,在文件的最后一行加上

export PATH="http-server的绝对路径:$PATH"

配置好path之后,就可以直接使用了。
在你想模拟http协议环境的时候,在那个目录下打开http-server就可以用了


三、form标签的学习

form a 标签最大的区别就是form标签是post提交,虽然你可以修改成get,但是没有人蛋疼的这么做。

  • 默认的get方法演示
<form action="users" >
        用户:<input type="text" name="name"><br>
        密码:<input type="text" name="password"><br>
        <!-- <input type="submit" value="提交"> -->
        <input type="button" name="button" value="button">
        <button type="submit">提交</button>
 </form>
form默认的get方法.png

以上是智障的写法,下面是优雅的写法

  • 注意form必须要用一个type=submit的input不然无法提交数据!!!!
<form action="users"  method="post">
        用户:<input type="text" name="name"><br>
        密码:<input type="text" name="password"><br>
        <input type="submit" value="提交">
        <input type="button" name="button" value="button">
 </form>
type是submit和button.png

form方法post的方法.png
  • 以前我们在请求里面只能看见前三个部分,有了form标签之后,终于能看到第四部分,form data啦


    post解析.png
  • 如果你的form表单里面没有一个type=submit的input,可以使用type=submit的button的标签,也可以使用<button >提交</button>
  <form action="users" >
        用户:<input type="text" name="name"><br>
        密码:<input type="text" name="password"><br>
        <!-- <input type="submit" value="提交"> -->
        <input type="button" name="button" value="button">
        <button type="submit">提交</button>
        //等价于 <button >提交</button>
    </form>

form表单有且只有两个方法,你不规定method那么就是get,你就是智障;所以你规定method="post",你不智障;如果你写了这两种之外的方法,那么还是按照get方法提交,你是智障中的战斗机。


四、input button标签的学习

  • input button 标签的最大区别就是input标签是空标签。
  • input 标签的type有很多种,后期我有接触到了type="file",还可以加上multiple,上传多文件。(12.28更新)
    而且input必须有name属性,因为你提交的数据要用,组成name=value。
<input id="POST-name" type="text" name="name"> //普通文本
<input id="POST-name" type="password" name="password"> //密码
<input id="POST-name" type="submit" value="提交"> //提交
<input id="POST-name" type="checkbox" name="name"> //复选框
<input id="POST-name" type="radio" name="name"> //单选框

  • 复选框和单选框的小练习
   <form action="users" method="post">
        用户:<input type="text" name="name"><br>
        密码:<input type="text" name="password"><br>
        <!-- <input type="submit" value="提交"> -->
        <input type="button" name="button" value="button">
        <button type="submit">提交</button>
        <br>
        <input id="love" type="checkbox" name="loveme"> <label for="love">爱我 </label>
        <input id="eat" type="checkbox" name="loveme"> <label for="eat">馒头 </label> 
        <input id="play" type="checkbox" name="loveme" checked> <label for="play">篮球 </label>
        <input id="apple" type="radio" name="name" checked="checked"><label for="apple">苹果 </label> 
        <input id="orange" type="radio" name="name"><label for="orange">橘子 </label>  
    </form>
checkbox和radio.png

checked="checked" 与 直接书写 checked 一样的效果

  • 注意以上的代码中,包含的 label标签,有时候我们为了人性化的需求,只要鼠标点中文字的一部分就算选中了,所以用 label标签的for属性与input的id属性关联。
<input id="play" type="checkbox" name="loveme" checked> <label for="play">篮球 </label>
  • 当然了,你身为一个老司机,应该这么写
<label ><input type="checkbox" name="loveme" checked> 篮球 </label>
  • 省了两个属性,简洁优雅。
    button标签也有很多type
<button name="button" type="button"> Click me </button> 
//仅表示按钮,没有任何作用.它可以有与元素事件相关的客户端脚本,当事件出现时可触发,与js结合使用
<button name="button" type="submit"> Click me </button>
//此按钮提交表单数据给服务器
  • input 也可以实现滑动的效果
<input type="range" name="" value="">
range.png

五、下拉框

<select>
      <option value="1">湖人</option>
      <option value="2" selected>凯尔特人人</option>
      <option value="3">马刺</option>
 </select>

凯尔特人人是默认勾选的

六、table标签的学习

table在古代用来做布局,现在基本不用了。
只有四个元素,thead、tbody、tfoot、colgroup。即使你不写tbody你也有这个标签,而且可以不止一个。thead里面有tr、th,tbody里面有tr、td,tfoot里面有tr、td,colgroup里面有col,用来控制列的宽度,基本不使用了。我现在维护的网页,用的table 布局,修改很麻烦

tr table row
th table header
td table data
<table>
  <thead>
    <tr>
      <th>Header content 1</th>
      <th>Header content 2</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Footer content 1</td>
      <td>Footer content 2</td>
    </tr>
  </tfoot>
  //即使写在这里。浏览器也会把他放到底部去
  <tbody>
    <tr>
      <td>Body content 1</td>
      <td>Body content 2</td>
    </tr>
  </tbody>
  //可以包含多个tbody

noscript标签表示如果用户禁用了js,就显示该标签里面的内容


七、空元素

就是里面不能有内容的标签

八、可替换标签

CSS 里,可替换元素(replaced element)的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有
<img> <object> <video> 和 表单元素,如<textarea> <input> 。 某些元素只在一些特殊情况下表现为可替换元素,例如<audio><canvas>
上面是MDN的原话,反正我看的云里雾里。用图片解释一下吧。

可替换元素.png

img标签的尺寸其实是由src决定的,但只是第三级的重要性,你可以用width修改,你也可以用CSS来修改。

九、全局属性

十、display不止三种

不仅仅有 none inline block inline-block 还有很多
常见的display默认的是block的有divp 、form 和HTML5中的新元素: header 、 footer 、 section。我们不需要特别关心display的,因为这个主要由CSS修改

li标签的样式可以改成实心原点,方形,也可以加上罗马数字

具体的细节可以查看MDN list sytle
具体的符号样式的设置可以看list-style-type
比如你想改成方形,就用list-style-type: type

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,168评论 1 41
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • 01. 从新世相发给我的纸质书《长恨歌》得知王安忆这个女作家,由于当时正处于考研备考期间,那本书我并没有认真读完,...
    开要心阅读 1,468评论 1 9
  • 一直看电视剧,却从来没有过将思考或者比较做成思维导图,正好这次要学习思维导图课程,就开始画一画。
    e安培阅读 146评论 0 0
  • 有人笑你是疯 有人说你是仙 我只是喜欢迎着大风转 看着被人踩过的天花板 疲劳下的用心体会 还有雨中的四月天 我喜欢...
    雨古阅读 285评论 0 0