前端开发笔记(一)—HTML教程

最新推荐文章于 2023-07-09 20:25:08 发布

怪怪王

最新推荐文章于 2023-07-09 20:25:08 发布

阅读量243

点赞数 4

分类专栏：前端技术文章标签： html html5 web

本文链接：https://blog.csdn.net/weixin_44064233/article/details/119000441

版权

前端技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前言

不必害怕未知，无需恐惧犯错，做一个Creator！

一、简介

HTML/Hyper Text Markup Language（超文本标记语言），前端开发的一种技术，在Web开发中用以控制网页结构。

1.语言语法

<标签符>内容</标签符>
标签符一般由一个“开始符号”和一个“结束符号”组合构成。结束符号只是在开始符号前面多加上了一个斜杠“/”。

2.开发环境：VScode

3.HTML结构

（1）文档声明： HTML页面
（2）html标签对： html /html
（3）head标签对：head /head
（4）body标签对：body /body
在这里插入图片描述

二、基本标签

1.简介

一个完整的HTML页面，是由一个个的标签组成的。以标签为基石实现各个目标功能。

2.标签使用

head标签
网页的“头部”，用以定义页面标题、定时刷新、外部文件等。

body标签
网页内容，大部分代码都是在这个标签对内部编写。

title标签
唯一的作用就是定义网页的标题。

<title>网页标题</title>

meta标签
设置页面特殊信息：页面关键字、页面描述（提供浏览器识别）
name属性：管理基本内容

<meta  name="keywords" content="前端开发,后端开发" />

http-equiv属性：定义网页所使用的编码；定义网页自动刷新跳转

<meta charset="utf-8" />
<meta  http-equiv="refresh" content="6;url=http://www.baidu.com"/>

注释方式

<!--注释的内容-->

3.示例（网页显示如下内容）

在这里插入图片描述
代码实现如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>这是网页的标题</title>
</head>
<body>
    <p>这是网页的内容</p>
</body>
</html>

三、文本标签

1.简介

文本内容是网页的基础，网页的文本由以下标签实现：
（1）标题标签
（2）段落标签
（3）换行标签
（4）文本标签
（5）水平线标签
（6）特殊符号

2.标签使用

<h1~6>标签
标题标签。HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。，其中h1标签的重要性最高，h6标签的重要性最低。一个页面一般只能有一个h1标签，而h2到h6标签可以有多个。

 <h1>一级标题</h1>
 <h2>二级标题</h2>

p标签
段落标签。用来显示一段文字。（自带换行）

<p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>

br标签
换行标签。用来给文本换行。

<p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>

文字控制标签
粗体标签：strong、b
斜体标签：i、em、cite
上标标签：sup
下标标签：sub
中划线标签：s
下划线标签：u
大字号标签：big
小字号标签：smal

hr标签
水平线标签。用来实现一条水平线。

  <h3>静夜思</h3>                  
  <hr/>
  <h3>春晓</h3>

div标签
划分HTML结构，从而配合CSS来整体控制某一块的样式.

    <div>
        <h3>静夜思</h3>                  
        <p>床前明月光，疑是地上霜。</p>
        <p>举头望明月，低头思故乡。</p>
    </div>

&nbsp
空格符号。1个汉字约等于3个。

3.示例（网页显示如下文本内容）

