HTML常用标签

2018-07-11 本文已影响2人长鲸向南

HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它通常描述并定义了一个网页的内容和基本布局。我们先来看一下HTML合规范的基本结构：

<!DOCTYPE html>  <!-- 声明文档类型是html5 -->  
<html>  <!-- 根元素 --> 
   <head>  
       <meta charset="UTF-8">    <!-- 这个元素设置文档使用utf-8字符集编码 -->     
       <title>Document</title>    <!-- 设置页面标题，出现在浏览器标签上 -->     
  </head>
  <body>    
  </body>
</html>

常用标签

1 . 标题标签

<h1></h1>  , <h2></h2> , <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>

分别是六级标题的样式

image

2. 段落标签

<p></p> paragraph 段落标签

顾名思义，这是一个定义段落的标签，是一个块级元素。

<p>这是一个段落</p>

3. div span 标签

这两个标签没有实际语义，我们可以把他们看做盒子，通常用来网页布局

<div>我是块级元素</div>
<span>我是行内元素</span>

4. em和strong标签

strong和em（emphasis)语义都是强调，在HTML5中，strong这个元素强调内容非常重要！(strong importance for its contents) 对比于html4仅是一个简单的强调，语义更加加重了。

Em标签(Emphasis)用于改变一个句子的意思(比如"我<em>喜欢</em>胡萝卜" 和"我喜欢<em>胡萝卜</em>"，分别强调喜欢和胡萝卜), Strong用来对一个句子的部分增加重要性(比如 "警告! 这非常危险。") Strong和Emphasis都可以分别通过嵌套来增加相对重要性或强调重点。

em标签的显示方式是内容倾斜，strong标签的显示方式则是加粗。

相对的同样也有无语义的，仅仅是物理状态的倾斜<i></i>和加粗<b></b>

image

5. img标签

HTML Image 元素（ <img> ）代表文档中的一个图像。

<img src ="" alt = "">

src属性是用于指定图像文件的路径和文件名，是img的必要属性。

alt属性定义了描述图像的替换文本。即图片加载不出来或出现错误的时候，我们将看到这个显示。

img标签是一个空标签，没有内容，没有结束标签。

img标签是一个可替换标签，它的展现不由css控制，是外观渲染独立于css的外部对象。

6. iframe标签

①嵌套一个网页进去

image

如图所示，我们的页面上就会多一个窗口链接到我们输入的地址的网页

frameborder是iframe的边框，非常丑，我们默认不要他吧

②name属性和a标签一起用

比如我们给iframe一个name，然后a标签的target等于这个name，我们就可以使a标签所跳转的页面在当前页面iframe的窗口打开了。

image

这样我们无论是点击qq还是百度，都可以在当前窗口打开了

7. a标签（HTTP GET请求）

anchor的缩写，<a> 元素 (或锚元素) 可以创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。

<a href ="http://qq.com" target="_blank">

①href属性是必需属性，定义一个超文本链接来源

1.1 注意：我们如果输入//qq.com,这是一个无协议相对地址，那么当前什么协议，就是什么协议，所以我们打开会是file://qq.com,但是我们不常用file协议，容易出错，那我们如何预览我们的index.html呢？

1.1.1上传到github,用github 预览功能

1.1.2 npm i -g http-server 下载这个小工具

每次运行的时候

http-server . -c -1

这样我们尽管<a href ="//qq.com">QQ</a>,是无协议相对地址，但由于当前已经在http协议下，我们就可以http协议访问了

image

1.2 注意：当href="#" 时不是GET请求，因为锚点定位，只是当前页面的跳转

可以使用href="#top"或者href="#"链接返回到页面顶部。

1.3.1 想要点击a标签，执行一段 javascript 代码

<a href="javascript:alert(1)"></a>

1.3.2 伪协议可以实现「点击之后没有任何动作的 a 标签」，满足这种奇葩需求

<a href="javascript:;"></a>

②target属性

target=_blank 新窗口打开
target=_self 默认，在自己当前页面打开
target=_parent 在父页面打开
target=_top 在最上层页面打开结合iframe理解即可

③download属性

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

此属性指示浏览器下载URL而不是导航到URL，因此将提示用户将其保存为本地文件。

注意：如果HTTP的Content-Disposition：存在,并且赋予了一个和这个属性不同的文件名，HTTP会优先于此属性。

8. form标签（HTTP POST请求）

form标签与a标签一样，是发起了页面跳转，但是两者的区别是，form标签发起的是post请求，而a标签是get请求。

①form标签中必须要有提交按钮

image

②form是用来发送post请求，常见于我们登录时，比如我们上图就是一个登陆的界面，那我们提交后，看看是不是发送了post的请求呢？

image

确实是post请求，这里要注意，不要忘记method=post,否则提交上去还是get.

③我们提交的内容，如果使用GET，他会默认的放在查询参数里，如图：

image

我的name和密码都被默认为查询参数了，那如果是post呢？

image

post会把参数默认的放在请求的第四部分，还记得我们之前讲到请求的第四部分是什么吗，是我们上传的数据，忘了就回去复习一下~指路here

④form也有target属性，与a 标签用法一致_{就不再赘述了}

9. input 标签

用法很多，详细的去查MDN文档~

①type属性值为text, 单行字段；换行会将自动从输入的值中移除。

type属性值为password，顾名思义，密码，一个值被遮盖的单行文本字段。

image

②type属性为radio 单选框，但必须命名到一组

image

③ type属性为checkbox 复选框也要name到一组

image

这个命名在提交的时候就是下图模式了：

image

④button

button很有意思，如果没有type属性，也没有submit，比如

<button>button</button>

那么此时的button会自动升级成提交按钮，而如果

<input type="button" value="button">
<button type="button">按钮</button>

这两种情况下，button只是普通按钮。

10. label标签

常用于把label和表单元素绑定在一起，比如用label把用户名和输入框连在一起，那么当我们点击用户名时，输入框就会获得输入焦点

<label>用户名<input type="text"></label>

11. select

select是一个表单控件，我们可以通俗的叫他下拉菜单，菜单下跟着<option>选项

image

如图，disabled意思为不可选，即第三组不可选择

selected意思为默认被选择项，如图上自动选择在第四组上

multiple意思为可以选择多个选项，看下图~

image

我已经选择了二四五组，但是第三组由于disabled，不可选~

12. table 标签

image

很多人会不知道 colgroup ，它可以用来给 table 列表加宽度等属性，如图可清楚的看到这一状态
thead tbody tfoot 三个标签可以省略，但是加上的话会使语义更完整，既是顺序发生变化也浏览器也可以根据这三个标签还原成员列表。
border-collapse可以合并两个相邻的边框线，使中间没有空隙，更加美观一点。

欢迎指错~我要困死了emmmmm

HTML常用标签

猜你喜欢

热点阅读