初识HTML

1. HTML基本结构

在 VSCode 中，输入！即可生成一个基本的HTML结构：

<!DOCTYPE html>
<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文件内容由 html 标签包裹，里面主要分为两部分 head 和 body；

head 标签里面的 title 标签内容表示网页的标题；

我们主要写 body 标签里面的内容；

2. 标题标签

标题标签用 h1 到 h6 表示，其中 h1 为一级标题，h6 为六级标题；

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

网页显示效果：

3. 段落标签

段落标签用 p 表示，和标题标签类似，只不过默认没有加粗；

段落里面的文本有一些样式：加粗、斜体、删除线、下划线；

<p>这是一个段落标签</p>
<p>更改文本样式：<b>字体加粗</b></p>
<p>更改文本样式：<strong>字体加粗</strong></p>
<p>
    更改文本样式：<i>斜体</i> | <u>下划线</u> | <s>删除线</s>
</p>

网页效果图：

4. 无序列表

无序列表先使用一个 ul 标签包裹，然后里面的每一条内容用 li 包裹；

<ul>
    <li>无序列表元素 1</li>
    <li>无序列表元素 2</li>
    <li>无序列表元素 3</li>
</ul>

网页效果图：

5. 有序列表

无序列表先使用一个 ol 标签包裹，然后里面的每一条内容用 li 包裹；

<ol>
    <li>有序列表元素 1</li>
    <li>有序列表元素 2</li>
    <li>有序列表元素 3</li>
</ol>

网页效果图：

6. 表格标签

表格标签的组成：

tr – table row – 表格行

td – table data – 列数据

th – table head – 列标题

在使用表格标签的时候，首先使用一个 table 标签包裹，这里可以添加表格属性，例如分隔线宽度；

然后里面使用 tr 标签表示表格的每一行；

tr 标签里面使用 th 或者 td 表示每一行中的各列数据或者标题；

<table border="1">
    <tr>
        <th>列标题 1</th>
        <th>列标题 2</th>
        <th>列标题 3</th>
    </tr>  

    <tr>
        <td>数据 1</td>
        <td>数据 2</td>
        <td>数据 3</td>
    </tr>

    <tr>
        <td>数据 4</td>
        <td>数据 5</td>
        <td>数据 6</td>
    </tr>

    <tr>
        <td>数据 7</td>
        <td>数据 8</td>
        <td>数据 9</td>
    </tr>
</table>

网页效果图：

8. 注释

直接使用快捷键 Ctrl + / 进行注释；

<!-- 表格标签 -->
<h3>表格标签的组成:</h3>
<p>tr -- table row -- 表格行</p>
<p>td -- table data -- 列数据</p>
<p>th -- table head -- 列标题</p>

9. 换行和水平分割线

换行使用 br 标签，注意这是一个单标签；

水平分割线使用 hr 标签，这也是一个单标签；

<h1>HTML 属性练习</h1>
<hr>
<a href="https://countingstars.com.cn">点击进入我的网站</a>
<br>
<br>
<a href="https://countingstars.com.cn" target="_blank">点击进入我的网站</a>

10. HTML属性

使用格式：<开始标签属性名 = ‘属性值’>

属性名称不区分大小写，但是属性值对大小写敏感；

适用于大多数 HTML 元素的属性：

属性	描述
class	为 HTML 元素定义一个或多个类名（类名从 CSS 样式文件引入）
id	定义元素唯一的 id
style	规定元素的行内样式

10.1 a 标签

常用于链接到其他的网页或者位置，有一个很重要的属性 href，可以是其他网页的 URL、文件路径、电子邮箱的地址、手机号等等；

如果 href 属性写一个 #，表示不跳转，但是显示链接效果，有点像函数里面的 pass；

a 标签还有一个 target 属性，表示新网页链接的打开方式；

<a href="https://countingstars.com.cn">点击进入我的网站</a>
<a href="#">点击进入我的网站</a>
<a href="https://countingstars.com.cn" target="_blank">点击进入我的网站</a>

10.2 img 标签

使用 img 标签可以在网页中嵌入图片，默认属性有 src 和 alt；

src 属性表示图片的路径或者 URL，如果图片在当前目录下，可以直接使用相对路径（图片的文件名）；

alt 属性表示图片的替代文本，如果图片无法加载，浏览器就会显示 alt 指定的文本；

