首页 > 其他分享 >HTML5基础

HTML5基础

时间:2024-09-09 09:22:51浏览次数:11  
标签:元素 标签 路径 基础 HTML HTML5 链接 属性

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 name="marker">乙位置</a>

<a href="#marker">甲位置</a>

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

功能性链接一般用不到<a href="mailto:[email protected]">联系我们</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>

特殊符号

&nbsp;:空格(可以用作两个距离大于一个空格的时候)

&lt;:小于号

&gt:大于号

&copy;:版本号

HTML注释:

<!--注释内容--> 快捷键:ctrl +/

行内元素和块元素

行内元素用内容撑开宽度(a strong em)

而块元素则独占一行(p h1-h6)

标签:元素,标签,路径,基础,HTML,HTML5,链接,属性
From: https://blog.csdn.net/m0_63233901/article/details/142046234

相关文章

  • 零基础快速上手HarmonyOS ArkTS开发5---从简单的页面开始2---使用List组件构建列表、G
    接着零基础快速上手HarmonyOSArkTS开发4---从简单的页面开始继续往下学习页面布局的知识。最近发现之前学习这一章节的内容在官方已经被下了,替换成了另外一个案例了(https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101717497398588123):而且整个视频的风格也......
  • 硬件基础知识和典型应用-关于STM32休眠唤醒引脚PA0使用说明(PA0问题,PA0一直连接高电
     说明PA0本身是下降沿唤醒,PA0在休眠时不能连接高电平,因为会导致休眠失败!所以在STM32使用PA0做中断唤醒时,学习到的教程全部是外部连接按键进行唤醒,平时PA0悬空,按键按一下PA0接到低电平,然后唤醒单片机; 如何解决(A0本身是下降沿唤醒,PA0在休眠时不能连接高电平,因......
  • 一,邂逅Python,搭建python环境,基础语法介绍:python注释,关键字,标识符,变量,数据类型
    学习:知识的初次邂逅复习:知识的温故知新练习:知识的实践应用目录一,本章知识简介1,本章主要的语法:二,邂逅Python1,什么是编程语言2,编程语言经历了哪些时代?3,学习Python有哪些优势呢?4.为什么要学习python呢?4,python的诞生与发展4.1,python的创始人是谁?4.2,什......
  • hadoop基础知识分享(一)
    Hadoop概述Hadoop是一个适合海量数据的分布式存储和分布式计算的平台。Hadoop的处理思想是“分而治之”。Hadoop主要包含三个核心组件:HDFS:分布式存储框架,适合海量数据存储MapReduce:分布式计算框架,适合海量数据计算YARN:资源调度平台,负责给计算框架分配计算资源Hadoop组......
  • 【C语言基础】函数与变量
    函数的分类:从定义角度分:库函数:随C语言编译器提供的。无须用户定义,只需在程序前包含含有该函数原型的头文件。自定义函数:用户自己定义的函数。从函数返回结果角度分:有返回值函数:函数在执行完需要返回一个值,这个值就是函数的值。无返回值函数:函数只执行任务,不返回任何值......
  • langchain基础(3)-chain
    1.LLMChain:一个链fromlangchain.chains.llmimportLLMChainfromlangchain_community.llms.openaiimportOpenAIfromlangchain.prompts.promptimportPromptTemplatellm=OpenAI(base_url="http://localhost:1234/v1",api_key="lm-studio")pr......
  • Java教程:入门基础【十万字详解】
    ✨博客主页:https://blog.csdn.net/m0_63815035?type=blog......
  • JAVA基础语法(一)
    1.功能的最小单元(1)功能的最小单位是一个一个方法。2.注释(1)单行注释格式://注释文字(2)多行注释格式:/*注释文字*/(3)被注释的文字不会被JVM解释执行,多行注释不能嵌套(4)由于编码问题导致编译失败(设置环境变量JAVA_TOOL_OPTLONS-Dfile.encoding=UTF-8)eg:3.字面量(1)e......
  • MySQL面试笔试题(基础题)
     1、取得每个部门最高薪水的人员的名称selectenamefromempe,(selectdeptno,max(sal)max_salfromempgroupbydeptno)each_dept_max_salwheree.deptno=each_dept_max_sal.deptnoande.sal=each_dept_max_sal.max_sal;2、哪些人的薪水在部门的平均薪水之上select......
  • 《动手学深度学习》笔记4——线性回归 + 基础优化算法
    李沐老师:线性回归是机器学习最基础的一个模型,也是我们理解之后所有深度学习模型的基础,所以我们从线性回归开始1.线性回归由于是案例引入,没有很难的知识点,咱直接贴上李沐老师的PPT:1.1线性模型--单层神经网络李沐老师:神经网络起源于神经科学,但现在深度学习的发展......