HTML5基础

最新推荐文章于 2024-10-11 19:03:40 发布

快乐就好ya

最新推荐文章于 2024-10-11 19:03:40 发布

阅读量1k

点赞数 14

分类专栏： HTML 文章标签：前端 html5 css3

本文链接：https://blog.csdn.net/m0_63233901/article/details/142046234

版权

HTML 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

HTML + CSS（超文本标记语言——HyperText Markup Language）

现在用的版本为html5加css3

html弱类型语言

万维网联盟W3C

HTML文件后缀名 html，htm

HTML

标签（元素，节点）: 开标签关标签内容 <br/>

属性 : 属性名="属性值" name="张三"

字符集编码

HTML标签：

<h1>~<h6>:标题标签（没有h7标签，只有这么多）

<p>:段落标签（这也是块标签，独占一行）

<br/>：强制换行

<strong>:字体加粗（字体只加粗，不会变大）

<em>:字体倾斜

<hr/>水平线（独占一行）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2>人物简介</h2>
		<strong>李清照</strong>（<em>1084年3月13日—1155年5月12日</em>） ，宋代女词人,号易安居<br/>
		士， 婉约词派代表，有“千古第一才女”之称。早期生活优裕，金兵入<br/>
		据中原时，流寓南方，境遇孤苦。所作词，前期<br />
		多写其悠闲生活， 后期多悲叹身世， 情调伤感。形式上善用白描手法，自辟途径， 语言清丽。<br />
		论词强调协律，崇尚典雅，提出词“别是一家”之说，反对对作诗文之<br />
		法作词， 留有诗集《易安居士文集》、《易安词》等。<br />
		<hr/>
		&copy;北大青鸟版权所有
	</body>
</html>

<img/> 图片标签

属性： src alt title width height

src：绝对路径，相对路径（相对路径前面没有反斜杠，绝对路径前面有反斜杠）

路径还分为外部路径和内部路径，带有http的是外部路径

alt: 路径错误提示（在路径加载出错时才会显示）

title：鼠标悬浮提示（常用于一下显示不出来内容，悬停方便看整体内容）

width：图片宽度像素（px）像素

<a  href="detail.html"  target="_blank">
    <img src="image/img1.png" alt="姑娘，欢迎降落在这残酷的世界"
           title="姑娘，欢迎降落在这残酷的世界" />
</a>

_blank为在新窗口打开默认的是_self也就是覆盖原有窗口进行打开

链接标签

<a href="path" target="目标窗口位置">链接文本或图像</a>

常用的超链接包含页面间链接，锚链接，功能性链接

从甲位置可以跳到乙位置，可以从页面之间跳，也可以页面里面跳

功能性链接一般用不到<a href="mailto:bdqnWebmaster@bdqn.cn">联系我们</a>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>仿京东快速购物导航</title>
		<style>
			p{
			  position: fixed;
			  right: 5%;
			  top: 50%;
			  font-size: 40px;
			}
		</style>
	</head>
	<body>
		<a name="f1"> <img src="img/联想截图_20240403134415.png"height="900"width="1600"/></a>
	    <a name="f2"> <img src="img/联想截图_20240403134436.png"height="900"width="1600"/></a>
	    <a name="f3"> <img src="img/联想截图_20240403134448.png"height="900"width="1600"/></a>
		<a name="f4"> <img src="img/联想截图_20240403134458.png"height="900"width="1600"/></a>
      <p>
        <a href="#f1">F1</a>
        <br/>
        <a href="#f2">F2</a>
        <br/>
        <a href="#f3">F3</a>
        <br/>
        <a href="#f4">F4</a>
      </p>   
	</body>
</html>