width 属性可以设置图片宽度，height 属性可以设置图片高度；

<h2>img 标签练习</h2>
<img src="pic1.jpg" alt="该图片无法显示" width="450" height="300">
<br>
<img src="pic2.jpg" alt="该图片无法显示" width="450" height="300">
<br>
<img src="pic2.png" alt="该图片无法显示" width="450" height="300">
<br>
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.59bb747cef8837a58465b80950b2dbcf?rik=pxuVNa6jykSM%2fg&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn10121%2f156%2fw1024h1532%2f20181216%2fadc8-hqhtqsp0422526.jpg&ehk=zrMFzKEh%2fjtqPJhry78cI69ZPVgARECR0cB1n3uduS8%3d&risl=&pid=ImgRaw&r=0" alt="该图片无法显示"  width="450" height="700">

网页显示效果：

11. HTML区块

11.1 块元素 block

块级元素通常用于组织和布局页面的主要结构和内容；

例如：段落、标题、列表、表格等

它们用于创建页面的主要部分，将内容分隔为逻辑块；

常见的块级元素标签：

div
p
h1至h6
ul
ol
li
table
form

11.2 行内元素 inline

行内元素通常用于添加文本样式或为文本中的一部分应用样式；

它们通常可以在文本中插入小的元素，例如超链接等等；

特点：

行内元素通常在同一行内呈现，不会独占一行；
它们只占据其内容所需的宽度，而不是整行的宽度；
行内元素不能包含块级元素，但是可以包含其他行内元素；
常见的行内元素标签：
- span
- a
- strong
- em
- img
- br
- input

11.3 示例

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 区块</title>
</head>
<body>
    <!-- 导航栏 -->
    <!-- 输入 div.nav 快速生成 -->
    <div class="nav">
        <h3>导航栏</h3>
        <a href="#">链接 1</a>
        <a href="#">链接 2</a>
        <a href="#">链接 3</a>
        <a href="#">链接 4</a>
        <a href="#">链接 5</a>
        <a href="#">链接 6</a>
        <hr>
    </div>

    <!-- 主要内容 -->
    <!-- 输入 div.content 快速生成 -->
    <div class="content">
        <h3>文章标题</h3>
        <p>文章内容 1</p>
        <p>文章内容 2</p>
        <p>文章内容 3</p>
        <p>图片内容 1</p>
        <img src="pic4.jpeg" alt="图片无法加载" width="450" height="320">
        <p>图片内容 2</p>
        <img src="草神.jpg" alt="图片无法加载" width="450" height="300">
        <hr>
    </div>

    <span>这是第一个span标签</span>
    <br>
    <span>这是第二个span标签</span>
    <br>
    <span>这是第三个span标签</span>
    <br>
    <span>点击跳转 <a href="#">链接</a></span>
    <hr>

    <!-- 页尾 -->
    <div class="end">
        <span>点击进入我的网站 <a href="http://www.countingstars.com.cn/">链接</a></span>
        <h4>By CountingStars</h4>
    </div>
</body>
</html>

网页显示效果：

12. HTML表单

表单的标签：

form 标签，表单的容器，类似于有序列表的容器为 ol 标签，表格的容器为 table 标签；

input 标签，表单里面的输入，他有一个很重要的属性 type，表示输入内容的类型；

12.1 type=“text”

input 标签还可以设置输入框提示，当未输入时，输入框有浅色提示，使用 placeholder 属性；

<form action="">
    <input type="text" placeholder="请输入内容">
    <input type="text" placeholder="请输入数字">
    <br>
    <span>密码: <input type="text" placeholder="请输入密码"></span>
</form>

input 标签还有一个属性 value，表示输入框默认填写好的值；

<form action="">
    <span>用户名:</span>
    <input type="text" value="Jarvis"><br><br>
    <span>账号:</span>
    <input type="text" placeholder="account"><br><br>
    <span>密码:</span>
    <input type="text" placeholder="password"><br><br>
</form>

这里的 span 标签也可以使用 label 标签替换，需要注意的是， label 标签只能和 input 标签绑定使用；

12.2 type=“radio”

input 标签也可以实现选择框的效果：

<form action="">
    <span>用户名:</span>
    <input type="text" value="Jarvis"><br><br>
    <span>账号:</span>
    <input type="text" placeholder="account"><br><br>
    <span>密码:</span>
    <input type="text" placeholder="password"><br><br>
    <label for="">性别:</label>
    <input type="radio">男
    <input type="radio">女
    <input type="radio">其他
