HTML之网页搭建及常用元素入门

最新推荐文章于 2024-08-31 10:29:18 发布

五彩大铁猿

最新推荐文章于 2024-08-31 10:29:18 发布

阅读量980

点赞数 2

分类专栏： web 文章标签： html 服务器 web

本文链接：https://blog.csdn.net/weixin_47314602/article/details/126086178

版权

web 专栏收录该内容

8 篇文章 4 订阅

订阅专栏

1、HTML学习——VS Code环境搭建、创建第一个网页

1、HTML学习——VS Code环境搭建、创建第一个网页

跟着下面这个博主学的，我搭建出来了我自己的第一个网页。

(25条消息) HTML学习——VS Code环境搭建、创建第一个网页_小明在考研的博客-CSDN博客_code怎么新建html

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My first web page</title>
</head>
<body>
    <h2>LY python 练习</h2>
    <h3>hahahaahhahhahahaha</h3>
    <p>hello world ,练习web加油加油,LY</p>
</body>
</html>

运行结果图：

在此页面我们可以通过单击右键，检查，可以查看源代码程序。

2、HTML标题：

3、Html段落：

4、超链接：

hre即a标签的属性，后面跟着网址的网址就是即将要跳转的网页界面，然后再加上中文解释。

实际运行情况：

在代码中添加 <a href="https://blog.csdn.net/weixin_47314602?type=blog" target="_blank">小渣渣主页面 </a> 刷新之前的网页，就可以看到小渣渣主页面这个超链接，直接点击，就会自动跳转到这个页面。
target="_blank"代码的作用：打开网址时不会覆盖原本的那个页面，而是开启一个新的页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My first web page</title>
</head>
<body>
    <h2>LY python 练习</h2>
    <h3>hahahaahhahhahahaha</h3>
    <p>hello world ,练习web加油加油,LY</p>
    <a href="https://blog.csdn.net/weixin_47314602?type=blog" target="_blank">小渣渣主页面</a>
</body>
</html>

展示图：

5、基础图片显示：

<br/> 换行
<img src="C:\Users\1\Desktop\aa.jpg" width="600"> 添加图片

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My first web page</title>
</head>
<body>
    <h2>LY python 练习</h2>
    <h3>hahahaahhahhahahaha</h3>
    <p>hello world ,练习web加油加油,LY</p>
    <a href="https://blog.csdn.net/weixin_47314602?type=blog" target="_blank">小渣渣主页面</a>
    <br/>
    <img src="C:\Users\1\Desktop\aa.jpg" width="600">
</body>
</html>

运行结果展示：

6、 HTML表格：

<tr>:table row
<th>:table header
<td>:table data cell 单元格

<table border="1" cellpadding="10"> // border="1" 表示1像素宽  cellpadding="10"边距

<tr> //<tr>表示行

<th>data1</th> //<th>表示表头 data1第一行表头标题1

<th>data2</th> //<th>表示表头 data2第一行表头标题2

<th>data3</th> //<th>表示表头 data3第一行表头标题3

</tr>

<tr>

<td>11</td>   //<td>表示单元格 11为第二行第一列数据

<td>22</td> //<td>表示单元格 22为第二行第二列数据

<td>33</td> //<td>表示单元格 33为第二行第三列数据

</tr>

<tr>

<td>111</td>   //<td>表示单元格 111为第三行第一列数据

<td>222</td>   //<td>表示单元格 222为第三行第二列数据

<td>333</td>   //<td>表示单元格 333为第三行第三列数据

</tr>

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My first web page</title>
</head>
<body>
    <h2>LY python 练习</h2>
    <h3>hahahaahhahhahahaha</h3>
    <p>hello world ,练习web加油加油,LY</p>
    <a href="https://blog.csdn.net/weixin_47314602?type=blog" target="_blank">小渣渣主页面</a>
    <br/>
    <img src="C:\Users\1\Desktop\aa.jpg" width="300">

<table border="1" cellpadding="10">
    <tr>
        <th>data1</th>
        <th>data2</th>
        <th>data3</th>
    </tr>
    <tr>
        <td>11</td>
        <td>22</td>
        <td>33</td>
    </tr>
    <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
</table>
</body>
</html>

展示图：

7、HTML列表：

有序列表：<ol>

start="10"表示从10开始排序

<ol>
    <li>情深缘浅</li>
    <li>情非得以</li>
    <li>纸短情长</li>
</ol>
<ol   start="10">
    <li>说散就散</li>
    <li>绿色</li>
    <li>三生三世</li>
</ol>

无序列表：<ul>

我们可以在<li>的内容上在进行进行嵌套，有序无序都可以嵌套，在这边我就先举例嵌套在无序列表中。

<ul>
    <li>我曾</li>
    <li>鼓楼先生
        <ul>
            <li>汉斯</li>
            <li>男</li>
            <li>32</li>
        </ul>
    </li>
    <li>寒鸦少年</li>
</ul>

展示图：