光速学会前端三件套之html

最新推荐文章于 2024-05-06 10:59:29 发布

你的Max星星

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量327

点赞数

分类专栏：光速学会前端三件套文章标签：前端 html

本文链接：https://blog.csdn.net/qq_50673844/article/details/127268720

版权

光速学会前端三件套专栏收录该内容

1 篇文章 0 订阅

订阅专栏

光速学会前端三件套-html

我们首先需要明白的是没有什么东西是简单容易得到的，光速学会不代表不劳而获，多加练习才是最大的捷径，所以希望兄弟们要多加练习。（前端的东西有很多，我们只需要过一遍，不用刻意去记很多，常用的在练习中也会慢慢记住。本博客便是通过从简单代码分析来大家学会）

首先看一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web_homework_1</title>
    <meta name="keywords" content="acwing,web,html">
    <meta name="'description" content="acwing课程">
    <link rel="icon" href=".//">
</head>
<body>

</body>
</html>

首先HTML文件这基本框架不用说，相信大家都会。
1.这里面的UTF-8也不用说，都知道是转中文的意思，我们有时少了这个时候，可能就是乱码的情况发生了

2.下一行的<title 这里面填的web_homework，这个不多说，效果如图
在这里插入图片描述
3.再往下看，name=“keywords”，content=”acwing“这段里面的keywords就是关键词的意思，一个网站加了很多关键词才能让别人更好的搜到，后面content=”acwing“这里面的acwing就是咱们写入网页的关键词。

4.下一行的description描述的意思，我们可以加上对网页的描述通过这里。后面content跟的acwing课程便是对网站的描述

5。再下一行的link最常用语链接样式表之类的，此行后面跟了属性rel=“icon“ 这里面的icon起到的是给网页标题设置小图标，href后面跟这个图标图片的地址。那么网页标题小图标在哪呢，位置如图
在这里插入图片描述

下面进行下一代码片段

<body>
<h2>春江花月夜</h2>
<h5>张若虚</h5>
<p>
    春江潮水连海平，海上明月共潮生。<br >
</p>
<hr>
<pre>
    int main()
{
    int a, b;
    scanf("%d%d", &a, &b);
    printf("%d %d\n", a, b);
    return 0;
}
</pre>
<p>
    <i>春眠不觉晓，</i>
    <b>处处闻啼鸟。</b>
    <del>夜来风雨声，</del>
    <ins>花落知多少。</ins>
</p>
</body>

1.<>里面的h1,h2,h3,h4都是语言标题，h1最大，h2变小，依次往下
2.<>里面的p 能组成段落，这里面的<br 是换行的意思
3.<hr 是加一行分割线
3.<pre 标签可定义预格式化的文本。一般就是用来展示源代码
4.那么代码< 里面的i,b,del,ins又表示什么呢
效果如图：
我们可以看到，春眠不觉晓是斜体，处处闻啼鸟是加粗了，夜来风雨声加上了删除文本的效果，花落知多少加了下划线
所以< i,b,del,ins 的效果一目了然
在这里插入图片描述

下面进行下一段代码

<video src="11" controls></video>
<audio src="11"  controls></audio>
<img src="" alt="shan" width="600">

还是老规矩
1.video这一看就是视频的意思，那么这一行就是网页里面插入视频的意思了，src后面接的就是你这个视频的地址，controls添加了视频控件，暂停，开始等功能
2.audio是将音频添加到你的网站里面，controls和视频的一个效果
3。img是网站里面添加图片，alt是你图片不显示时候显示的文字 width是指图片宽度
不多说，看一眼效果图，大家就明白了
在这里插入图片描述

下面我们继续看下一段代码

<a href="/about.html">about</a>
<a target="_blank" href="https://acwing.com ">
    <img src="www" alt="6">
    
</a>

