Html常用标签(1)

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

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

1)head可以存放的标签:title , meta , base , style , script , link

2)body可以存放的标签:p , h , a , b , u , i , s , em , del , ins , strong , img等等

一、head内标签

1、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="我的网页" />

2、base 标签

base作用:他可以设置整体链接的打开状态。

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

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

二、body内标签

1、排版标签

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

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

2、文本格式化标签

概念 : 在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到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 语义更强烈

3、图像标签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 将图像定义为客户器端图像映射。

4、链接标签

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)

【HTML】---常用标签(1)的更多相关文章

  1. HTML常用标签

    HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...

  2. html常用标签介绍

    常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...

  3. HTML常用标签总结

    HTML 的常用标签总结 <font size="字体大小1-7" color="red或0xff00ff" face="字体类型(楷体等)&q ...

  4. html新增一些常用标签

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. [刘阳Java]_MyBatis_映射文件的常用标签总结_第5讲

    MyBatis中常用标签的总结,简单给出自己的总结 MyBatis映射文件中的标签使用介绍1.<select>:用于编写查询语句用的标签 id:表示当前<select>标签的唯 ...

  6. CSS常用标签

    CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...

  7. HTML基础(一)——一般标签、常用标签和表格

    第一部分  HTML <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...

  8. HTML-学习笔记(常用标签)

    本篇博客讲一讲HTML中的标签 HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.<h1> 定义最大的标题.<h6> ...

  9. 帝国CMS文章随机调用等一些常用标签

    1.帝国CMS文章随机调用等一些常用标签 [e:loop={'news',10,18,0,'newstime>UNIX_TIMESTAMP()-86400*7','onclick desc'}] ...

  10. 9月5日网页基础知识 通用标签、属性(body属性、路径、格式控制) 通用标签(有序列表、无序列表、常用标签)(补)

    网页基础知识 一.HTML语言 HTML语言翻译汉语为超文本标记语言. 二.网页的分类 1.静态页面:在静态页面中修改网页内容实际上就是修改网页原代码,不能从后台操作,数据来只能来源于原于代码.静态网 ...

随机推荐

  1. Linux远程目录挂载

    原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/ad99ab1d-1 ...

  2. 用故事说透 HTTPS

    本文来自素燕公众号,原文地址:用故事说透 HTTPS 故事中的主演:小华今年上大一,这是她第一次离开父母,独自一人到北京上学.今天妈妈的生日,想了想要给妈妈一个祝福,便给妈妈发了条消息:妈妈收到这条消 ...

  3. 高版本Visual Studio和低版本ArcGIS共存 工具箱没有控件的解决方法

    转载请声明.博客园/B站/CSDN/知乎/小专栏 @秋意正寒 欢迎访问小专栏,更多WebGIS开发(Cesium等)经验分享:https://xiaozhuanlan.com/gishome 众所周知 ...

  4. 如何在windows下安装linux双系统

    首先是看这篇博客,讲得很详细,但是有一点小小的区别,这里把整个过程回顾一下. https://www.cnblogs.com/masbay/p/10745170.html 第一步,刻盘,将一个u盘刻录 ...

  5. Win32 API编程——前言

    一丶什么是Win32 API? 微软为了保护操作系统的安全性和稳定性,把系统分为内核层和用户层(内核层的代码只能在当CPU的特权级为R0状态下执行,用户层的代码在CPU特权级为R0和R3都能执行),w ...

  6. 双向bfs, A*以及其他搜索算法

    总结 例题 万圣节后的早晨

  7. 一泡尿的时间,快速读懂QUIC协议

    1.TCP协议到底怎么了? 现时的互联网应用中,Web平台(准确地说是基于HTTP及其延伸协议的客户端/服务器应用)的数据传输都基于 TCP 协议. 但TCP 协议在创建连接之前需要进行三次握手(如下 ...

  8. 【HTML】--- 列表、表格、form表单标签

    Html常用标签(2) 上篇博客讲了些常用的html标签 :[HTML]---常用标签(1) 这里主要讲 列表.表格标签和 form表单标签. 一.列表.表格标签 1.列表标签 概念 把内容以列表的形 ...

  9. CEF编译 执行gn args out\Release_GN_x86异常

    gn args out\Debug_GN_x86 用来配置编译参数,执行gn args out\Release_GN_x86时异常: Toolchain is out of date. Run &qu ...

  10. python3读取图像并可视化的方法(PIL/Pillow、opencv/cv2)

    原图: 使用TensorFlow做图像处理的时候,会对图像进行一些可视化的操作.下面,就来列举一些我知道的图像读取并可视化的方法. 1. Pillow模块 1.1 Pillow模块的前生 Pillow ...