📌  相关文章
📜  编程 - Html (1)

📅  最后修改于: 2023-12-03 15:11:42.368000             🧑  作者: Mango

编程 - HTML

HTML全称为“超文本标记语言”(Hypertext Markup Language)，是用来描述网页的标记语言。HTML文档由一系列的HTML标签(tag)组成，标签通常成对出现，分别有开始标签和结束标签。

HTML基础

HTML基础知识包括标签、元素、属性、注释、文本等概念，以下是HTML最基础的代码片段：

<!DOCTYPE html>
<html>
<head>
	<title>网页标题</title>
</head>
<body>
	<h1>一级标题</h1>
	<p>这是一段文本。</p>
	<img src="图片地址" alt="图片描述">
</body>
</html>

其中：

  • <!DOCTYPE html>声明当前文档是HTML5文档。
  • <html>元素是整个HTML文档的根元素。
  • <head>元素是文档头部，包含了一些元数据，如标题、字符编码等。
  • <title>元素为文档定义一个标题，显示在浏览器的标题栏上。
  • <body>元素是文档的主体部分，包含了网页中大部分的内容。
  • <h1>元素是一级标题。
  • <p>元素是段落。
  • <img>元素用来显示图片，src属性为图片地址，alt属性为图片描述，当图片无法显示时会显示该描述。

此外还有众多HTML标签，如链接、列表、表格等，可以根据需求进行了解。

HTML进阶

HTML进阶方向包括语义化、表单、多媒体、元素属性等知识。以下是部分HTML进阶的代码片段：

语义化

语义化HTML是指通过使用含义明确、语义正确的标签来编写HTML文档，使得文档结构清晰，便于阅读和维护。

<header>
	<h1>网页标题</h1>
	<nav>
		<ul>
			<li><a href="#">导航1</a></li>
			<li><a href="#">导航2</a></li>
			<li><a href="#">导航3</a></li>
		</ul>
	</nav>
</header>
<main>
	<article>
		<h2>文章标题</h2>
		<p>文章内容</p>
	</article>
</main>
<footer>
	<p>版权信息</p>
</footer>

其中：

  • <header>元素表示网页头部，通常包含网页的标题、导航等。
  • <nav>元素表示导航。
  • <ul>和<li>元素表示列表。
  • <main>元素表示页面的主要内容。
  • <article>元素表示内容区块，如新闻、博客文章等。
  • <footer>元素表示网页尾部，通常包含版权信息等。
表单

表单用于收集用户数据，包括输入框、下拉框、单选框、复选框等。

<form>
	<label for="name">姓名：</label>
	<input type="text" id="name" name="name" required><br>
	<label for="email">邮箱：</label>
	<input type="email" id="email" name="email" required><br>
	<label>性别：</label>
	<input type="radio" id="male" name="gender" value="male" required>
	<label for="male">男</label>
	<input type="radio" id="female" name="gender" value="female" required>
	<label for="female">女</label><br>
	<label for="color">喜欢的颜色：</label>
	<select id="color" name="color" required>
		<option value="">请选择颜色</option>
		<option value="red">红色</option>
		<option value="green">绿色</option>
		<option value="blue">蓝色</option>
	</select><br>
	<label for="comment">留言：</label>
	<textarea id="comment" name="comment"></textarea><br>
	<input type="submit" value="提交">
</form>

其中：

  • <form>元素表示一个表单，用于包含表单中的元素。
  • <label>元素用于关联表单中的元素，for属性与元素的id属性对应。
  • <input>元素用于接收用户输入，type属性表示输入框类型，如text表示文本输入框，radio表示单选框等。
  • <select>元素用于显示下拉框，option元素表示下拉框的选项。
  • <textarea>元素用于显示多行文本框。
  • <input type="submit">表示提交按钮。
多媒体

HTML可以嵌入多媒体文件，如音频、视频等。

<audio controls>
	<source src="音频地址" type="audio/mpeg">
</audio>

<video controls>
	<source src="视频地址" type="video/mp4">
</video>

其中：

  • <audio>元素用于嵌入音频文件，controls属性表示显示音频控件。
  • <source>元素表示音频文件来源，src属性为音频地址，type属性为音频类型。
  • <video>元素用于嵌入视频文件，controls属性表示显示视频控件。
  • <source>元素表示视频文件来源，src属性为视频地址，type属性为视频类型。
元素属性

HTML元素可以使用属性来控制元素的行为和样式。

<h1 class="title" id="main-title">网页标题</h1>
<p style="color: red;">这是一段红色的文本。</p>
<a href="链接地址" target="_blank">链接</a>

其中：

  • class属性用于给元素定义类名，可以在样式表中使用。
  • id属性用于给元素定义唯一标识符。
  • style属性用于直接设置元素样式。
  • href属性用于指定链接地址，target属性用于指定链接在何处打开，如_blank表示在新标签页中打开链接。
总结

HTML是前端开发必不可少的技能之一，掌握HTML语法和常用标签可以帮助快速开发静态网页。掌握HTML语义化、表单、多媒体、元素属性等知识可以提高网页的质量和用户体验。