1. <img>
(图像标签)
作用: 在网页中插入图片。
常用属性:
src
: 指定图片的 URL (路径)。这是 必须的 属性。alt
: 当图片无法显示时,显示的替代文本。 强烈建议添加,为了可访问性和 SEO。width
: 设置图片的宽度。(尽量用 CSS 控制样式)height
: 设置图片的高度。(尽量用 CSS 控制样式)
示例:
<img src="images/my-image.jpg" alt="一张日落的照片" width="500" height="300">
2. <h1>
- <h6>
(标题标签)
作用: 定义不同级别的标题。
<h1>
是最高级别的标题,<h6>
是最低级别的标题。重要性:
<h1>
应该用于页面上的主要标题,每个页面应该只有一个<h1>
。 标题标签对 SEO 也很重要。示例:
<h1>这是一个主要的标题</h1> <h2>这是一个二级标题</h2> <h3>这是一个三级标题</h3>
3. <hr>
(水平线标签)
作用: 创建一个水平分割线,用于分隔内容。
用法: 一个空标签,没有闭合标签。
示例:
<p>这是分割线之前的内容。</p> <hr> <p>这是分割线之后的内容。</p>
4. <a>
(链接标签)
作用: 创建一个超链接,链接到其他页面、文件、位置或 URL。
常用属性:
href
: 指定链接的目标 URL。 这是 必须的 属性。target
: 指定在何处打开链接。 常用的值有_blank
(在新标签页或窗口中打开) 和_self
(在当前页面打开,默认值)。
示例:
<a href="https://www.example.com" target="_blank">访问 Example 网站</a> <a href="about.html">关于我们</a> <a href="mailto:me@example.com">发送邮件给我</a>
5. <video>
(视频标签)
作用: 在网页中嵌入视频。
常用属性:
src
: 指定视频的 URL。 虽然可以,但通常不用这个属性,而是用<source>
子标签。controls
: 显示视频播放控件 (播放/暂停按钮, 音量控制等)。 通常需要添加。width
: 视频的宽度。(尽量用 CSS 控制样式)height
: 视频的高度。(尽量用 CSS 控制样式)autoplay
: 视频自动播放。(不推荐,用户体验不好)loop
: 视频循环播放。muted
: 静音播放。
使用
<source>
标签: 为了兼容不同的浏览器,可以使用多个<source>
标签指定不同格式的视频文件。示例:
<video width="640" height="360" controls> <source src="videos/my-video.mp4" type="video/mp4"> <source src="videos/my-video.webm" type="video/webm"> 您的浏览器不支持 video 标签。 </video>
6. <audio>
(音频标签)
作用: 在网页中嵌入音频。
常用属性: 与
<video>
类似,包括src
,controls
,autoplay
,loop
,muted
。使用
<source>
标签: 为了兼容不同的浏览器,可以使用多个<source>
标签指定不同格式的音频文件。示例:
<audio controls> <source src="audio/my-audio.mp3" type="audio/mpeg"> <source src="audio/my-audio.ogg" type="audio/ogg"> 您的浏览器不支持 audio 标签。 </audio>
7. <p>
(段落标签)
作用: 定义一个段落。
用法: 用于组织文本内容。 浏览器会自动在段落前后添加一些空白。
示例:
<p>这是一个段落。 这是段落中的一些文本。</p> <p>这是另一个段落。 它可以包含更多的文本。</p>
8. <b>
(粗体标签)
作用: 将文本设置为粗体。
注意:
<b>
标签仅仅是为了样式上的呈现,不表示强调。 如果想要强调文本,应该使用<strong>
标签。示例:
<p>这是一段包含 <b>粗体</b> 文本的段落。</p>
9. <strong>
(强调标签)
作用: 将文本设置为粗体,并且表示强调。 这对屏幕阅读器和其他辅助技术很重要。
语义:
<strong>
表示文本的重要性或严肃性。示例:
<p><strong>警告!</strong> 这是一个非常重要的信息。</p>
10. <div>
(division 标签)
作用: 定义一个文档中的区块 (division) 或区域。 它是一个通用的容器,用于组织和分组 HTML 元素。
用法: 通常与 CSS 一起使用,用于布局和样式化网页。
特点:
<div>
是一个块级元素,会占据一整行。示例:
<div class="header"> <h1>网站标题</h1> <p>网站的描述。</p> </div> <div class="content"> <h2>文章标题</h2> <p>文章内容...</p> </div>
11. <span>
(span 标签)
作用: 一个内联的容器,用于包裹一小段文本或其他内联元素。
用法: 通常与 CSS 一起使用,用于样式化文本的特定部分。
特点:
<span>
是一个内联元素,不会换行。示例:
<p>这是一段文字,其中 <span class="highlight">一部分</span> 需要突出显示。</p>
12. <table>
、<tr>
、<td>
(表格标签)
<table>
: 定义一个表格。<tr>
: 定义表格中的一行 (table row)。<td>
: 定义表格中的一个单元格 (table data cell)。其他常用的表格标签:
<th>
(table header cell): 定义表头单元格。<caption>
: 定义表格的标题。
示例:
<table> <caption>学生成绩表</caption> <tr> <th>姓名</th> <th>科目</th> <th>分数</th> </tr> <tr> <td>张三</td> <td>语文</td> <td>80</td> </tr> <tr> <td>李四</td> <td>数学</td> <td>90</td> </tr> </table>
13. <form>
(表单标签)
作用: 创建一个 HTML 表单,用于收集用户输入的数据。
常用属性:
action
: 指定表单数据提交到的 URL。method
: 指定提交表单数据的 HTTP 方法 (GET 或 POST)。POST
更常用,因为它更安全。
表单元素:
<form>
标签内部可以包含各种表单元素,例如:<input>
: 用于创建文本框、密码框、单选按钮、复选框等。<textarea>
: 用于创建多行文本输入框。<select>
: 用于创建下拉列表。<button>
: 用于创建按钮。<label>
: 为表单元素添加标签,提高可访问性。
示例:
<form action="/submit-form" method="post"> <label for="name">姓名:</label><br> <input type="text" id="name" name="name"><br><br> <label for="email">邮箱:</label><br> <input type="email" id="email" name="email"><br><br> <input type="submit" value="提交"> </form>