2023百度前端实战训练营02DAY

最新推荐文章于 2024-07-19 11:00:40 发布

小许在线摸鱼

最新推荐文章于 2024-07-19 11:00:40 发布

阅读量131

点赞数

分类专栏：前端文章标签： html5 css javascript Powered by 金山文档

本文链接：https://blog.csdn.net/WingDriver/article/details/128568814

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一.正文内容：三件套（部分HTML）

注：本文中部分代码微瑕

标题标签：

标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

<h1> 定义最大的标题。<h6> 定义最小的标题。

注释：在开始标签中有一个惊叹号，但是结束标签中没有。

浏览器不会显示注释，但是能够帮助记录您的 HTML 文档。

您可以利用注释在 HTML 中放置通知和提醒信息：


<body>
    hello world
    <!-- 注释 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h6>六级标题</h6>
</body>

文本格式化

<body>
    <b>加粗</b>
    <strong>加粗</strong>
    <ins>下划线</ins>
    <em>倾斜</em>
    <del>删除</del>
</body>

3.图片标签


<body>
     <img src="cat1.gif" alt="图片加载失败" title="鼠标悬浮显示" width="320" height="180"> 
     <!-- alt 替换文本 -->
</body>

4.绝对路径

文件路径描述了网站文件夹结构中某个文件的位置。

文件路径会在链接外部文件时被用到：

网页

图像

样式表

JavaScript


<body>
    <img src="D:\vscode\cat1.gif" alt="">
    <!-- 盘符开头 -->
</body>

5.相对路径同级别

<body>
    <img src="cat1.gif" alt="">
    <img src="./cat1.gif" alt="">
</body>

6.音频标签

audio> 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。

下面的例子使用了一个 mp3 文件，这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。

<body>
    <audio src="./music1.mp3" controls autoplay loop></audio>
</body>

7.视频标签

<video> 是 HTML 5 中的新标签。

<video> 标签的作用是在 HTML 页面中嵌入视频元素。

<body>
    <video src="./video1.mp4" controls autoplay muted loop></video>
    <!-- 谷歌浏览器自动播放autoplay需要搭配muted实现静音播放 -->
</body>

8.链接标签

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接

通过使用 name 属性 - 创建文档内的书签

<body>
    <a href="https://www.baidu.com/" target="_blank">跳转到百度</a>
    <br>
    <a href="./01标题标签.html" target="_self">点击进入01html</a>
    <!-- 开发网站初期 不知道跳转地址 href里写#空连接 -->
    <br>
    <a href="#">空链接</a>
</body>

9.无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表始于 <ul> 标签。每个列表项始于 <li>。

<body>
    <ul>
        <li>香蕉</li>
        <li>苹果</li>
        <li>榴莲</li>
        
    </ul>
</body>

10.有序列表

同样，有序列表也是一列项目，列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。


<body>
    <ol>
        <li>张三 100</li>
        <li>李四 90</li>
        <li>王五 80 </li>

    </ol>
</body>

11.自定义列表

<body>
    <dl>
        <dt>帮助中心</dt>
        <dd>客户管理</dd>
        <dd>购物指南</dd>

    </dl>
</body>

12.表格结构

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<body>
    <table border="1" width="500" height="300">

        <caption> <strong>学生成绩单</strong> </caption>
        
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>姓名1</td>
                <td>100</td>
                <td>真6</td>
            </tr>
            <tr>
                <td>姓名1</td>
                <td>100</td>
                <td>真6</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>姓名1</td>
                <td>100</td>
                <td>真6</td>
            </tr>
        </tfoot>


    </table>
</body>

13.表格合并单元格

<body>
    <table border="1" width="500" height="300">

        <caption> <strong>学生成绩单</strong> </caption>
        
        <thead>
            <tr>
                <th>姓名</th>
                <th>成绩</th>
                <th>评语</th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>姓名1</td>
                <td rowspan="2">100</td>
                <td>贼6</td>
            </tr>
            <tr>
                <td>姓名1</td>
                <td>贼6</td>
            </tr>
        </tbody>

        <tfoot>
            <tr>
                <td>姓名1</td>
                <td colspan="2">贼6</td>
                
            </tr>
        </tfoot>


    </table>
</body>

14.表单占位符

HTML 表单用于收集用户输入。

<form> 元素定义 HTML 表单：

<input> 元素是最重要的表单元素。

<input> 元素有很多形态，根据不同的 type 属性。

<body>
    账号：<input type="text" placeholder="请输入用户名">
    <br>
    密码：<input type="password" placeholder="请输入密码">

</body>

15.表单单选框及多选框

<body>
    性别：<input type="radio" name="gender" checked>男 
        <input type="radio" name="gender">女
        <br>
    <input type="checkbox" name="interst" checked>篮球
    <input type="checkbox" name="interst" >排球
    <input type="checkbox" name="interst" >足球

</body>

16.表单input按钮和button按钮

action属性定义提交表单时要执行的操作。

通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中。

在下面的例子中，表单数据被发送到名为 "action_page.php" 的文件。该文件包含处理表单数据的服务器端脚本：

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。

表单处理程序（form-handler）通常是包含处理输入数据的脚本的服务器页面。

在表单的 action 属性中规定表单处理程序（form-handler）：


<body>
    <form action="">


    用户名：<input type="text">
    <br>
    密码：<input type="password">
    <br>
    <input type="submit" value="注册">
    
    <input type="reset" value="重置一下">
    
    <input type="button" value="普通按钮">


    </form>


</body>

<body>
    <button>按钮1</button>
    <button type="submit">  提交按钮 </button>
    <button type="reset">  重置按钮 </button>
    <button type="button"> 普通按钮 </button>

</body>

17.下拉菜单

<body>
    <select name="" id="">
        <option value="" >北京</option>
        <option value="" selected>上海</option>
        <option value="">广州</option>

    </select>
</body>

18.表单label标签

<body>
    性别：
    <!-- 方法1 -->
    <input type="radio" name="sex" id="man"><label for="man">男</label>
    <!-- 方法2 -->
    <label >
    <input type="radio" name="sex">女
    </label>

</body>

19.无语义标签&有语义标签

<body>
    <div>这是div标签</div>
    <span>span标签</span>
</body>

<body>
    <header>网页头部</header>
    <nav>网页导航</nav>
    <footer>网页底部</footer>
    <aside>侧边栏</aside>
    <section>网页区块</section>
    <article>文章</article>
</body>

20.字符实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

字符实体类似这样：

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用   字符实体。

<body>
    这是HTML&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文档

</body>

21.举个栗子吧

<body>
    <h1>标题</h1>
    <hr>
    <form action="">
        昵称：<input type="text" placeholder="请输入昵称">
        <br>
        性别：
        <label><input type="radio" name="gender" checked>男</label>
        <label><input type="radio" name="gender">女</label>
        <br>
        城市：
        <select>
            <option >北京</option>
            <option selected>上海</option>
            <option>广州</option>
        </select>
        <br>
        喜欢：
        <label><input type="checkbox">篮球</label>
        <label><input type="checkbox" checked>篮球2</label>
        <label><input type="checkbox">篮球3</label>
        <br>
        个人介绍：
        <br>
        <textarea name="" id="" cols="30" rows="10">
            你好
        </textarea>
        <br>
        我承诺：
        <ul>
            <li>111</li>
            <li>222</li>
            <li>333</li>
        </ul>

        <input type="submit" value="注册一下">
        <button type="reset">重置</button>

    </form>

</body>

二.结尾

对前端感兴趣的小伙伴可以参考下方链接

w3school 在线教程

菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)