前端基础 —— A / HTML

发布于:2025-09-13 ⋅ 阅读:(14) ⋅ 点赞:(0)

一、HTML 文件基本结构

html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>

html 标签是整个 html 文件的根标签(最顶层标签)

head 标签中写页面的属性.

body 标签中写的是页面上显示的内容

title 标签中写的是页面的标题.
 

快速生成代码框架:直接输入 ! , 按 tab 键, 此时能自动生成代码的主体框架.

<!DOCTYPE html>   <!--指定当前html 版本5--> 
<html lang="en">   <!--当前页面为英文--> 
<head>
    <meta charset="UTF-8">    <!--浏览器解码规则--> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--浏览器嘴干版本展示,移动端需要--> 
    <title>Document</title>
</head>
<body>
    这是内容
</body>
</html>

二、HTML 常见标签
 

2.1 注释标签:

<!-- 我是注释 -->

2.2 标题标签: h1-h6

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

2.3 段落标签: p

<p>这是一个段落</p>

2.4 换行标签: br

br 是一个单标签(不需要结束标签)
br 标签不像 p 标签那样带有一个很大的空隙.
<br/> 是规范写法. 不建议写成 <br>

这是一个换行<br/>

2.5 格式化标签

加粗: strong 标签 和 b 标签
倾斜: em 标签 和 i 标签
删除线: del 标签 和 s 标签
下划线: ins 标签 和 u 标签

<strong>strong 加粗</strong>
<b>b 加粗</b>

<em>倾斜</em>
<i>倾斜</i>

<del>删除线</del>
<s>删除线</s>

<ins>下划线</ins>
<u>下划线</u>

例:

2.6 图片标签: img

2.7 超链接标签: a

2.8 表格标签

2.9 列表标签

2.10 表单标签

form 标签

input 标签

label 标签

select 标签

textarea 标签

2.11  无语义标签: div & span

综合案例: 展示简历信息
 

综合案例: 填写简历信息
 

三、Emmet 快捷键
 

四、HTML 特殊字符