第一章 HTML5基础

最新推荐文章于 2024-08-23 06:12:23 发布

Tuerlechat，

最新推荐文章于 2024-08-23 06:12:23 发布

阅读量66

点赞数

分类专栏： # HTML+CSS3

本文链接：https://blog.csdn.net/weixin_55452293/article/details/126234472

版权

HTML5 网页结构标签语法图像链接锚点链接

关键词由CSDN通过智能技术生成

HTML+CSS3 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第一章 HTML5基础

HTML(超文本标记语言)

HTML网页基本结构

<!DOCTYPE html><!--DOCTYPE声明：告诉浏览器使用什么规范-->
<html>
	<head><!--网页头部-->

		<meta charset="utf-8" /><!--网页字符编码-->
  		<meta name="keywords" content="关键词1，关键词2" />
		<meta name="description" content="标题下内容描述（搜索时）" />
 
		<title></title><!--<title>标签：显示页面标题-->
  
	</head>
  	<body><!--主体部分-->
	</body>
</html>

标题标签

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
  <h6>H6</h6>

段落标签

<p></p>

换行标签

<br/>

水平线标签

<hr/>

字体样式标签

<strong></strong><!--加粗-->
<em></em><!--斜体-->

注释和特殊符号

特殊符号字符实体
空格 &nbsp ;
大于号（>） &gt ;
小于号（<) &lt ;
引号（“） &quot ;
版权符号@ &copy ;

特殊符号	字符实体
空格	&nbsp ;
大于号（>）	&gt ;
小于号（<)	&lt ;
引号（“）	&quot ;
版权符号@	&copy ;

图像标签

<img src="path" alt="text" title="text"  width="x"  height="y" />
src – 图像地址
alt – 图像的替代文字（图片不能正常显示时）
title – 鼠标悬停提示文字
width – 图像宽度
height – 图像高度

链接标签

<a href="path" target="目标窗口位置（打开方式）">链接文本或图像</a>
href – 链接路径
target – 打开方式

（常用值：_ self – 默认，在现有的窗口中打开新页面，原窗口将被覆盖。
  			_ blank --  在新的窗口中打开新页面。)

锚链接

实例：当前页面锚链接

	<!-- 设置图片名称 -->
<a name="f0"><img src="img/img1.png"/></a>
	<a name="f1"><img src="img/img2.png" /></a>
	<a name="f2"><img src="img/img3.png" /></a>
	<a name="f3"><img src="img/img4.png" /></a>
  	<a name="f4"><img src="img/img5.png" /></a>
	<!-- 锚链接跳至特定图片位置处 -->
 	<p>
	<a href="#f0">首页</a><br/>
  	<a href="#f1">F1</a><br/>
	<a href="#f2">F2</a><br/>
  	<a href="#f3">F3</a><br/>
	<a href="#f4">F4</a>
	</p>

跨页面锚链接

<p> <!-- 跳转到上面的页面特定位置 -->
	<a href="jdgw1.html#f0">首页</a> <!-- 格式为：跳转页面路径#图片name名称 -->
	<a href="jdgw1.html#f1">F1</a>
	<a href="jdgw1.html#f2">F2</a>
	<a href="jdgw1.html#f3">F3</a>
  	<a href="jdgw1.html#f4">F4</a>
</p>