1.我们接触到了<a 这个可以给网页添加一个链接，后面的href是你链接的地址，我们这里的about是链接的名字
2.我们又看了到了<a 这里的比上面的多了很多东西，多了什么呢,target="_blank属性可以让我们在点链接的时候去新的网页打开这个链接，href后面跟的还是地址，这里面我们发现这里面嵌套了<img ，当然了，很多时候点击图片也会跳转，这正是把图片当做链接
不多说，看一眼效果图，大家都会了，about点击发现是链接，这个alt为6的图片点击也是一个链接
在这里插入图片描述

下面我们继续看下一段代码

<form action="/login.html">
  <label for="username">用户名</label>
  <input required  minlength="3" maxlenght="15" placeholder="用户名" type="text" name="username" id="username">
  <br>
  <label for="age">年龄</label>
  <input required placeholder="年龄" type="number" name="age" id="age">
  <br>
  <label for="email">邮箱</label>
  <input type="email" name="email" id="email" required placeholder="邮箱">
  <br>
  <label for="password">密码</label>
  <input type="password" name="password" id="password" required placeholder="密码">
  <br>
  <label for="resume">个人简历</label>
  <textarea name="resume" id="resume" placeholder="个人简历" cols="30" rows="10"></textarea>
  <br>
  <label for="lang">语言</label>
  <select name="lang" id="lang">
    <option value="Cpp">Cpp</option>
    <option value="Java">Java</option>
    <option value="Python">Python</option>
  </select>
  <br>
  <button type="sumbit">递交</button>
</form>

1.<form 用于创建供用户输入的 HTML 表单， form元素包含一个或多个如下的表单元素，如下：
2.<label 会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上，后面这个for跟的是id属性
3.<input 标签规定了用户可以在其中输入数据的输入字段，后面跟的什么maxlength，minlength分别指的是填入的最大，最小字数，required理解为必填属性，加了以后填表单的人必须填这个框里面的东西，type指的是填的东西的属性，此处是txet属性，placeholder的效果看图就会明白了
4.<textarea 定义一个多行的文本输入控件，输入多行文字用的
5.<button 定义一个按钮，submit,点击就会触发表单的提交事件
6. <select 来创建下拉列表,具体看图就明白了

下面我们来看看最后的效果

在这里插入图片描述

继续看下一段代码`

<body>
<ol>
    <li>第一讲</li>
    <li>第二讲
        <ul>
            <li>第一小节</li>
            <li>第二小节</li>
            <li>第三小节</li>
        </ul>
    </li>
    <li>第三讲
        <ol>
            <li>第一小节</li>
            <li>第二小节</li>
            <li>第三小节</li>
        </ol>
    </li>
</ol>
</body>

1.<ol 定义了一个有序列表. 列表排序以数字来显示。使用li 标签来定义列表选项。
2.<ul 标签定义无序列表。将 <ul 标签与 <li标签一起使用，创建无序列表

效果如图显示：
在这里插入图片描述

继续看下一段代码

<body>
<table>
  <caption>成绩单</caption>
  <thead>
  <tr>
    <th>姓名</th>
    <th>数学</th>
    <th>语文</th>
    <th>英语</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>Alice</td>
    <td>100</td>
    <td>99</td>
    <td>98</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>99</td>
    <td>98</td>
    <td>97</td>
  </tr>
  <tr>
    <td>Tom</td>
    <td>98</td>
    <td>97</td>
    <td>96</td>
  </tr>
  </tbody>
</table>
</body>

1.<table 标签定义 HTML 表格的意思
2.往下看我们看到<caption 签定义表格的标题,而且<caption 标签必须直接放置到 <table 标签之后，我们只能对每个表格定义一个标题。
3.<thead 标签用于组合 HTML 表格的表头内容,内部必须包含一个或者多个标签，<tr标签是我们用来定义行的，
4. 表格有两种单元格类型：
表头单元格 - 包含头部信息<th 元素创建）
标准单元格 - 包含数据<td 元素创建）
这样我们便做好了一个表格，效果如图：
在这里插入图片描述