HTML常用标签

准备工作：

• 英语小课堂
  hyper：超级
  target：目标
  reference：引用
  frame：边框、框架
  entrance：入口
  load：加载
  canvas：画布
• 永远不要双击打开html！
• 正确步骤
  法一：
  1.新建终端、2.输入yarn global add http-server下载插件（下载过的可省略这步）、3.输入http-server -c-1(可简写hs -c-1)得到地址，随便访问一个、4.在地址后面输入路径（如：//192.168.3.4:800/a-href.html)
  法二：
  新建终端，输入yarn global add parcel 安装parcel ，然后输入parcel a-href.html，直接得到一个地址，点击即可打开。

a标签的用法

• 属性：
  href：hyper（超级）+refer（引用）=超级链接
  百度
  效果是在当前页面打开链接。
  target：可以指定在哪个窗口（页面）打开链接
  百度
  代码效果是，在空白页（新标签页）打开链接
  download：功能是下载网页，但是很多浏览器不支持（了解即可）
  百度
  rel=noopener：为了防止一个Bug
• 作用：

1. 跳转到外部页面
2. 跳转到内部锚点（指定标签）
3. 跳转到邮箱或电话

a的href取值

• 网址：
  https://baidu·com
  http://baidu.com
  //baidu.com(这是一个无协议的网址，它会自动选择http或者https，推荐网址这样写）
  路径：绝对路径/a/b/c.html，如果双击打开c.html那么就是打开根目录下的c.html，就不能显示网页。如果开启了http-server，在哪开的服务哪里就是根目录，打开就是打开当前目录下的c.html。
  相对路径a/b/c，就是在当前目录下打开。
  百度和百度效果也是一样的
  ./意思就是在当前目录下查找。
• 伪协议：
  javascript:代码;
  JavaScript伪协议
  点击链接，就直接执行alert(1)这个javascript代码
  
  alert(1)执行效果
  
  

  ---

xxx
href后面不写东西，那么点击xxx页面就会刷新

假如你想写一个a标签，但又想让他什么也不做（失效）：
xxx
:;中间留空，点击xxx啥也不做。

• 小技巧：p{$}*30 +tab快速写出30个P标签
  如何跳转到内部锚点（指定标签）？
  ...
  

  10

  
  ...
  查看xxx
  在你要跳转到的标签里面加上id="xxx"，在a标签里写上href="#xxx"，点击即可跳转到指定标签。
• mailto邮箱
  ** 发邮件给自己**
  点击链接后，唤起发邮件页面
• tel：手机号
  打电话给自己
  点击链接后，唤起拨号界面

a的target取值

内置名字

1. _blank：
   百度
   作用：在空白页打开
2. _self：
   百度
   作用：在当前页面打开（默认值）
3. _top：
   百度
   作用：在最顶层的页面打开链接（最上面的窗口）
4. _parent：
   百度
   作用：在当前页面的上一层窗口打开链接

页面可以用iframe引用另一个页面

编辑a-target.html代码：

    百度
    

      
    
  

编辑a-target-iframe.html代码：

    我是iframe
    
  

编辑a-target-iframe-2.html代码：

    我是 iframe 2:
    

    这里有个a标签
    parent
  

点击parent，在上一层窗口打开链接。
因为百度的target是_top，所以点击百度则在顶层页面打开链接。

iframe标签

作用：内嵌窗口，较少使用。

• iframe的name：
  

window的name：
给链接命名后，在开发者界面输入window.name后可以得到当前页面的名称

iframe与target联用，可以做一个哔哩哔哩/百度切换的页面
方法一（分两个窗口）：

方法二（一个窗口）：

table标签（表格）

table只有（头部）标签、（身体）标签、（脚部）标签，三个标签。

标签，tr=table row(行)：表格里的行
标签，th=table heading：表格里的表头
标签，tr=table data：表格里的数据
这三种标签只能写在、、三个标签里
例：

  
    
    
    
  
  
    

      

        

          

          
小红
          
小明
          
小曾
        
      
      

        

          
数学
          
61
          
91
          
85
        
        

          
语文
          
