8

前端爱好者的小白学习之路-2 从0基础到学会HTML（超文本标记语言）入门前端 这一篇小...

 3 years ago
source link: https://blog.csdn.net/qq_45704942/article/details/113175311
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

学会html可以到达哪种程度？
笔者为想了解前端 HTML的小白们 稍微做一个小小的展示~
（以下实例均为pink老师课程中给到的案例 建议自己照着敲一敲 OR 点击此处获得源代码扔到vscode里试着运行一下~）

【1】练习最基础页面的写法~

在这里插入图片描述
在这里插入图片描述

【2】练习表格的写法~

在这里插入图片描述

1.写在前面

关于HTML
【1】直接问度娘 可以直接弹出来一大堆相关教程 资源丰富
【2】HTML非常容易学习 一天就可以快速入门
【3】入门之后 我们可以让HTML运行在浏览器上 用HTML来写出一个简单的无交互性的网页
阅读完此文 你会得到——
【1】未接触过的小白们可以省去查找资料的时间 直接快速入门 省时又省力~
【2】早早在前端的海洋里遨游的前辈们 可以。。看看现在的小白是怎么入门前端的hhh （依旧是 可以跟后辈们聊一聊 自己是怎么入门前端的hh）

2.笔者的学习方式

pink老师教程入门（同学推荐）——菜鸟教程的教程刷一遍巩固基础——独立写几个页面（搭配后面的CSS）加强应用能力
那么接下来 废话不多说——

3.HTML开学！

其实HTML只需要菜鸟教程 &W3school二选一（这两个教程内容大部分是一致的） 即可学好
在这里插入图片描述在这里插入图片描述
但是——

在这里插入图片描述
为了我们掌握的知识更加牢固 也为了 能在之后的课程中更加适应老师的课
依旧是安利一波pink老师的零基础入门课程~
不知如何下手的小伙伴赶紧直接听起来吧~

pink老师课程p1-p60（HTML部分）
接下来我会先将我根据菜鸟教程总结的笔记放在下面
后期随着学习过程 如果发现有遗漏 我会及时补充~
小白们可以边用起来VScode 跟着pink老师敲代码
边用起来Typora 跟着我的笔记 总结一份自己的前端入门笔记~

4.根据菜鸟教程总结的笔记

大家也可以选择自己浏览一遍菜鸟教程来进行一个初步的了解

4.1 学习之前要了解的

学习之前我们首先需要明确——html的重点是什么 学好他们对之后的学习有什么重要的意义 有目的性地去听课看教学视频&看教程 一定能事半功倍~
【1】HTML重点——常用的标签 也就是后期会接触到的盒子的最基础的表现形态
【2】HTML本身不像其他编程语言是有逻辑性的
利用HTML（&CSS）写出来一个简易网页的过程 更像是搭积木 摆盒子 需要我们的耐心 和对各个标签的熟练应用和掌握

4.2 菜鸟教程HTML笔记直通车

这是我根据菜鸟教程的基础教程+自己的一些理解+pink老师课程中提到的一些内容 总结的一份笔记 小伙伴们可以选择性地康康 大体分为几个大部分

在这里插入图片描述
超多字预警！想看个大体框架的赶紧退回到文章中最开头用导航跳过这一块儿~然后反手一个点赞关注收藏 三连 回头慢慢看 就ok[doge]
另外笔记中如果有哪些有问题的地方 也请各位小伙伴慷慨地帮忙指出一下 感谢~

【1】HTML基础概念

可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

**注意：**对于中文网页需要使用 声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为 。

HTML标签

  • HTML 标签是由尖括号包围的关键词，比如
  • HTML 标签通常是成对出现的，比如 这段字就是被一对标签加粗了
  • 标签对中的第一个标签是开始标签，第二个标签是结束标签
  • 开始和结束标签也被称为开放标签和闭合标签
<p>
    
</p>
/*这是一对标签*/

HTML 元素

一个 HTML 元素包含了开始标签与结束标签

<p>这是一个段落</p>

【2】HTML基础

html标题

<h1>
    一级标题
</h1>
<h6>
    六级标题
</h6>

html段落

<p>
    this is a paragragh
</p>

html链接

<a href="https:www.runoob.com">this is a link</a>

html图像

<img src="/images/logo.png" width="258" height="38">

【3】HTML元素

下式即为HTML元素

<p>xxxxxxx</p>

以开始标签起始

以结束标签终止

二者之间是元素的内容

<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

上面的代码中含有三个HTML元素
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

【4】HTML属性

一般表述于开始标签

HTML 链接由<a>标签定义。链接的地址在 href 属性中指定：

<a href="http://runoob.com">这是菜鸟教程的网址链接</a>

此例中"http://runoob.com"在HTML属性中被指定

【5】HTML换行

使用<br>
在不产生一个新段落的情况下进行换行
例子

<p>
    这个<br>段落<br>演示了分行的效果~
</p>

效果如下：

