一、HTML简介
HTML(HyperText Markup Language),即超文本标记语言,是用来描述网页的一种标准标记语言。HTML是网页开发的基础,它定义了网页的结构和内容。通过使用各种标签(tags)来标记普通文本,使得文本具有多种含义,如段落、标题、表格和链接等。这些标签不仅描述了页面元素的显示方式,还有助于搜索引擎理解页面内容,提高网页的可访问性。
二、HTML的构成要素
- 文本:设置字体、颜色、大小、加粗、斜体、下划线等,与Word类似
- 图片:设置边框、大小、位置
- 超链接:图片、文本等均可以添加超链接
- 表格:展示行列构成的结构化数据,可以为表格设置大小、背景等,表格里面可以放所有元素。
- 表单:文本框、下拉框、单选框、复选框、按钮、文本域等。
- 多媒体:音频、视频、H5游戏等。
三、HTML元素的基本使用
-
标题标签:使用
<h1>
到<h6>
来定义标题,其中<h1>
表示最重要的标题,通常用于页面的主要内容标题,而<h6>
则用于最不重要的子标题><h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3>
-
段落和换行标签:
p>
标签用于定义段落,将整页内容划分为若干逻辑段落。浏览器会自动为每个段落的前后添加适当的空行<p>这是一个段落。</p> <p>这是另一个段落。<br/>这是新的一行。</p>
-
文本格式化标签:加粗文本可以使用
<strong>
或<b>
标签,其中<strong>
表示更强烈的强调意味;倾斜文本则使用<em>
或<i>
标签。另外,删除线可以通过<del>
或<s>
标签来实现,下划线则可以使用<ins>
或<u>
标签<strong>加粗文本</strong> <em>倾斜文本</em> <del>删除线文本</del> <ins>下划线文本</ins>
-
图像标签:使用
<img>
标签可以嵌入图像,通过src
属性指定图像的路径,alt
属性提供图像无法加载时的替代文本,而title
属性则用于添加鼠标悬停时显示的文本。还可以通过width
和height
属性指定图片的宽和高,以及使用border
属性设置图片边框的粗细<img src="image.jpg" alt="替代文本" title="鼠标悬停文本" width="200" height="150">
-
超链接标签:超链接使用
<a>
标签定义,其href
属性指明链接的目标地址。若要在新窗口中打开链接,可以将target
属性设置为_blank
。超链接可以包含文本或图像,点击后会跳转到指定的URL地址<a href="https://www.example.com">点击访问示例网站</a> <a href="download.pdf" target="_blank">下载PDF文件</a>
-
容器标签:
<div>
是一个大的容器标签,常用于布局和样式的应用,相当于一个大盒子。通常一个网页由多个<div>
组成,每个<div>
可以包含其他标签或元素。而<span>
则是一个较小的容器,主要用于对文本的一部分进行样式应用,而不打断文本的结构<div style="background-color: lightblue; padding: 10px;"> <span style="color: red;">红色文字</span> <span style="font-weight: bold;">粗体文字</span> </div>
-
列表标签:
<ul>标签定义了一个无序列表,通常用项目符号(如圆点)表示每个列表项。
<li>标签定义了列表中的单个项目
<ol>标签定义了一个有序列表,通常用数字或字母顺序表示每个列表项。
<li>标签同样用于定义列表中的单个项目。<ul> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ul> <ol> <li>步骤1</li> <li>步骤2</li> <li>步骤3</li> </ol>
-
表格标签:
<table>标签定义了一个表格,它是所有表格元素的容器。
<tr>标签定义了表格中的一行。
<td>标签定义了表格中的单元格,用于存放数据。<table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr> </table>
-
表单标签:
<form>标签定义了一个表单,它是所有表单元素的容器。
action属性指定了表单数据提交的目标URL。
method属性指定了提交数据的HTTP方法,通常是"get"或"post"。<form action="submit.php" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name"> <input type="submit" value="提交"> </form>
-
输入标签:
type="text"表示文本框类型。
name属性为输入字段指定一个名称,用于在服务器端识别该字段的值。
placeholder属性提供了输入字段的占位符提示
type="password"表示密码框类型。
type="radio"表示单选按钮类型。<input type="text" placeholder="输入文本"> <input type="password" name="password"> <input type="checkbox" name="option1"> <input type="radio" name="gender" value="male"> <input type="submit" value="提交"> <input type="button" value="按钮"> <input type="reset" value="重置"> <input type="file" name="file">
-
选择标签:
<select>标签定义了一个下拉选择框。
<option>标签定义了选择框中的选项。
value属性指定了选项的实际值,当表单提交时,选中的选项的值将被发送到服务器<select name="options"> <option value="option1">选项1</option> <option value="option2">选项2</option> </select>
-
音频和视频标签:
<video>标签定义了一个视频播放器。
width和height属性定义了视频播放器的尺寸。
controls属性添加了播放、暂停和音量控制等控件。
<source>标签指定了视频文件的URL和MIME类型。
当浏览器不支持<video>标签时,会显示标签内的文本内容。<audio controls> <source src="audio.mp3" type="audio/mpeg"> 您的浏览器不支持音频元素。 </audio> <video width="320" height="240" controls> <source src="video.mp4" type="video/mp4"> 您的浏览器不支持视频元素。 </video>
每篇一言:停下脚步才注意到 世界被染得雪白。