HTML标签

  1. 标签的作用
    所有HTML中标签的一个根节点。
  2. 基本构造标签
  1. head标签:
  • 作用:用于存放:title,meta,base,style,script,link标签
  • 注意:在head标签中我们必须要设置的标签是title
  1. title标签
  • 作用:让页面拥有一个属于自己的标题。
  1. body标签:
  • 作用:页面在的主体部分,用于存放所有的HTML标签:p,h,a,b,u,i,s,em,del,ins,strong,img
  1. HTML标签分类
    在HTML页面中,带有“< >”符号的元素被称为HTML标签,如上面提到的 <HTML>、<head>、<body>都是HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令,也称为HTML标签或 HTML元素
  1. 双标签
<标签名> 内容 </标签名>

*该语法中“<标签名>”表示该标签的作用开始,一般称为“开始标签(start tag)”,“</标签名>” 表示该标签的作用结束,一般称为“结束标签(end tag)”。和开始标签相比,结束标签只是在前面加了一个关闭符“/”。
2. 单标签
<标签名 />
单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。

  1. HTML标签关系
    标签的相互关系就分为两种:
  1. 嵌套关系
<head>  <title> </title>  </head>
倡议: 如果两个标签之间的关系是嵌套关系,子元素最好缩进一个tab键的身位。如果是并列关系,最好上下对齐。
  1. 并列关系
<head></head>
<body></body>
  1. 常见标签
  1. 等级标题标签
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>

标题标签语义: 作为标题使用,并且依据重要性递减。
标签基本语法格式:<hn> 标题文本 </hn> 注意: h1 标签因为重要,尽量少用,不要动不动就向你扔了一个h1。 一般h1 都是给logo使用。
2. 段落标签
在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落,而段落的标签就是< p>
<p> 文本 </p> 3. 水平线标签
在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,< hr />就是创建横跨网页水平线的标签。其基本语法格式如下:<hr /> 4. 换行标签
在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签<br />,这时如果还像在word中直接敲回车键换行就不起作用了。
5. div span 标签
div span 是没有语义的 ,是我们网页布局主要的2个盒子
div 就是 division 的缩写 分割,分区的意思 其实有很多div 来组合网页。
span, 跨度,跨距;范围
<div> 这是头部 </div> <span>今日价格</span> 6. 文本格式化标签
在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。

标签

显示效果

< b> </ b> < strong>< /strong>

字体加粗

< i>< /i> < em> < /em>

文字为斜体

< s> < /s> < del>< /del>

文字加删除线

< u>< /u> < ins> < /ins>

文字加下划线

b i s u 只有使用没有强调的意思, strong em del ins 语义更强烈
7. 标签属性
属性就是特性 比如 手机的颜色 手机的尺寸 ,总结就是手机的。
使用HTML制作网页时,如果想让HTML标签提供更多的信息,可以使用HTML标签的属性加以设置。其基本语法格式如下:<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名> 在上面的语法中,

  1. 标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
  2. 属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
  3. 任何标签的属性都有默认值,省略该属性则取默认值。
    采取 键值对 的格式 key=“value” 的格式

8.图像标签img
HTML网页中任何元素的实现都要依靠HTML标签,要想在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签< img />以及和他相关的属性。其基本语法格式如下:<img src="图像URL" /> 该语法中src属性用于指定图像文件的路径和文件名,他是img标签的必需属性。
9. 链接标签
在HTML中创建超链接非常简单,只需用标签环绕需要被链接的对象即可,其基本语法格式如下:`文本或图像href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。 Hypertext Reference的缩写。意思是超文本引用

target:用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,_blank为在新窗口中打开方式。
注意:

  1. 外部链接 需要添加 http:// www.baidu.com
  2. 内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
  3. 如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href="#"),表示该链接暂时为一个空链接。
  4. 不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

10 . 锚点定位
通过创建锚点链接,用户能够快速定位到目标内容。
创建锚点链接分为两步:

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

11 .base标签
base 可以设置整体链接的打开状态
base 写到 < head> < /head> 之间
12 .注释标签
在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。其基本语法格式如下:<!-- 注释语句 --> 注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。