【HTML】---经常使用标签(1)

时间 2019-11-06

标签 HTML 经常使用标签栏目 HTML 繁體版

原文原文链接

Html经常使用标签(1)

从新整理学习下前端知识从Html标签开始。咱们先看HTML 骨架格式：css

<!DOCTYPE html>               <!--这句话就是告诉咱们使用哪一个html版本-->
<html>                         <!--表示建立一个html文档-->
    <head>                     <!--设置文档标题和其它在网页中不显示的信息-->
        <title>标题</title>     <!--让页面拥有一个属于本身的标题-->
    </head>
    <body>                     <!--元素包含文档的全部内容（好比文本、超连接、图像、表格和列表等等。）-->
        <p>雨点的名字</p>
   </body>
</html>

1）head能够存放的标签：title , meta , base , style , script , linkhtml

2）body能够存放的标签：p , h , a , b , u , i , s , em , del , ins , strong , img等等前端

1、head内标签

一、meta标签

概念 meta可提供有关页面的元信息（meta-information），好比针对搜索引擎和更新频度的描述和关键词。浏览器

1)、charset属性服务器

单独使用，设置文档字符及编码格式布局

<meta charset="UTF-8">

2）、name属性学习

需配合content属性使用，主要用于给搜索引擎提供必要信息字体

写法：<meta name="属性值" content="属性值详细内容">

重要属性值：
author 做者。声明网站做者，经常使用公司网址表示
keywords 网站关键字。多个关键字，用英文逗号分隔
description 网页描述。搜索引擎显示在title下的描述内容网站

示例搜索引擎

<!--charset属性-->
<meta charset="UTF-8">
<!--做者-->
<meta name="anthor" contet="雨点的名字" />
<!--网页关键字-->
<meta name="keywords" content="HTML5,网页，个人">
<!--网页描述-->
<meta name="description" content="个人网页" />

二、base 标签

base做用：他能够设置总体连接的打开状态。

<base target="_self"></base>     <!-- 表示该页面的全部超连接均在原窗口显示 -->
<base target="_blank"></base>    <!--  表示该页面的全部超连接均在新窗口显示 -->

head还有一些其它标签这里先先不写。

2、body内标签

一、排版标签

概念：排版标签主要和css搭配使用，显示网页结构的标签，是网页布局最经常使用的标签。

<h1></h1> <!-- 标题标签：分为h1到h6字体依次递减 -->
 <p></p>  <!-- 段落标签：默认状况下，文本在一个段落中会根据浏览器窗口的大小自动换行 -->
 <hr />   <!-- 水平线标签：是单标签。水平线将段落与段落之间隔开，使得文档结构清晰，井井有条。 -->
 <br />   <!-- 换行标签：是单标签。若是但愿某段文本强制换行显示，就须要使用换行标签。 -->
<div></div> <!-- div和span 是没有语义的 是咱们网页布局主要的2个盒子,它们做用主要是结合CSS改变页面样式。 -->
<span></span>

二、文本格式化标签

概念 : 在网页中，有时须要为文字设置粗体、斜体或下划线效果，这时就须要用到HTML中的文本格式化标签，使文字以特殊的方式显示。

<b></b>和<strong></strong> <!-- 文字加粗 推荐使用strong -->
    <i></i>和<em></em>         <!-- 文字斜体 推荐使用em -->
    <s></s>和<del></del>       <!-- 文字加删除线 推荐使用del -->
    <u></u>和<ins></ins>       <!-- 文字加下划线 推荐使用ins -->

b i s u 只有使用没有强调的意思 strong em del ins 语义更强烈

三、图像标签img

概念 HTML网页中任何元素的实现都要依靠HTML标签，要想在网页中显示图像就须要使用图像标签。

<img src="图像路径url" />  <!-- src属性用于指定图像文件的路径和文件名，他是img标签的必需属性。 -->

图片标签一些经常使用属性

属性	值	描述
src	topbottommiddleleftright	规定显示图像的 URL。
alt	Text	图像不能显示的的替代文本。
title	文本	定义图像的高度。
width	pixels%	设置图像的宽度。
height	pixels%	设置图像的高度。
border	数字	定义图像周围的边框
ismap	URL	将图像定义为服务器端图像映射。
longdesc	URL	指向包含长的图像描述文档的 URL。
usemap	URL	将图像定义为客户器端图像映射。

四、连接标签

1)实现连接跳转

基本语法格式以下：

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

href：用于指定连接目标的url地址，当为标签应用href属性时，它就具备了超连接的功能。

target：用于指定连接页面的打开方式，其取值有 _self 和 _blank 两种，其中 _self 为默认值，_blank为在新窗口中打开方式。

<a href="http://www.baidu.com" title="百度一下，你就知道" target="_self">百度</a>
<a href="http://www.163.com"  title="网易新闻" target="_blank">网易</a>

title属性设置当鼠标放到超连接上时显示的文字。

2)经过a标签实现锚点定位

概念 经过建立锚点连接，用户可以快速定位到目标内容。

建立锚点连接分为两步：

1.使用“a href=”#id名>“连接文本"</a>建立连接文本。
2.使用相应的id名标注跳转目标的位置。

示例

<!DOCTYPE html>
 <html>
      <head>
          <title>网页定位</title>
      </head>
      <body>
          <p id="top">这里是顶部</p>
          <p>原创做者：蜗牛</p>
          <p>原创做者：蜗牛</p>
         <a href="#top">返回顶部</a>
    </body>
 </html>

当点击 返回顶部，页面会定位在id=“top”标签的位置。这就是经过id属性定位，这里网页中放的东西不多，效果不明显。

3)经过a标签实现下载

注意能够实现点击连接自动下载文档，和压缩文件。

<!DOCTYPE html>
   <html>
      <head>
          <title>下载</title>
      </head>
      <body>
          <a  href="6用户注册项目.docx">点击下载文档</a>
          <a  href="2017-1-4Jquery.rar">点击下载压缩文件</a>
          <a  href="second .jpg">点击图片</a>
    </body>
 </html>

注意 上面不能实现下载图片，上面操做只会打开图片。想要实现图片的下载须要修改以下

<body>
    <a href="first.jpg" download="first.jpg">点击图片</a> <!--download实现图片下载功能-->
</body>

body内还有其它标签下篇补上。

你若是愿意有所做为，就必须善始善终。(1)