这个
段落
演示了分行的效果~

【6】文本格式化标签

HTML文本格式化标签

对输出的文本进行格式化 让它们变成 斜体 加粗 有下标 居上 局下
例子

<p>
    <sub>上标字</sub>
    <sup>下标字</sup>
    <ins>插入字</ins>
    <del>删除字</del>
    <em>着重文字</em>
    <b>加粗</b>
    <i>斜体</i>
<p>

效果如下：

上标字下标字插入字 删除字 着重文字 加粗 斜体

【7】HTML链接

<a href="http://runoob.com/" target="_blank">访问菜鸟教程</a>

*HTML写链接的时候要始终将正斜杠添加到子文件夹减少HTTP请求

如果子文件夹的末尾没有正斜杠，就会产生两次HTTP请求，就会对效率产生影响，

假如这样书写链接：href=“http://www.w3school.com.cn/html”，就会向服务器产生两次HTTP 请求。

因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=“http://www.w3school.com.cn /html/”

【8】HTML 头部

在这里插入图片描述

这其中包含了所有**头部标签元素**
在这之中 可以插入脚本(scripts) 插入样式文件(CSS)
可以插入各种meta信息
eg:
<meta charset="utf-8">

为搜索引擎定义关键词

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容

<meta name="description" content="免费 Web & 编程 教程">

定义网页作者

<meta name="author" content="Runoob">

每30秒刷新当前页面

<meta http-equiv="refresh" content="30">

【9】HTML 图像

*图像标签（ <img>）和源属性（Src）

<img scr="url(图像的链接)" >

*Atl属性

当图像的链接丢失或者无法打开时 要显示备用的文本

alt属性用来定义一串预备的可替换的文本

<img src="boat.gif" alt="BOAT">

*图像高度与宽的的设置

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

直接设置就行了

**高级操作 定义图像地图&图中的可点击区域

1.矩形：左下角顶点坐标为(x1,y1)，右上角顶点坐标为(x2,y2)

<area shape="rect" coords="x1,y1,x2,y2" href=url>

2.圆形：圆心坐标为(X1,y1)，半径为r

<area shape="circle" coords="x1,y1,r" href=url>

3.多边形：各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) …

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

具体例子—行星图片

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
    太阳 定义成一个矩形 更好描述
    左下角顶点位于(0,0)
    右上角顶点位于(82,126)
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
    行星1号 圆心位于90,58 半径为3 
    <area shape="circle" coords"90,58,3" alt="Mercury" href="mercur.htm">
    行星2号 圆心位于124,58 半径为8
    <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

此图中 这三块区域都是可以点击的~

【10】HTML表格

表格由 <table> 标签来定义。

每个表格均有若干行（由 <tr> 标签定义）

每行被分割为若干单元格（由 <td> 标签定义）

<table border="1">--还加了个边框
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

在这里插入图片描述

表格的表头

表头使用 标签进行定义

大多数浏览器会把表头显示为粗体居中的文本

<table border="1">
    <tr>
        以下两行即为表头
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

效果如下：

在这里插入图片描述

【11】HTML列表

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

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

<ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>
  • Coffee

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

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

<ol>
    <li>coffee</li>
    <li>tea</li>
    <li>good</li>
</ol>
  1. coffee

*自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表始于 <dl> 标签。
自定义列表项目——以 <dt> 开始。
自定义列表注释——以 <dd> 开始。

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee - black hot drink Milk - white cold drink

【12】HTML区块元素

——<div>和<span>

HTML可以通过<div>和<span>把元素组合起来

块级元素在浏览器显示时，通常会另起一个新行来开始（和结束）

下面这6个都是块级元素

实例: <h1>, <p>, <ul>, <table>，<html>，<div>

HTML div 元素

<div>元素是块级元素 可用于组合其他HTML元素的容器

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

文档布局中，取代了用表格定义布局的老式方法。

另外，用<table>元素进行文档布局不是表格的正确用法，<table>元素的作用是显示表格化的数据。

内联元素在显示时通常不会以新行开始。

以下7个都是内联元素 可以放到其他标签中改变其属性 也可作为文本简单的一个容器。

 <b>, <td>, <a>, <img>，<span>,
 <em>|<em/> ---用于插入一个用来呈现为 被强调 的文本。
 <i>

HTML <span>元素

可以用作文本的容器

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

<p>my mother has a <span style=“color:blue”>brother（被标记成蓝色）</span> o ye</p>

上述代码可将 brother 标记成蓝色~

【13】HTML布局-是重点 建议多实战练习！

建议初学者可以先使用<div>标签进行HTML布局的练习 —— 对一个网页进行模仿
等熟练掌握之后可以利用列表标签 段落标签

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）

*使用 <div> 或者 <table> 元素来创建多列

**虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

另外 CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观

使用 div 元素

div 元素是用于分组 HTML 元素的块级元素。

使用 HTML <table> 标签是创建布局的一种简单的方式。

