前端（一）

最新推荐文章于 2024-07-02 21:53:51 发布

Iris_hui

最新推荐文章于 2024-07-02 21:53:51 发布

阅读量87

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/Iris_hui/article/details/112899990

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了HTML的基本概念和学习方法，包括常用标签如段落、标题、列表、链接、图片等的使用，以及属性如id、class、alt等的含义。此外，还讲解了事件，如onkeypress、onclick等如何与JavaScript结合实现交互功能。通过本文，读者将对HTML有更深入的理解并能开始编写简单的网页。

摘要由CSDN通过智能技术生成

一、html是什么？

超文本标记语言

二、学习html

1.标签和属性

代码如下（示例）：

<p>段落标签</p>：用于段与段之间换行的
属性：align,定义段落中文本的水平方向的对齐
id：唯一名称
class:类名
属性值：left、right、center

<br/>:换行标签，单标签
<hr>:创建水平线

<h1></h1>---<h6></h6>:标题大小

<ul type="circle">:建立无序列表
	<li>列表项</li>
</ul>
属性：type
属性值：circle(空心)、disc(实心圆)、square(实心方块)

<a href="default.html">链接</a>:添加文字链接

<img loading="lazy" :
src="/images/logo.png"：添加图片位置
 width="258" height="39" />：图片的长宽
属性：alt 用来为图像定义一串预备的可替换的文本。在图片不显示的时候起作用。

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
<h2 style="background-color:red;">这是一个标题</h2>
<p style="font-family:arial;color:red;font-size:20px;"></p>：字体、颜色、字体大小

<head> 元素包含了所有的头部标签元素。
在<head>元素中可以添加在头部区域的元素标签为: 
<title>定义不同文档的标题
<style>：标签定义了HTML文档的样式文件引用地址
例：
<head>
<style type="text/css">
body {background-color:yellow}背景为黄色
p {color:blue}段落字体为黄色
</style>
</head>
<meta>:标签提供了元数据.元数据也不显示在页面上，
但会被浏览器解析。
例：
<meta name="keywords" ：为搜索引擎定义关键词
content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" ：为网页定义描述内容
content="免费 Web & 编程 教程">
<meta name="author" ：定义网页作者
content="Runoob">
<meta http-equiv="refresh" ：每30秒钟刷新当前页面
content="30">
<link>:定义了文档与外部资源之间的关系。
 通常用于链接到样式表
<script>：用于加载脚本文件
<base>：标签描述了基本的链接地址/链接目标，
该标签作为HTML文档中所有的链接标签的默认链接

<button type="button">点我!</button>：新建按钮

2.事件

<input type="text" onkeypress="displayResult()">:
键盘被按下时运行脚本
<button onclick="copyText()">复制文本</button>：
点击按钮运行脚本
<img onmouseover="bigImg(this)" src="smiley.gif"
 alt="Smiley">：当鼠标放到图片上会运行脚本