在这里插入图片描述
代码实现如下：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>练习题</title>
</head>
<body>
    <h3>演示卷</h3>
    <div>
        <h5>语文</h5>                  
        <p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
    </div>
    <hr/>
    <div>
        <h5>数学</h5>
        <p>(a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
    </div>
</body>
</html>

四、列表与表格标签

1.简介

列表是网页中最常用的一种数据排列方式，列表共有3种：有序列表、无序列表和定义列表。
表格在网页布局中用以更清晰地排列数据。在HTML中，一个表格一般会由表格、行、单元格3个部分组成。

2.标签使用

ol标签与li标签
组合使用，用来实现有序列表功能。
ol，即ordered list（有序列表）；li，即list（列表项）。语法：

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

type属性：用来改变列表项符号。
在这里插入图片描述
ul标签与li标签
组合使用，用来实现无序列表功能。
ul，即unordered list（无序列表）；li，即list（列表项）。语法：

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

type属性同ol标签与li标签。
注：ul的子元素只能是li，不能是其他元素。

table标签、tr标签、td标签、th标签、caption标签
组合使用，用来实现表格功能。
table和表示整个表格的开始和结束
tr，指的是table row（表格行）
td，指的是table data cell（表格单元格）
caption，表格的标题
th，指的是table header cell（表头单元格）
td，指的是table data cell（表行单元格）。语法：

<table>
    <caption>表格标题</caption>
    <tr>
        <th>表头单元格1</th>
        <th>表头单元格2</th>
    </tr>
    <tr>
        <td>表行单元格1</td>
        <td>表行单元格2</td>
    </tr>
    <tr>
        <td>表行单元格3</td>
        <td>表行单元格4</td>
    </tr>
</table>

rowspan标签与colspan标签
使用rowspan属性来合并行，即纵向的N个单元格”合并。
使用colspan属性来合并列。即横向的N个单元格”合并。

<td rowspan = "跨越的行数"></td>
<td colspan = "跨越的列数"></td>

        <tr>
            <td rowspan="2">喜欢水果:</td>
            <td>苹果</td>
        </tr>
        <tr>
            <td>香蕉</td>
        </tr>

3.示例：网页

显示如下表格与列表内容
在这里插入图片描述
代码实现如下：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>练习题</title>
</head>
<body>
    <p>1、你是通过什么浏览器看到本文的？</p>  
    <ol type="A">
        <li>腾讯浏览器</li>
        <li>谷歌浏览器</li>
        <li>其他</li>
    </ol>  
    <hr/>
    <table>
        <caption>考试成绩</caption>
        <tr>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>59</td>
        </tr>
    </table>
</body>
</html>

五、图片与超链接标签

1.简介

网页常常使用图片来让用户获得更好地体验。
网页与网页之间可以通过超链接来相互关联，能够方便用户在各个独立。

2.标签使用

img标签
使用img标签来显示一张图片，img标签主要的属性：src、alt
src属性用于指定这个图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。
alt属性为图片不显示时的提示文字。

<img src="图片路径" />
<img src="img/haizei.png" alt="海贼王之索隆" />

a标签
使用a标签来实现超链接。

<a href="链接地址">文本或图片</a>

target属性
用target属性来定义超链接打开窗口的方式

<a href="链接地址" target="打开方式"></a>

在这里插入图片描述

3.示例：通过点击图片转到目标链接

在这里插入图片描述
代码实现如下：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>练习题</title>
</head>
<body>
    <form>
        <a href="http://www.baidu.com"><img src="11.png" /></a>  
</body>
</html>

六、表单标签

1.简介

表单在网页中主要负责数据采集功能。表单通过在浏览器端收集用户的信息，然后将数据提交给服务器来处理。主要包含：单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多好文本框、下拉列表。

2.标签使用

form标签
定义表单区间，对表单基本属性进行设置。
在这里插入图片描述
name属性：给表单进行命名
method属性：指定数据http提交方法
acton属性：指定数据提交地址
target属性：指定窗口打开方式

<form name="myForm"></form>
<form method="post"></form>
<form action="index.php"></form>
<form target="_blank"></form>

input标签
插入表单内容，并进行相应设置。

<input type="表单类型" />

在这里插入图片描述
单行文本框
type属性取值为“text”，并通过下图设置属性。

<form method="post">
     姓名：<input type="text" value="helicopter"/>
 </form>

密码文本框
一种特殊的单行文本框，输入的字符不可见。属性设置同单行文本框。

<input type="password" />
密码：<input type="password" size="15" maxlength="10" />

单选框
type属性取值为“radio”。

<input type="radio" name="组名" value="取值" />

name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。对于同一组的单选框，必须要设置一个相同的name。

    <form method="post">
        性别:
        <input type="radio" name="gender1" value="男" />男
        <input type="radio" name="gender2" value="女" />女
    </form>

复选框
type属性取值为“checkbox”。

<input type="checkbox" name="组名" value="取值" />

属性设置同单选框一样。
按钮
常见的按钮有3种：普通按钮（button）；提交按钮（submit）；重置按钮（reset）。
普通按钮一般情况下都是配合JavaScript来进行各种操作的。

<input type="button" value="取值" />

提交按钮一般都是用来给服务器提交数据的，一种特殊功能的普通按钮。

<input type="submit" value="取值" />

重置按钮一般用来清除用户在表单中输入的内容。当我们在文本框中输入内容，然后按下重置按钮，会发现表单内容被清空了。

<input type="reset" value="取值" />

文件上传
文件上传也是使用input标签来实现的，其中type属性取值为file。

<input type="file" />

多行文本框
多行文本框却可以输入多行文本，使用的是textarea标签。

<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>

下拉列表
下拉列表由select和option这两个标签配合使用来表示的。

<select>
    <option>选项内容</option>
    ……
    <option>选项内容</option>
</select>

select属性设置如下图：
在这里插入图片描述

3.示例：网页显示如下表单

在这里插入图片描述
代码实现如下：

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title>练习题</title>
</head>
<body>
    <form>
        昵称：
        <input type="text" /><br/>
        密码：
        <input type="password" /><br/>
        邮箱：
        <input type="text" /> 
        <select> 
            <option value="qq.com">qq.com</option> 
            <option value="163.com">163.com</option> 
        </select><br/> 
        性别：
        <input type="radio" name="gender" value="男" />男
        <input type="radio" name="gender" value="女" />女<br/>
        爱好：
        <input type="checkbox" name="hobby" value="旅游" checked/>旅游
        <input type="checkbox" name="hobby" value="摄影"/>摄影 
        <input type="checkbox" name="hobby" value="运动" checked/>运动 <br/>
        个人简介：<br/>
        <textarea rows="10" cols="10"></textarea> <br/>
        上传个人照片：<br/>
        <input type="file" />
        <hr/>
        <input type="submit" value="立即注册" />
    </form>   
</body>
</html>

提示：本内容学习自《绿叶学习网》，推荐大家可以使用其学习。若有错误不足，欢迎批评指正。该系列文章仅供参考，欢迎互相学习交流。

感谢你的阅读，期待你的关注收藏点赞！

怪怪王

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
前端开发笔记(一)—HTML教程

前言不必害怕未知，无需恐惧犯错，做一个Creator！目录前言一、简介1.语言语法2.开发环境：VScode3.HTML结构二、基本标签1.简介2.标签使用3.示例（网页显示如下内容）三、文本标签1.简介2.标签使用3.示例（网页显示如下文本内容）四、列表与表格标签1.简介2.标签使用3.示例：网页显示如下表格与列表内容五、图片与超链接标签1.简介2.标签使用3.示例：通过点击图片转到目标链接六、表单标签1.简介2.标签使用3.示例：网页显示如下表单一、简介HTML/Hyper Text Mar
复制链接

扫一扫