*即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

第一和最后一行使用 colspan 属性来横跨两列：

HTML布局的一些注意事项

*使用CSS最大的好处：如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局

*由于创建高级的布局非常耗时，使用模板是一个快速的选项。

通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

【14】HTML表单和输入

HTML表单用于收集不同类型的用户输入

HTML表单

表单是一个包含表单元素的区域。

表单元素允许用户在表单中输入内容

例如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等

文本域 text (fields)

<form>
    First name:<input type="text" name="firstname"><br>
    Last name:<input type="text" name="lastname">
</form>

在这里插入图片描述

密码字段 password

<form>
    password:<input type="password" name ="pwd">
</form>

在这里插入图片描述

输入密码不会以明文显示 而是以星号或者原点代替

单选按钮 radio(buttons）

引入例子：
<form>
    <input type="radio" name="sex" value="male">male<br>
    <input type="radio" name="sex" value="female">female
</form>

在这里插入图片描述

涉及到的几个属性：

value：提交数据到服务器的值

name：为控件命名 以备后台程序ASP PHP使用

注意！同一组的单选按钮的name取值一定要一致！这样才能起到单选的作用！

checked：设置 checked=“checked” 时，该选项被默认选中

<form>
    <p>
        你生活在哪个国家？
    </p>
    <input type="radio" name="country" value="China" checked="checked">中国<br>
    <input type="radio" name="country" value="USA">美国
</form>

默认选择中国~
在这里插入图片描述

复选框 checkbox

<form>
    <input type="checkbox" name="vehicle" vlaue="bike">I have a bike<br>
    <input type="checkbox" name="vehicle" value="car">I have a car
</form>

可以进行多选~
在这里插入图片描述
在这里插入图片描述

提交按钮 submit(button)

<form>
    username:<input type="submit" >
</form>

在这里插入图片描述

与文本框结合起来的应用

用户单击确认按钮时 表单的内容会被传送到另一个文件

表单<form action="xxxx">中的动作属性定义了目的文件的文件名

由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

假如您在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

在这里插入图片描述

—— <option></option>

<form>
    <select name="xxx">
        <option value=""></option>
        <option value=""></option>
        <option value=""></option>
    </select>
</form>

预选下拉列表（初始就有一个默认的选项）

标签里加一个selected即可

<form action="">
    <select name="cars">
        <option value="bc">奔驰</option>
        <option value="bwm">宝马</option>
        <option value="audi" selected>奥迪双钻</option>
        <option value="lsls">劳斯莱斯</option>
    </select>
</form>

在这里插入图片描述

【15】HTML框架

iframe 设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度。

<iframe src = “demo_iframe.htm" width="200" height="200">
    
</iframe>

iframe 移除边框

<iframe src="demo_iframe.html" frameborder="0">
    
</iframe>

frameborder属性用于定义iframe的表示中是否显示边框

设置属性值为“0”—— 移除iframe的边框

iframe 显示目标链接页面

iframe可以显示一个目标链接的页面

目标链接的属性必须使用iframe的属性，

<iframe src="demo_iframe.html" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

正常表达结果应该是 RUNOOB.COM的超链接配一个链接的页面——
即为在这里插入图片描述

（由于此处图像的链接 不可用 所以无法显示辽。。）

RUNOOB.COM

【16】HTML颜色

HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。—red green blue

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

想要什么颜色 直接用截图的取色器取就行了。

【17】HTML脚本

JavaScript使HTML页面具有更强的动态性和交互性

而<script>定义了客户端脚本

<noscript>定义了不支持脚本浏览器输出的文本

在body中插入一段简单的脚本用

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<script>
document.write("Hello World!")
</script> 

</body>
</html>

在不支持JavaScript的浏览器中用标签

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>

<script>
document.write("Hello World!")
</script>
    
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

<p>不支持 JavaScript 的浏览器会使用 <noscript> 元素中定义的内容（文本）来替代。</p>
 
</body>
</html>

HTML总结

上述知识熟练掌握后 我们已经可以使用HTML创建站点了！

【1】HTML 是一种在 Web 上使用的通用标记语言。

【2】HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

【3】HTML的关键是

标签的作用是指示将要出现的内容！

学完HTML之后进行

JavaScript

5.写在后面

以上内容就是笔者三轮学习HTML的成果辽
一轮——pink老师课程
跟着视频敲一敲代码 制作一下页面
二轮——菜鸟教程
跟着教程中列出的知识点 制作了一份笔记（即为4中所展示的内容）
三轮——CSDN个人博客
将笔记总结一遍 放到个人博客上 接下来加深印象的同时也督促我进行接下来的学习和不断总结

最后 还是要 多敲代码 多模仿页面 搭配CSS一起进行页面布局的练习 以达到基础的100%熟练与扎实~
那么 接下来我将随着学习进度的不断推进 更新我的个人学习博客~
我们下期再见~
在这里插入图片描述


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK