前端Web开发学习week1

最新推荐文章于 2024-10-16 11:23:07 发布

种满鸭蛋的山坡~

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量61

点赞数 1

文章标签：前端学习 html

本文链接：https://blog.csdn.net/HHH_JYSW/article/details/134886327

版权

HTML是什么？

HTML（超文本标记语言）是构建网页的基础。它通过标签来描述网页的结构和内容，让浏览器能够理解并呈现页面。我们从标签开始说起：

1. 基本结构标签

<!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>

在这个例子中，<!DOCTYPE html> 声明了HTML版本，<html> 是HTML文档的根元素，<head> 包含了页面的元信息。

通俗地来说<html> 标签就好比一颗大树的树干，所有的内容都在这个根元素之下。

然后，<head> 是一个容器，里面放的是一些关于网页的“元信息”，这些信息不会直接在网页上显示出来，但是对网页的显示和行为有很大的影响。比如说：

<meta charset="UTF-8"> 告诉浏览器这个网页使用的是UTF-8字符编码，确保文字显示正常。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 是设置移动设备上的显示，让网页可以适应不同设备的屏幕大小。
<title>Document</title> 设置网页的标题，这个标题会显示在浏览器的标签页上。

<body> 则包含可见内容。

2. 标题和段落

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<p>这是一个段落。</p>

标题标签 <h1> 到 <h6> 用于创建标题，数字越小级别越高。段落标签 <p> 用于定义段落文本。

3.超链接

<!-- 超链接 -->
<!-- target="_blank"新窗口跳转页面 -->
<h3>超链接</h3>
<a href="https://www.bilibili.com/">跳转到哔哩哔哩</a>
<a href="./1-标签的写法.html" target="_blank">跳转到1-标签的写法</a>
<!--href属性写#，表示空链接，不会跳转  -->
<a href="#">空链接</a>

<a> 标签是超链接标签，href 属性指向链接的地址。

4. 列表与表格

    <ul>
        <li>列表条目1</li>
        <li>list2</li>
        <li>list3</li>
    </ul>
    <ol>
        <li>step1</li>
        <li>step2</li>
        <li>step3</li>
    </ol>
    <dl>
        <dt>服务中心</dt>
        <dd>申请售后</dd>
        <dd>售后政策</dd>
    </dl>

    <table border="3">
        <thead>
            <tr>
                <th>name</th>
                <th>chinese</th>
                <th>maths</th>
                <th>all</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>john</td>
                <td rowspan="2">88</td>
                <td>99</td>
                <td>788</td>
            </tr>
            <tr>
                <td>mike</td>
                <!-- <td>65</td> -->
                <td>96</td>
                <td>685</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>summary</td>
                <td colspan="3">first</td>
                <!-- <td>first</td> -->
                <!-- <td>first</td> -->
            </tr>
        </tfoot>
    </table>

无序列表 <ul> 使用 <li> 标签创建项目列表，有序列表 <ol> 也类似，只是项目是按照顺序排列的，定义列表是<dl> 嵌套<dt>和<dd>。而<table> 标签用于创建表格，使用 <tr> 表示行，<th> 表示表头，<td> 表示数据单元格。

5. 表单元素

    <form>
        用户名：<input type="text">
        <br><br>
        密码：<input type="password">
        <br><br>
    </form>
    文本框：<input type="text" placeholder="请输入用户名">
    <br><br>
    密码框：<input type="password" placeholder="请输入用户名">
    单选框：<input type="radio">
    <br><br>
    多选框：<input type="checkbox">
    <br><br>
    上传文件：<input type="file">
    <br> 
    性别：
    <input type="radio" name="gender" id="man"><label for="man">男</label>
    <label><input type="radio" name="gender" checked> 女</label>
    <br>
    上传文件：<input type="file" multiple>
    <br>
    <input type ="checkbox" checked>敲代码
    <input type ="checkbox">敲前端代码

<form> 标签创建了一个表单，<label> 用于标记表单元素，<input> 是常见的表单输入元素，type 属性定义了输入框的类型，比如文本、密码等。

6.下拉菜单

下拉菜单通过<select>和<option>标签实现。例如：

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

这将创建一个包含三个选项的下拉菜单。selected表示默认选择的选项

7.文本域

文本域用于接收多行文本输入，通过<textarea>标签实现。例如：

     <!-- 右下角有拖拽功能，实际中会禁用 -->
     <textarea>请输入评论</textarea>

8.按钮

按钮可以通过<button>标签创建。例如：

     <!-- 如果省略type属性，功能是提交 -->
     <button type="submit">提交</button>
     <button type="reset">重置</button>
     <button type="button">普通按钮</button>

这将生成一个点击按钮。

9.图像标签

插入图片使用<img>标签：

    <img src="./fdg1.jpg" alt="this is a picture">
    <img src="./house.webp" title="a house">
    <!-- 浏览器默认等比例缩放 -->
    <img src="./fdg.jpg" width="100">

src 属性表示图像路径，alt 属性提供了图像的描述信息，将鼠标移到图片上，会显示title的信息。

10.音频标签

<audio>标签用于嵌入音频文件，controls属性提供了一个播放器控制面板，loop表示循环播放。

 <audio src="./music/Richard+Clayderman+-+Matrimonio+De+Amor+(梦中的婚礼).mp3" controls loop></audio>

11.视频标签

<video>标签用于嵌入视频文件。

    <!-- 显示控制面板，循环播放，静音，自动播放 -->
    <video src="./music/烟花易冷.mp4" controls loop muted autoplay> </video>

种满鸭蛋的山坡~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