HTML基础入门语法（一）
今天站长给大家写一些html基础入门的语法，学会html就可以在自己的网页中自定义一些小组件或者美化页面啦，以下操作均在VS code中实现
HTML第一章
一、基础操作
快速生成HTML结构：Shift + !
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
</body>
</html>
二、Head区域标签
1. meta标签
<meta charset="UTF-8"> <!-- 中文编码 -->
<meta name="keywords" content="示例关键词"> <!-- 搜索关键词 -->2. title标签
<title>网页标题</title>3. link标签
<link rel="stylesheet" href="style.css">
三、Body内容标签
1. 标题与段落
<h1>一级标题</h1> <!-- h1到h6标题 -->
<p>段落内容 带空格</p>2. 超链接
<a href="https://www.baidu.com">跳转百度</a>3. CSS样式
<head>
<style>
.fornt {
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<p class="fornt">样式文字</p>
</body>
四、自闭合标签
1. 常用标签
<hr> <!-- 分割线 -->
<img src="demo.jpg" alt="图片说明">
<input type="text">2. 属性说明
| 标签 | 属性 | 说明 |
|---|---|---|
<img> |
src, alt | 图片路径和替代文本 |
<input> |
type, placeholder | 输入类型和提示文字 |
五、Input类型对照表
| 类型 | 描述 | 键盘类型 |
|---|---|---|
text |
文本输入 | 全键盘 |
password |
密码输入 | 全键盘 |
email |
邮箱验证 | 带@符号键盘 |
date |
日期选择 | 日期选择器 |
六、代码注释
<!-- 单行注释 -->
<!--
多行注释
支持换行格式
-->快捷键：Ctrl + / 或 Cmd + /
七、完整示例
综合示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>示例页面</title>
<style>
.special {
color: red;
}
</style>
</head>
<body>
<h1>欢迎</h1>
<hr>
<p class="special">红色文字</p>
<input type="email" placeholder="输入邮箱">
</body>
</html>图片示例
<!DOCTYPE html>
<html lang="zh-CN">
<body>
<img src="images/sample.png" alt="示例图">
</body>
注意：
- 避免嵌套注释
<!-- <!-- 错误示例 --> --> - 建议使用相对路径
src="../images/demo.jpg"
阅读剩余
版权声明：
作者：夏木
链接：https://xmosai.com/archives/63
文章版权归作者所有，未经允许请勿转载。
THE END