61
          
91
          
85
        
        

          
英语
          
61
          
91
          
85
        
      
      

        

          
总分
          
200
          
200
          
200
        
      
    
  

左上侧为表头的成绩表.png

• table-layout:auto/fixed:
  layout(布局)

auto布局.png

fixed布局 .png

• boder-spacing:x;
  x可以是任意值， spacing(间隔)
  作用：定义表格之间的间隔

给表格加边框大小为1px，颜色为红色
设置表格间隔为10px

表格加边界设置样式.png

style一般加在head里面，head一般用来放些看不见的东西

表格边界效果.png

• boder-collapse：
  border-collapse:collapse;
  作用：合并边界，一般用来合并表格间隙。
  
  合并边界代码.png

边界合并.png

img标签(图片)

作用：发送一个get请求，展示一张图片

• src属性：

src=source(来源)，src可以是绝对路径/相对路径
alt=alternative可代替的

get请求.png

• alt属性：

图片加载失败，提示alt“一只狗”，报错404

404报错.png

• width/height属性：
  给图片加个宽度，只写宽度的话高度会自适应；
  同理，只写高度，宽度自适应。
  
  
  既写宽度又写高，图片会变形。
  永远不能让图片变形！
• onload/onerror事件：
  dog图片加载成功时，提示加载成功；
  dog图片加载失败，显示备用404图片，提示404图片加载成功。
  这种做法可以优化用户体验。

  
    
    
    
  
  
     //这里dog1是故意写错
    
  

404备用图片效果.png

• 响应式max-width:100%
  在head里面加上style标签
  效果：让图片随着页面大小的改变而改变

模型.png

响应式效果.png

form标签

作用：发送get或post请求，然后刷新页面。

• 属性action
  action作用与img的src一样，后面跟路径。

 
    
    //action后面跟路径
      
      
    
  

action里面写什么，点击后就会请求到哪个页面

• method属性
  method是控制用get还是post来请求的

    
  
//可以通过改变action里面的内容来改变请求的页面，可以把/yyy变成/xxx
      
      
    
  

method.png

• autocomplete属性
  显示用户表单操作，其中autocomplete="on/off"可以是on打开也可以off关闭

• target属性

target告诉浏览器我要提交到哪个页面，哪个页面需要刷新，效果是点击提交，因为target设置blank在新标签打开，所以点击提交会打开一个新的标签。
target属性和标签里的target值是一样的，也是控制在哪个地方打开新的网页。

input标签

作用：让用户输入内容

• button和submit类型
  设置输入框提交按钮样式，有两种方法，一种是加value，一种是设置button按钮，二者皆可。

    

      
      
      搞起
    

两个按钮.png

value和button的区别:
button里面可以用标签，比如加粗标签，甚至还能加图片
value则不行，只能加纯文本

    
    

      
      
      
        搞起
        
      
    
  

区别.png

• type类型

效果为文本框

在后面加required为文本框必须填写内容，否则提交不了。

color颜色，效果为颜色框，可以自己选择颜色。

密码框，输入内容为小圆点，看不见输入内容

出现小圆点可点击选择

出现两个小圆点可以同时选择
男女

两个选项二选一怎么操作？同时给两个input命名就只能选择一个了。

男
女

方形选框：

方形选框多选，但是浏览器不知道这几个选项是一组的：

唱 跳
rap 篮球

要想让四个选项成为一组数据，就给他们命名：

唱
跳
rap
篮球

上传电脑文件（只能上传一个）：

选择文件.png

上传电脑文件（上传多个）：

hidden:
用来给JS输入一些看不见的东西。。。比如ID、字符串啥的

形成一个可以显示填写多行的文本，右下角可拖动调整大小

加上resize:none就不能调整大小了

还可以设置固定的高度、宽度，设置成固定的大小以供用户填写，这种设置比较常见：

形成一个长方形的可选框：value是真正的值，"星期一"是给用户看的内容

     -可选择-
     星期一
     星期二
     星期三
     星期四

本文为本人的原创文章，著作权归本人和饥人谷所有，转载务必注明来源