30分钟从零开始入门拿下 HTML

ngioig

已于 2024-09-22 18:26:29 修改

阅读量1.3k

点赞数 13

文章标签： html 前端 java html5 程序人生面试学习方法

于 2024-08-27 15:45:31 首次发布

本文链接：https://blog.csdn.net/Y_1215/article/details/141604236

版权

🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇

⭐ HTML ⭐

🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇🎇

主要内容

认识HTML的基本结构,学习常⽤的HTML标签.

1.HTML基础

1.1什么是HTML

HTML(HyperTextMarkupLanguage),超⽂本标记语⾔.

超⽂本:⽐⽂本要强⼤.通过链接和交互式⽅式来组织和呈现信息的⽂本形式.不仅仅有⽂本,还可能包含图⽚,⾳频,或者⾃已经审阅过它的学者所加的评注、补充或脚注等等.

标记语⾔:由标签构成的语⾔ HTML的标签都是提前定义好的,使⽤不同的标签,表⽰不同的内容.

类似⻜书⽂档,Word⽂档

如果选中⽂本,点击标题1,就会使⽤标题1的样式来显⽰⽂本,上述标题1就是⼀个"标签"

如下⽅代码:

 <h1>我是⼀级标题</h1>
 <h2>我是⼆级标题</h2>
 <h3>我是三级标题</h3>

经过浏览器解析后的效果如下:

HTML 标签基础

HTML（HyperText Markup Language）是构建网页的标准语言。HTML 代码由“标签”构成，标签用尖括号 < > 包围，主要有以下几个特点：

成对标签：大部分标签成对出现，如 <h1>（开始标签）和 </h1>（结束标签），中间包含标签内容。
单标签：有些标签是单标签，只需要开始标签，如 <br />（换行）。
属性：开始标签中可能带有属性，如 id="myId"，用于设置标签的特定特性或唯一标识符。

HTML 文件基本结构

一个简单的 HTML 文件结构如下：

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

<html> 是根标签。
<head> 包含页面的元数据，如 <title> 用于设置页面标题。
<body> 包含页面上显示的内容。

标签层次结构

标签之间有父子关系和兄弟关系。例如：

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

<head> 和 <body> 是 <html> 的子标签。
<title> 是 <head> 的子标签。
<head> 和 <body> 是兄弟关系。

开发工具

虽然可以用系统自带的记事本编写 HTML，但使用专业开发工具会更方便。推荐使用 Visual Studio Code (VSCode)，它是一个跨平台的代码编辑器，支持多种编程语言，并且提供强大的功能和插件。

常见 HTML 标签

标题标签（`<h1>` 到 `<h6>`）

标题标签用于定义不同级别的标题，从 <h1> 到 <h6>，数字越大字体越小。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

段落标签（`<p>`）

<p> 标签定义一个段落。HTML 会自动在段落前后添加空白间距。

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

换行标签（`<br />`）

<br /> 标签用于在文本中插入换行。

这是第一行<br />
这是第二行<br />
这是第三行

图片标签（`<img>`）

<img> 标签用于插入图片，必须带有 src 属性指定图片路径。

<img src="rose.jpg" width="500" height="800" />

超链接标签（`<a>`）

<a> 标签用于创建链接，可以是内部链接或外部链接。href 属性指定链接的目标。

<a href="http://www.baidu.com" target="_blank">百度</a>

表格标签

表格由 <table> 标签创建，包含 <tr>（行）、<td>（单元格）、<thead>（表头）、<tbody>（表体）等标签。

<table border="1" cellpadding="10">
    <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>10</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>11</td>
        </tr>
    </tbody>
</table>

表单标签

表单用于用户输入数据，包含 <form>（表单域）和 <input>（输入控件）等标签。

<form action="submit.html">
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username" placeholder="请输入用户名" /><br />
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" placeholder="请输入密码" /><br />
    <input type="submit" value="提交" />
</form>

下拉菜单（`<select>`）

<select> 标签用于创建下拉菜单，<option> 标签定义菜单项。

<select>
    <option>北京</option>
    <option selected>上海</option>
</select>

文本区域（`<textarea>`）

<textarea> 标签用于创建多行文本输入框。

<textarea rows="4" cols="50">默认文本</textarea>

无语义标签（`<div>` 和 `<span>`）

<div> 用于分隔大块区域，通常是块级元素。
<span> 用于小范围内的内联元素。

<div>
    <span>这是一个 span 元素。</span>
    <span>这是另一个 span 元素。</span>
</div>

综合练习：用户注册页面

以下是一个简单的用户注册页面示例，包含了标题、表单和输入控件：

<!DOCTYPE html>
<html>
<head>
    <title>用户注册</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
    <h1>用户注册</h1>
    <form action="register.html">
        <table>
            <tr>
                <td>用户名:</td>
                <td><input type="text" placeholder="请输入用户名" /></td>
            </tr>
            <tr>
                <td>手机号码:</td>
                <td><input type="text" placeholder="请输入手机号码" /></td>
            </tr>
            <tr>
                <td>密码:</td>
                <td><input type="password" placeholder="请输入密码" /></td>
            </tr>
        </table>
        <input type="submit" value="注册" />
    </form>
    <p>已有账号? <a href="#">登录</a></p>
</body>
</html>