光速学会前端三件套-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 元素创建）
这样我们便做好了一个表格，效果如图：

到这，html我们已经学了个大概，可以说已经了解的已经够用了，很多知识点遗忘的时候，还是希望多能去查一查，再见了，一别两三年，匆匆又夏天。

光速学会前端三件套之html相关推荐

前端三件套之JS速成
目录什么是JS JS的编码方式内部样式外部样式行内样式一:JS的数据类型及定义二:JS的输入与输出 1) 输入 2) 输出三:运算操作符 1)基础操作符 2)比较运算符 3)逻辑运算符 ...
web前端面试题整理(vue、uni-app、前端三件套、web基础)
Vue 对mvvm的理解 mvvm分为model.view.viewmodel三者 model代表数据模型 view代表视图 viewmodel代表连接视图和模型,实现了vue数据的双向绑定 view ...
全栈1——前端三件套
前端三件套简单笔记 B/S 软件的结构前端的开发流程网页的组成部分页面由三部分内容组成分别是内容(结构).表现. 行为. 内容( 结构) , 是我们在页面中可以看到的数据. 我们称之为内容. ...
javaWeb学习笔记1—前端三件套 HTML CSS JavaScript
学习视频地址 javaWeb学习笔记-前端三件套 HTML CSS JavaScript 1.字体标签 2. 字符实体 3.标题标签 4.超链接 5.列表标签 6. img标签路径 7.表格 8.i ...
利用python和前端三件套来一场线上烟花秀
目录 python烟花秀效果展示: 全部代码如下: 前端三件套(JS.CSS.HTML)的烟花秀 HTML部分:定义网页内容 CSS部分:描述网页布局 JS部分:控制网页行为 End ✨✨✨✨✨✨✨ ...
一个项目学会前端实现登录拦截
一个项目学会vue全家桶+axios实现登录.拦截.登出功能,以及利用axios的http拦截器拦截请求和响应. 前言该项目是利用了Github 提供的personal token作为登录token ...
多久能学会前端？怎么学？
web前端开发是很多小伙伴入门选择的编程语言,相较于其他编程语言来说,前端效果会比较直观,目前可以实现的效果也非常多,应用领域也是十分的广阔,那么如果一个普通人想要学前端需要多久的时间呢?应该如何学习 ...
学前端有什么好方法，怎么才能更快学会前端？
Web前端是网站的前台部分,运行在浏览器的PC端或移动端,为用户提供浏览网页.目前Web前端技术广泛应用于网站页面制作.微信.手机app开发.休闲游戏制作等场所. Web开发工程师在市场中的需求量很大 ...
【整理+总结】pink老师前端三件套之HTML笔记（二）HTML标签
本笔记整理自pink老师前端课程[黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程] https://www.bilibili.com/video/BV ...

光速学会前端三件套之html

光速学会前端三件套-html

首先看一段代码：

光速学会前端三件套之html相关推荐

最新文章

热门文章