跟我进一步学习HTML

never_abandon
140 阅读3分钟

一丶HTML5中新增加了哪些特性

  1. 新增选择器 document.querySelector、document.querySelectorAll
  2. 拖拽释放(Drag and drop) API
  3. 媒体播放的 video 和 audio
  4. 本地存储 localStorage 和 sessionStorage
  5. 离线应用 manifest
  6. 桌面通知 Notifications
  7. 语意化标签 article、footer、header、nav、section
  8. 增强表单控件 calendar、date、time、email、url、search
  9. 地理位置 Geolocation
  10. 绘画 canvas 以上列出的内容并不代表全部新特性,仅为博主认为重要的部分特性

二丶了解HTML常用的标签

本文会给出a标签丶iframe标签丶table标签丶img标签丶input标签丶textarea标签丶select标签的基本使用方式进行学习和参考

a标签

a标签的基本语法如下

<a href="">看到没我就是a </a>

这就是a标签可能你认为它比较简单,但是使用的方式却有多种样式,以下将从属性进行逐步分析

属性1: href中可以写入不同的内容

<a href="https://baidu.com">点我就去百度了</a> <!-- 点击该文字将会跳转至百度页面-->
<a href="a/b/c.html">点我就去找c文件了</a> <!-- 点击该文字会跳到本地文件夹a中的b文件夹下的c.html文件-->
<a href="javascript:;">我不动</a> <!-- 点击该文字页面不会发生任何的跳转以及刷新-->
<a href="emailto:ilovehtml@163.com;">给我发邮件吧</a> <!-- 点击该文字页面会跳转到发送邮件的页面-->
<a href="tel:1865533xxxx;">给我发邮件吧</a> <!-- 点击该文字页面会通过软件或者其他方式给该号码进行电话拨打-->

以上只是简单的对href进行说明 但是还有很多的高级用法在此就不详细介绍,可以去MDN网站进行查询

属性2:target属性

<a href="https://baidu.com" target="_blank">点我就去百度了</a> <!-- 在新标签打开该页面-->
<a href="a/b/c.html" target="_self">点我就去找c文件了</a> <!-- 在当前页面打开该页面-->
<a href="javascript:;"  target="_top">我不动</a> <!-- 在顶部窗口打开,主要应对iframe使用-->
<a href="emailto:ilovehtml@163.com;"  target="_parent">给我发邮件吧</a> <!-- 在父级窗口打开-->

iframe标签

对于该标签,由于不是特别建议使用,仅简单的介绍使用方式.

<iframe src="https://www.baidu.com" width="800px" height="800px" frameborder="0"></iframe>

将会在当前自己的网页展示百度的页面,意思是将百度的页面内嵌入自己的网页中,如下图展示

table标签

基本的使用语法如下,这是一个表格形式的显示

<table>
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th></th>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tfoot>
</table>

thead代表的是表单的头部 tbody代表的是表单的内容 tfoot代表的是表单的底部

该代码中 tr代表的是行,th代表的是表头它的样式会有加粗的形式展示,td是普通的数据展示

当里面未写thead,tbody,tfoot,会自动加入到tbody内,标签和写入的顺序无关,即使你将tfoot放在table的最开头也是当做底部进行展示 其中有几个样式的标签为:

table-layout: auto 根据内容的多少自动计算表格占得大小 fixed 自动平均显示表格的大小

table-collapse: collapse 将表格自动合并 否则将会比较丑

table-spacing: 0 表示表格之间的间距为0

一般情况下重置样式最好设置table-collapse,table-spacing 两个属性

img标签

这是一个图片的标签,需要通过src来引入图片 基本代码如下

<img src="" alt="" width="800">

作用:展示图片,发出get请求

常用属性有:width,height,alt,title width,height显而易见设置宽高

alt是当图片无法显示时给用户一个文字提示,提升用户体验

title是当鼠标悬浮到图片时出现图片描述

想做到图片响应式很简单只需给img加上下面的属性即可

max-width: 100%

input标签

input 的基本使用语法如下

<input type="text">

type可以更改不同的类型

  <input type="text"> <!-- 表示是文本框 -->
  <input type="color"> <!-- 表示是颜色选择 -->
  <input type="password"> <!-- 表示是密码显示框输入只会显示*****-->
  <input type="radio"> <!-- 表示是一个单选按钮 -->
  <input type="checkbox"> <!-- 表示是多选按钮 -->
  <input type="file"> <!-- 表示是上传文件 只有加了multiple才能多选文件 -->

textarea标签

会出现一个文本框进行多行输入,基本使用语法如下:

<textarea name="" style="resize: none;"></textarea> <!-- 出现一个多行输入框 允许更改大小 加上style: resize:none不允许更改 -->

select标签

是一个多选框的标签,基本使用语法如下

  <select name="veg" id="">
    <option  name="veg">--请选择爱吃的水果--</option>
    <option  name="veg">菠萝</option>
    <option  name="veg">葡萄</option>
    <option  name="veg">草莓</option>
  </select>

该标签需要配合option一起使用

三丶结束语

本篇文章到此就结束了,只是简单的介绍了部分实用的HTML标签,其中还有很多的奥妙之处等你去学习,记得持续学习,不断跟进!加油!

avatar
文章
阅读
粉丝