前端基础之HTML-CSDN博客

本文链接：https://blog.csdn.net/m0_71987537/article/details/125399791

本文详细介绍了前端开发中的三大基石——HTML用于网页内容构建，CSS负责布局美化，JavaScript实现动态效果。通过实例解析了它们的基础标签和用法，如HTML的结构标签、CSS的表格和表单样式，以及JavaScript的表单交互元素。

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

1. 前端三剑客

在前端中HTML、CSS和JavaScript被称为前端三剑客。他们的主要作用如下

HTML：用来提供网页的主要内容。
CSS：用来处理网页的主体结构。
JavaScript：主要负责网页的特效。

2. HTML介绍

HTML又叫超文本标记语言。HTML是解释型语言，不是编译型语言。HTML页面由一对对的标签构成。

3. HTML基本标签（一）

我们直接使用代码来解释每个标签的作用。

<html>
	<head>
		<title>Hello World</title>
		<meta charset="utf-8">
	</head>
	<body>
		Hello World<br/>你好，HTML!
		<p>这是一个段落</p>
		<img src="imgs/图片.jpg" width=300 high=200 alt="海滩照片">
		<h1>标题</h1>
		班级学生
		<ol type="1" start="3">
			<li>张三</li>
			<li>李四</li>
			<li>王五</li>
		</ol>
		学生成绩
		<ul type="circle">
			<li>98</li>
			<li>89</li>
			<li>78</li>
		</ul>
		这次<b><i>成绩第一</i></b>的人是<br/>
		<u>张三</u>
		H<sub>2</sub>O和O<sup>2</sup>的分子质量大小比为：18&lt;32.
		<span>这是</span>不换行的块标记
		<a href="http://www.baidu.com" target="_blank">如果不知道水分子和氧分子的分子质量可以点这里</a>
	</body>
</html>

这是代码的运行结果

-------------------------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------------------------------

这里解释每个标签的作用。

在HTML中有两种标签，一种是成对标签，一种是单标签。成对标签的结束标签中的斜杠是放在前面的而但标签的斜杠是放在后面的。

html标签：表示网页的开始和结束。
head标签：表示网页的头部。（也就是在网页的最上面我们关闭某个网页的那个地方）
body标签：表示网页的主体。
title标签：表示头部的标题。（也就是头部显示的内容）
meta标签：可以用来设置网页运行时使用的字符集。
br标签：单标签。表示换行。
img标签：表示一个图片。里面有一个src属性表示图片的位置；width和hight属性表示图片的大小；alt属性表示鼠标移动到图片上面或者是没有找到该图片时显示的文字。
h1标签：表示标题。还有h2、h3等，最多到h6.
ol标签：表示一个有序列表。其中的type 属性表示排列顺序的表达方式，有a,A,i,I,和1五个值可选；start属性表示排序开始的位置。
ul标签：表示一个无序列表。其中的type属性表示每行前面的符号，有circle,disc,square三个值可选；
li标签：表示列表中的一个值。
b标签：表示加粗。
i标签：表示斜体。
u标签：表示下横线。
span标签：表示不换行的块标记。
a标签：表示超链接。其中的href属性表示链接位置；target属性表示打开方式，有四个值可选：_self 在当前界面打开；_blank 新窗口打开；_parent 父窗口打开；_top 顶层窗口打开。

4. HTML基本标签之表格（二）

<html>
	<head>
		<title>表格标签练习</title>
		<meta chrset="utf_8">
	</head
	<body>
		<table border="1" cellspacing="0" cellpadding="4" width="600">
			<tr align=center>
				<th>姓名</th>
				<th>学号</th>
				<th>成绩</th>
			</tr>
			<tr align="center">
				<td>张三</td>
				<td>3120</td>
				<td>89</td>
			</tr>
			<tr align="center">
				<td>李四</td>
				<td>3121</td>
				<td>76</td>
			</tr>
			<tr align="center">
				<td>王五</td>
				<td>3122</td>
				<td>88</td>
			</tr>
		</table>
	</body>
</html>

运行结果如下

--------------------------------------------------------------------------------------------------------------------------------

table标签：表示一个表格。其中border属性表示边界；width表示表格宽度；cellpadding表示表格的填充；cellspacing表示表格间距。
tr标签：表示一行。
th标签：表示表头列。
td标签：表示一列。其中tr、th、td标签都有以下属性：align 有三个值可选center、left、right；rowspan 行合并；colspan 列合并。

5. 基本标签之表单（三）

<html>
	<head>
		<title>表单学习</title>
		<meta charser="utf-8">
	</head>
	<body>
		<form action="code2.html" methods="post">
			姓名：<input type="text" name="name" value="请输入你的姓名"/><br/>
			密码：<input type="password" name="password"/><br/>
			性别：<input type="radio" name="sex" value="男"/>
				  <input type="radio" name="sex" value="女"/><br/>
			兴趣：<input type="checkbox" name="hobby" value="足球"/>
				  <input type="checkbox" name="hobby" value="跑步"/>
				  <input type="checkbox" name="hobby" value="篮球"/><br/>
			最擅长的科目：<select name="subjection">
								<option value="1">数学</option>
								<option value="2">语文</option>
								<option value="3">英语</option>
						  </select><br/>
			获奖经历：<textarea name="experience" rows="3" cols="9"></textarea><br/>
			<input type="submit" name="submit" value="注册"/>
			<input type="reset" name="reset" value="重置"/>
			<input type="button" name="button" value="按钮"/>
		</form>
	</body>
</html>

运行结果如下

--------------------------------------------------------------------------------------------------------------------------------

input标签：单标签，表示插入一个组件。其中type属性有如下值可选：text 文本框；password 密码框；radio 单选框；checkbox 复选框；submit 注册按钮；reset 重置按钮；button 普通按钮。name属性表示这个组件的ID，要求同一组单选框要是同一个ID，这样才能起到单选的作用。value属性表示这个组件的值。
select标签：表示插入一个下拉列表。其中name属性表示这个下拉列表的ID。
option标签：表示下拉列表的一个选项。value属性表示这个选项的值。
textarea标签：表示一个文本区。name属性表示组件ID；rows表示行数；cols表示列数。