</form>

但是，这样的效果其实是，每个选项都可以选择；

如果想要实现单选框，需要给每一个选项的 input 标签增加一个相同的 name 属性：

<form action="">
    <span>用户名:</span>
    <input type="text" value="Jarvis"><br><br>
    <span>账号:</span>
    <input type="text" placeholder="account"><br><br>
    <span>密码:</span>
    <input type="text" placeholder="password"><br><br>
    <label for="">性别:</label>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <input type="radio" name="gender">其他
</form>

可以发现，当我们使用 label 标签时，会默认有一个 for 属性，这个属性是用来和对应的输入框 id 绑定的；

每个 label 只能绑定一个输入框 id，所以对于这种多选框、单选框肯定不适用，但是适用于用户名、密码这些输入；

12.3 type=“password”

如果想要输入的密码是黑点点显示，可以将 input 标签中的 type 属性设置为 password 类型；

<form action="">
    <label for="username">Username:</label>
    <input type="text" value="Jarvis" id="username"><br><br>
    <label for="account">Account:</label>
    <input type="text" placeholder="account" id="account"><br><br>
    <label for="password">Password:</label>
    <input type="password" placeholder="password" id="password"><br><br>
    <label for="">Gender:</label>
    <input type="radio" name="gender">Male
    <input type="radio" name="gender">Female
    <input type="radio" name="gender">Other
</form>

12.4 type=“checkbox”

input 标签也有专门的多选框，只需要将每个选项的 type 属性设置为 checkbox，同时每个选项都要有一个相同的属性；

<form action="">
    <label for="username">Username:</label>
    <input type="text" value="Jarvis" id="username"><br><br>
    <label for="account">Account:</label>
    <input type="text" placeholder="account" id="account"><br><br>
    <label for="password">Password:</label>
    <input type="password" placeholder="password" id="password"><br><br>
    <label for="">Gender:</label>
    <input type="radio" name="gender">Male
    <input type="radio" name="gender">Female
    <input type="radio" name="gender">Other
    <br><br>
    <label for="">Hobby:</label>
    <input type="checkbox" name="hobby"> 唱歌
    <input type="checkbox" name="hobby"> 跳舞
    <input type="checkbox" name="hobby"> 说唱
    <input type="checkbox" name="hobby"> 打篮球
</form>

12.5 type=“submit”

用于提交表单填写的数据，提交到的位置取决于 form 自带的属性 action 的值；

action 的值是一个 URL，表示服务器或者后端提供的一个 API，如果我们没有，可以暂时用一个 # 占位；

提交按钮的默认名称是提交，如果我们想修改，可以使用 value 属性自己指定；

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 表单</title>
</head>
<body>
    <form action="#">
        <label for="username">Username:</label>
        <input type="text" value="Jarvis" id="username"><br><br>
        <label for="account">Account:</label>
        <input type="text" placeholder="account" id="account"><br><br>
        <label for="password">Password:</label>
        <input type="password" placeholder="password" id="password"><br><br>
        <label for="">Gender:</label>
        <input type="radio" name="gender">Male
        <input type="radio" name="gender">Female
        <input type="radio" name="gender">Other
        <br><br>
        <label for="">Hobby:</label>
        <input type="checkbox" name="hobby"> 唱歌
        <input type="checkbox" name="hobby"> 跳舞
        <input type="checkbox" name="hobby"> 说唱
        <input type="checkbox" name="hobby"> 打篮球
        <br><br>
        <input type="submit">
        <input type="submit" value="确认">
    </form>
</body>
</html>

最终显示效果：

标签：网页,标签,元素,初识,标题,HTML,属性
From： https://blog.csdn.net/weixin_73858883/article/details/139552069

1. HTML基本结构

2. 标题标签

3. 段落标签

4. 无序列表

5. 有序列表

6. 表格标签

8. 注释

9. 换行和水平分割线

10. HTML属性

10.1 a 标签

10.2 img 标签

11. HTML区块

11.1 块元素 block

11.2 行内元素 inline

11.3 示例

12. HTML表单

12.1 type=“text”

12.2 type=“radio”

12.3 type=“password”

12.4 type=“checkbox”

12.5 type=“submit”

相关文章

赞助商

阅读排行